[CI/CD 삽질기1] GitHub Actions로 EKS 자동 배포 구축하며 만난 오류들

도람·2026년 5월 3일
cdcieksgithubactions

트러블슈팅

목록 보기
7/10

GitHub Actions 조직 정책으로 서드파티 액션 차단

처음에 깃허브 argocd가 안되어서 왜 그런가 봤더니

조직 레벨에서 외부 액션 사용이 막혀있어서 pnpm/action-setup@v3 같은 액션을 못 쓰는 문제가 생겼다.
이거를 프로젝트 레포에서 보니 변경이 막혀있어서

조직 Settings에서 "Allow all actions" 으로 변경해서 해결하였다.


terraform.tfvars가 .gitignore에 막혀서 변수 못 읽는 문제

보안상 tfvars 파일은 git에 올리지 않는데, GitHub Actions는 로컬 파일을 못 읽는 문제도 발생했다. 이는 CI 실행 시 GitHub Secrets에서 값을 주입해서 tfvars를 동적으로 생성하는 방식으로 해결하였다.


DockerFile 못찾는 오류

이렇게 apply까진 했는데 오류가 떴다.
에러를 확인해보니 DockerFIle을 못찾는 오류이다.

워크플로우에서는 working-directory: ./backend 로 설정했는데 실제 Dockerfile 위치가 다른것이다.

이렇게 백엔드 경로에 DockerFile이 없어서,

deploy-all.yml에서 

      - name: Build, tag, and push image to Amazon ECR
        env:
          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
          ECR_REPOSITORY: pposiraegi-${{ matrix.service }}
          IMAGE_TAG: ${{ github.sha }}
        run: |
          docker build --build-arg MODULE_NAME=${{ matrix.service }} -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG -t $ECR_REGISTRY/$ECR_REPOSITORY:latest .
          docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
          docker push $ECR_REGISTRY/$ECR_REPOSITORY:latest

working-directory: ./backend 이 줄을 삭제해준다.

그리고나서 다시 Actions를 실행해본다.


프론트엔드 오류

패키지 이름 오류


이번에는 프론트엔드쪽이 오류가 떴다.

프론트엔드 패키지 이름이 frontend가 아닌 것이다.

Get-Content해서 보니 timedeal-front라고 뜬다.

따라서 deploy-all.yml에서 패키지이름을 timedeal-front로 바꿔준다
(json을 frontend로 바꾸는게 낫지 않나 싶었는데 다른곳에서 참조할 경우가 있기 때문에 json에 맞추어서 depoly-all 파일을 바꿔준다.)

##기존
      - name: Build Frontend
        run: pnpm turbo run build --filter=frontend
##바꾼 코드
      - name: Build Frontend
        run: pnpm turbo run build --filter=timedeal-front

이렇게 코드를 바꿔준다.


ESLint 오류로 빌드 실패

이렇게 오류가 또 생겼는데 찾아보니, React useEffect missing dependencies, 미사용 변수 선언 등 ESLint 규칙 위반으로 빌드 실패한 것이었다.

프론트엔드도 내 담당이기 때문에 코드를 직접 수정해준다.

Run pnpm turbo run build --filter=timedeal-front

Attention:
Turborepo now collects completely anonymous telemetry regarding usage.
This information is used to shape the Turborepo roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://turborepo.dev/docs/telemetry


   • Packages in scope: timedeal-front
   • Running build in 1 packages
   • Remote caching disabled

timedeal-front:build
cache miss, executing b851ac8de420a9b8

> timedeal-front@0.1.0 build /home/runner/work/pposiraegi-ecommerce/pposiraegi-ecommerce/frontend
> react-scripts build

Creating an optimized production build...

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

Failed to compile.

[eslint] 
src/api/auth.js
  Line 167:1:  Assign object to a variable before exporting as module default  import/no-anonymous-default-export

src/api/config.js
  Line 7:1:  Assign object to a variable before exporting as module default  import/no-anonymous-default-export

src/api/order.js
  Line 118:1:  Assign object to a variable before exporting as module default  import/no-anonymous-default-export

src/api/timedeal.js
  Line 182:1:  Assign object to a variable before exporting as module default  import/no-anonymous-default-export

