GitHub Actions로 CI + CD 파이프라인 완성하기

앞의 두 편까지는 전부 수동 배포였다.

이제부터는 진짜 개발자다운(?) CI/CD 이야기를 적어보려 한다.

---

1. 목표 파이프라인

내가 설계한 흐름은 이렇다.

1. dev 브랜치에서 개발
2. dev에 push 될 때마다 → CI 빌드 체크
3. dev → main으로 PR 생성
4. PR에서 다시 CI 체크 통과해야만 → main으로 Merge 가능
5. main에 머지되면 → 배포 워크플로우(deploy.yml) 실행
6. GitHub Actions가 EC2에 SSH로 접속해서:
   • git fetch / reset
   • npm install --omit=dev
   • npm run build
   • pm2 restart onfit 을 자동으로 수행
     

즉,

PR = CI (검증)

Merge = CD (배포)

가 되도록 만든 것이다.

---

2. CD: GitHub Actions → EC2 자동 배포 (deploy.yml)

2-1. GitHub Secrets 설정

먼저 GitHub 레포 설정에서 Actions Secrets를 만들었다.

• Settings → Secrets and variables → Actions → New repository secret

내가 만든 주요 시크릿들은:

• EC2_HOST : 35.74.238.231 (EC2 퍼블릭 IP)
• EC2_KEY : onfit.pem 파일 내용을 그대로 복붙한 값

EC2_KEY는 맥에서:

cat ~/Downloads/onfit.pem

로 내용을 출력해서 그대로 복사 + GitHub Secret에 붙여 넣었다.

(이때 Keychain이 열리려고 할 때마다 취소하고, 그냥 텍스트로 복사하는 게 포인트.)

2-2. 배포 워크플로우 파일 생성

레포 루트에서:

.github/workflows/deploy.yml

을 만들고 아래 내용을 작성했다.

name: Deploy to EC2

on:
  push:
    branches:
      - main       # main에 push될 때마다 실행

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Deploy on EC2 via SSH
        uses: appleboy/ssh-action@v1.0.0
        with:
          host: ${{ secrets.EC2_HOST }}
          username: ubuntu
          key: ${{ secrets.EC2_KEY }}
          script: |
            cd /home/ubuntu/on-fit/on-fit-next

            echo "[DEPLOY] git fetch & reset to origin/main..."
            git fetch origin
            git reset --hard origin/main

            echo "[DEPLOY] install dependencies..."
            npm install --omit=dev

            echo "[DEPLOY] build..."
            npm run build

            echo "[DEPLOY] restart pm2..."
            pm2 restart onfit || pm2 start npm --name "onfit" -- start

            echo "[DEPLOY] done."

여기서 경로는 실제 EC2 안에서의 프로젝트 위치에 맞춰야 한다.

/home/ubuntu/on-fit/on-fit-next

초기에는 SSH 타임아웃(i/o timeout) 에러도 났었는데, 그건 보안 그룹에서 22번 포트를 GitHub Actions에서 접근 가능하게 열어주면서 해결했다.

이제 main에 어떤 커밋이 푸시되면 Actions 탭에서 이렇게 로그가 나온다.

• git fetch/reset
• npm install
• npm run build
• pm2 restart

그 후 https://onfit.today에 접속하면 곧바로 최신 코드가 반영된 것을 확인할 수 있다.

---

3. CI: dev / PR 단계에서 빌드 체크 (ci.yml)

CD까지 구축하고 나니, 한 가지 걱정이 남았다.

“만약 빌드가 깨지는 코드를 main에 merge하면?

EC2 배포 단계에서 바로 터지는 거 아닌가…?”

그래서 main에 들어가기 전에 무조건 빌드가 성공하는지 확인하는 CI를 추가했다.

3-1. CI 워크플로우 파일 생성

on-fit-next 프로젝트가 on-fit 레포 안쪽에 있으므로,

working directory를 ./on-fit-next로 지정하는 게 중요했다.

.github/workflows/ci.yml

name: CI

on:
  pull_request:
    branches: [ main ]   # dev -> main PR
  push:
    branches: [ dev ]    # dev에 push할 때도 체크

jobs:
  build:
    runs-on: ubuntu-latest

    env:
      NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
      NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
      SUPABASE_SERVICE_ROLE_KEY: ${{ secrets.SUPABASE_SERVICE_ROLE_KEY }}

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install dependencies
        working-directory: ./on-fit-next
        run: npm install

      - name: Build project
        working-directory: ./on-fit-next
        run: npm run build

여기서 중요한 포인트는 두 가지였다.

1. working-directory 를 꼭 ./on-fit-next로 설정

   → 루트(on-fit)에는 package.json이 없어서, 처음엔 ENOENT 에러가 났었다.

