자동으로 이미지 압축해보실래요?

섬·2024년 1월 24일

이미지 액션이란

저장소에 포함돼 있는 이미지를 최적화 하는 액션입니다. 빠르고 효율적이며 sharp 패키지를 이용해 거의 무손실로 압축합니다. 물론 잘 구성된 프레임워크, 예를들면 next/image 로 이미지 최적화하는 방법을 제공하고 있지만 저장소 자체의 이미지 크기를 줄인다면 pull 할 때 부담 또한 덜 수 있어 매우 유용합니다.

어떻게 사용할까

저는 해당 yml 파일을 main 에 작성했습니다.
별도의 dev 브랜치를 만들고 이미지를 추가한뒤 main 에 pull request 를 보낼 때 이미지 압축 action 이 작동합니다.

name: Compress images
on: pull_request
jobs:
  build:
    name: calibreapp/image-actions
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@main
      - name: Compress Images
        uses: calibreapp/image-actions@main
        with:
          githubToken: ${{ secrets.GITHUB_TOKEN }}

명령어는 아주 간단합니다.

성공! 한걸까..?

Compress Images 를 눌러 로그를 확인해봅시다.

HttpError: Resource not accessible by integration

보아하니 GitHub API에 액세스할 때 권한 문제가 발생한 것 같아 보입니다. 이를 해결하기 위해 몇가지 생각을 해보았습니다.

githubToken이 잘못된 캐싱 문제 때문인가..?
=> 처음에githubToken이 레파지토리를 생성하면 자동으로 발급되는줄 모르고 직접 발급받아 삽입했습니다. 이후 다시 취소했지만 여전히 제대로 작동하지 않고 오류가 생겼습니다. 캐싱 문제로 의심되어 깃헙 레포와 프로젝트를 새로 파서 시도해보았지만 여전히 같은 문제가 생겼습니다.
깃허브 레포가 비공개이기 때문인가..?
=> 공개로 풀어도 안됐습니다.
yml 파일이 두개라 그런가..?
=> 절대 그럴리 없지만 이때부터 별걸 다 의심해보기 시작했습니다.
이게 진짜 문제이긴 한건가..?
=> 문제가 맞습니다.

(점점 산으로 가버리는..)

그리고 로그를 자세히 확인해보니 GitHub API에 액세스 권한 문제가 발생한 것 같아 보였습니다.

HttpError: Resource not accessible by integration
해당 오류는 GitHub API로의 요청이 통과되지 않고 있는 상태를 나타냅니다.

문제 해결

Solved. Thank you.

지푸라기를 잡는 심정으로 레파지토리의 setting 을 들어가 github action 권한을

Read and wrtie permissions
Allow Github Actions to create and approve pull request

로 바꿨습니다.

(기도중..)

.
.
.

성공!

이미지 압축에 성공하면 이 기특한 github-actions 봇 녀석이 댓글을 달아줍니다.
Before/After 까지 아주 완벽합니다. :>

로그도 달라집니다.

사용시 주의점

githubToken 은 깃허브 레파지토리가 생성되면 자동으로 생성됩니다. 따로 생성할 필요 없습니다.

The GITHUB_TOKEN is automatically generated by GitHub and scoped only to the repository that is currently running the action. By default, the action can’t update Pull Requests initiated from forked repositories.
https://docs.github.com/en/actions/reference/authentication-in-a-workflow
and
https://help.github.com/en/articles/virtual-environments-for-github-actions#token-permissions
githubToken: ${{ secrets.GITHUB_TOKEN }}

리액트 딥다이브 책에는 브랜치 이름이 master 라고 되어있지만 본인 브랜치가 main 이면 main 으로 변경하세요. (깃허브에는 main 으로 되어있다는거)
pull request 권한을 반드시 allow 하세요.
성공한척 하는 애들의 log 를 제대로 확인해야 해요.

image-actions 레포 : https://github.com/calibreapp/image-actions

이상 리액트 딥다이브 책에서 소개한 calibreapp/image-actions 을 사용해 이미지 압축이 마무리 되었습니다. 잘만 사용하면 정말 유용한 action 이 될 수 있을 것 같다는 생각이 듭니다. 한글 문서가 없어 에러 디버깅이 매우 힘들었지만, 로그에 적혀있는 에러를 차근차근 읽어보고 경우의 수를 하나씩 지워나가니 점차 해결방법이 보였습니다.

마무리

다음 주면 리액트 딥다이브 스터디가 마무리 됩니다. 스터디 회고때 스스로 불만족스럽다고 생각했던 실습 부분을 채우기 위해 스터디 외 시간에는 혼자서 이것저것 시도하고 있습니다. 이번엔 도커에 이어 (이미 지나가버린 파트지만) github-action 실습을 진행해보았습니다. 아직 많이 부족하지만 현재는 문제를 발견하고 하나씩 해결해가는 과정에 의의를 두고있습니다.

리액트 딥다이브로 리액트를 공부하시는 신입 개발자분들에게 제 글이 도움 되길 바라며........................ 이만 !