src/pages/AddressManager.jsx
  Line 30:6:  React Hook useEffect has missing dependencies: 'navigate' and 'user'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

src/pages/AdminPage.jsx
  Line 57:6:  React Hook useEffect has a missing dependency: 'fetchDeals'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

src/pages/MyPage.jsx
  Line 24:6:    React Hook useEffect has missing dependencies: 'navigate' and 'user'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
  Line 227:28:  'v' is assigned to itself                                                                                                 no-self-assign

src/pages/OrderResult.jsx
  Line 26:6:  React Hook useEffect has missing dependencies: 'fetchOrder' and 'order'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

src/pages/TimeDealDetail.jsx
  Line 41:6:  React Hook useEffect has missing dependencies: 'fetchDeal', 'fetchRelatedDeals', and 'user'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
  Line 47:6:  React Hook useEffect has a missing dependency: 'fetchDeal'. Either include it or remove the dependency array                                     react-hooks/exhaustive-deps

src/pages/TimeDealList.jsx
  Line 6:26:   'logout' is defined but never used            no-unused-vars
  Line 12:16:  'setUser' is assigned a value but never used  no-unused-vars

src/pages/WishList.jsx
  Line 18:6:  React Hook useEffect has a missing dependency: 'navigate'. Either include it or remove the dependency array  react-hooks/exhaustive-deps


 ELIFECYCLE  Command failed with exit code 1.
Error: timedeal-front#build: command (/home/runner/work/pposiraegi-ecommerce/pposiraegi-ecommerce/frontend) /home/runner/setup-pnpm/node_modules/.bin/pnpm run build exited (1)
 ERROR  timedeal-front#build: command (/home/runner/work/pposiraegi-ecommerce/pposiraegi-ecommerce/frontend) /home/runner/setup-pnpm/node_modules/.bin/pnpm run build exited (1)

 Tasks:    0 successful, 1 total
Cached:    0 cached, 1 total
  Time:    13.829s 
Failed:    timedeal-front#build

 ERROR  run failed: command  exited (1)
Error: Process completed with exit code 1.

일단 오류 로그는 이렇게 떴다.

  • frontend/src/api/auth.js
  • frontend/src/api/config.js
  • frontend/src/api/order.js
  • frontend/src/api/timedeal.js
  • frontend/src/pages/AddressManager.jsx
  • frontend/src/pages/AdminPage.jsx
  • frontend/src/pages/MyPage.jsx
  • frontend/src/pages/OrderResult.jsx
  • frontend/src/pages/TimeDealDetail.jsx
  • frontend/src/pages/TimeDealList.jsx
  • frontend/src/pages/WishList.jsx
    이렇게,
    고쳐야할 파일이 11개나 되기 때문에 아찔했다.
    그래도 임시방편으로 deploy-all에서 CI: false 하는것보단 근본적으로 고치는게 내 성격에 맞기 때문에 고쳐준다.

일단 코드가 frontend/src/api/auth.js같은 경우에는

##중략
// 401 인터셉터: 토큰 만료 시 자동 로그아웃 + 로그인 페이지 이동
axios.interceptors.response.use(
  res => res,
  err => {
    if (err.response?.status === 401) {
      localStorage.removeItem('accessToken');
      localStorage.removeItem('refreshToken');
      localStorage.removeItem('user');
      sessionStorage.removeItem('user');
      // 현재 페이지가 /login이 아닐 때만 리다이렉트
      if (!window.location.pathname.startsWith('/login')) {
        window.location.href = '/login?expired=1';
      }
    }
    return Promise.reject(err);
  }
);

export default { login, register, logout, getCurrentUser, saveAddress, getAddress };

이렇게 되어있는데 맨 마지막줄을

const authAPI = { login, register, logout, getCurrentUser, saveAddress, getAddress };
export default authAPI;

이런식으로 고쳐준다.
(거의 모든 파일이 저렇게 되어있어서 저런식으로 고쳐준다.)

또는
useEffect에서 발생하는 오류가 있는데, 이는 dependency array 문제다.
React의 useEffect는 두 번째 인자로 dependency array를 받는데, useEffect 내부에서 사용하는 변수나 함수가 dependency array에 없으면 ESLint가 경고를 띄운다.