2. Supabase 환경변수 를 secrets에 넣고 env로 주입

   → CI 환경은 .env 파일이 없어서, supabaseUrl is required 에러가 떴다.

   → NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY 등을 Secrets에 넣고 env로 넘기니 해결.

---

4. CI가 잡아준 실제 버그들

CI를 돌리면서 몇 가지 문제를 사전에 잡을 수 있었다.

4-1. 모듈 누락: @radix-ui/react-dialog

Dialog 컴포넌트를 만들 때 @radix-ui/react-dialog를 사용했는데,

로컬엔 설치되어 있지만 package.json에 반영이 안 돼 있어서 CI에서 이런 에러가 났다.

Module not found: Can't resolve '@radix-ui/react-dialog'

해결:

cd on-fit-next
npm install @radix-ui/react-dialog
git add package.json package-lock.json
git commit -m "fix: add radix dialog dependency"

4-2. TypeScript strict 에러

예를 들어 이런 타입 에러가 있었다.

Type error: Type 'string | undefined' is not assignable to type 'string'.

PostInfo → ReportModal로 넘기는 props에서:

<ReportModal
  ...
  postTitle={data?.title ?? ""}
  targetUserId={data?.profile?.id}
/>

targetUserId가 string | undefined라서 에러.

CI가 없다면 실제 배포할 때까지 몰랐을 이슈였다.

수정:

<ReportModal
  ...
  postTitle={data?.title ?? ""}
  targetUserId={data?.profile?.id ?? ""}
/>

또한 useSearchParams를 사용하는 /auth 페이지에서

Next.js 16의 “CSR bail-out + Suspense” 관련 경고/에러도 잡으면서,

서버 컴포넌트와 클라이언트 컴포넌트를 분리하는 방향으로 리팩터링까지 진행했다.

---

5. 브랜치 보호 규칙 (main에 깨진 코드 못 들어오게 막기)

CI까지 만들고 나서 마지막으로 한 단계 더:

“CI가 실패하면 아예 main에 머지 자체가 안 되게 만들자.”

GitHub에서:

1. Settings → Branches
2. main에 대해 Add branch protection rule
3. 옵션 설정:
   • Branch name pattern: main
   • ✅ Require status checks to pass before merging
   • 아래 리스트에서 CI 워크플로우 선택

이렇게 설정하면:

• dev → main PR 생성
• CI가 돌아서 초록불이 아니면
• Merge 버튼이 비활성화된다.

즉, “빌드 안 되는 코드는 main에 들어갈 수 없다”는 규칙이 강제된다.

---

6. 최종 개발 플로우 정리

이제 온핏의 기본 개발/배포 플로우는 이렇게 돌아간다.

1. 개발자는 dev 브랜치에서 작업

   • 기능 구현
   • npm run build 로컬 확인

2. dev에 push

   → GitHub Actions CI가 자동으로 빌드 돌림

3. dev → main PR 생성

   • PR에서 다시 CI 실행
   • 초록불이 되어야 Merge 가능

4. Merge pull request 버튼 클릭

   • main에 커밋이 쌓임
   • 동시에 Deploy to EC2 워크플로우 실행

5. 배포 워크플로우 (CD) 수행

   • EC2 SSH 접속
   • git reset --hard origin/main
   • npm install --omit=dev
   • npm run build
   • pm2 restart onfit

6. 사용자 브라우저

   • https://onfit.today 접속
   • 항상 최신 main 코드가 돌아감

---

마무리 – 첫 CI/CD 배포를 하면서 느낀 점

이번 온핏 프로젝트 배포를 준비하면서:

• 맨땅에 헤딩으로 EC2에 Next.js 올려보기
• Nginx + 도메인 + HTTPS까지 손으로 엮어보기
• 그리고 GitHub Actions로 “CI → Merge → CD” 자동화까지 연결

이라는 전체 흐름을 처음부터 끝까지 직접 겪어봤다.

가장 크게 느낀 두 가지는:

1. CI가 없으면 “내 로컬에서는 되는데…”를 영원히 반복할 수 있다
   • 모듈 누락, TypeScript 에러, 환경변수 누락 등
   • CI가 아니었으면 전부 서버에서만 터졌을 문제들이다.
2. CD를 붙여놔야 ‘배포가 귀찮다’는 이유로 main를 방치하지 않게 된다
   • 단순히 Merge 버튼만 누르면 자동으로 서버까지 업데이트되니
   • 주기적으로 배포하는 문화 자체가 훨씬 자연스러워진다.

이제 온핏에서 기능을 하나 추가할 때마다:

dev에 코드를 올리고,

PR에서 CI 초록불 확인하고,

Merge → 자동 배포 → onfit.today에서 바로 확인.

이 루틴이 똑같이 반복된다.