예를 들어 AddressManager.jsx의 경우

jsuseEffect(() => {
    if (!user) { navigate('/login'); return; }
    ...
}, []); // ← navigate, user를 사용하는데 dependency array가 비어있음

이런 경우 navigate와 user를 dependency array에 추가해줘야 한다.

jsuseEffect(() => {
    if (!user) { navigate('/login'); return; }
    ...
}, [navigate, user]); // ← 추가

단, TimeDealDetail.jsx처럼 fetchDeal, fetchRelatedDeals 같은 함수를 dependency에 넣으면 무한루프가 발생할 수 있다. 이런 경우 해당 함수를 useCallback으로 감싸서 함수 참조가 변경되지 않도록 처리해준다.


그리고나서 Actions가 잘 돌아가는지 확인한다.



fetchDeals, fetchOrder를 useCallback으로 감싸 무한루프 방지


Actions를 돌렸더니 이러한 오류가 떴다. 

Run pnpm turbo run build --filter=timedeal-front

Attention:
Turborepo now collects completely anonymous telemetry regarding usage.
This information is used to shape the Turborepo roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://turborepo.dev/docs/telemetry


   • Packages in scope: timedeal-front
   • Running build in 1 packages
   • Remote caching disabled

timedeal-front:build
cache miss, executing 381ed73731ab9079

> timedeal-front@0.1.0 build /home/runner/work/pposiraegi-ecommerce/pposiraegi-ecommerce/frontend
> react-scripts build

Creating an optimized production build...

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

Failed to compile.

[eslint] 
src/pages/AdminPage.jsx
  Line 57:7:  'fetchDeals' was used before it was defined                                                                                                                                             no-use-before-define
  Line 59:9:  The 'fetchDeals' function makes the dependencies of useEffect Hook (at line 57) change on every render. To fix this, wrap the definition of 'fetchDeals' in its own useCallback() Hook  react-hooks/exhaustive-deps

src/pages/OrderResult.jsx
  Line 26:6:  React Hook useEffect has a missing dependency: 'fetchOrder'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
Error: timedeal-front#build: command (/home/runner/work/pposiraegi-ecommerce/pposiraegi-ecommerce/frontend) /home/runner/setup-pnpm/node_modules/.bin/pnpm run build exited (1)
 ERROR  timedeal-front#build: command (/home/runner/work/pposiraegi-ecommerce/pposiraegi-ecommerce/frontend) /home/runner/setup-pnpm/node_modules/.bin/pnpm run build exited (1)


 ELIFECYCLE  Command failed with exit code 1.

 Tasks:    0 successful, 1 total
Cached:    0 cached, 1 total
  Time:    13.493s 
Failed:    timedeal-front#build

 ERROR  run failed: command  exited (1)
Error: Process completed with exit code 1.

아까보다는 나아졌다.
이제는 AdminPage.jsx랑 OrderResult.jsx만 에러가 뜨고 있다.

AdminPage.jsx - import에 useCallback 추가하고 fetchDeals를 useCallback으로 감싸고 useEffect 위로 올려 수정해준다.

OrderResult.jsx - import에 useCallback 추가하고 fetchOrder를 useCallback으로 감싸 수정해준다.

그리고 다시 Actions를 실행해준다.


fetchDeals, fetchOrder 함수 누락으로 인한 not defined 오류 수정

방금 고친 AdminPage랑 OrderResult에서 여러가지를 수정하며, 쓰지 않는 함수를 삭제했는데 잘못 삭제하여 함수를 찾지 못한다고 에러가 떠서 다시 추가해준다.

그리고 또 Actions를 기대해준다.


프론트엔드 마침내 성공

마침내 프론트엔드 빌드가 성공했다. 길고 길었던 ESLint 오류와의 싸움이 끝났다.

이제 4개의 백엔드와의 긴 싸움이 남았다.


profile
도람
정도를 걷는 엔지니어
이전 포스트

ArgoCD sync는 됐는데 Pod가 안 떠요 — 원인 추적기

다음 포스트

[CI/CD 삽질기2] GitHub Actions - backend쪽 고치기

0개의 댓글