⚙️Setting: github actions 설정

[skyblue1232]

🧰 GitHub Actions 설정

프로젝트 루트(.github/workflows/)에

ci.yml 파일 생성 후 아래 내용 추가

name: Next.js CI/CD with Vercel
on:

push:

branches: [develop, main]
jobs:

build-and-deploy:

runs-on: ubuntu-22.04
steps:
  - uses: actions/checkout@v4

  - name: Install pnpm
    uses: pnpm/action-setup@v4
    with:
      version: 10

  - name: Use Node.js
    uses: actions/setup-node@v4
    with:
      node-version: 20
      cache: 'pnpm'
      cache-dependency-path: pnpm-lock.yaml

  - name: Install dependencies
    run: pnpm install

  - name: Build Next.js app
    run: pnpm build

  - name: Deploy to Vercel
    uses: amondnet/vercel-action@v25
    with:
      vercel-token: ${{ secrets.VERCEL_TOKEN }}
      vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
      vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
      working-directory: .
      vercel-args: ${{ github.ref == 'refs/heads/main' && '--prod' || '' }}

🔄 브랜치별 배포 구분

브랜치	배포 타입	배포 주소	설명
develop	Preview	https://af-fe-skyblue1232-gomgumas-projects.vercel.app	테스트/QA용
main	Production	https://af-fe.vercel.app	학술제 시연용

조건문(vercel-args)

vercel-args: ${{ github.ref == 'refs/heads/main' && '--prod' || '' }}

→ main일 때만 --prod 옵션이 추가되어 Production 배포로 전환됨.

🧪 예시 워크플로우

1️⃣ 임의의 브랜치에서 작업 후 develop 브랜치로 병합

2️⃣ git push → Actions 자동 빌드/배포 → Preview 링크 생성

3️⃣ 팀원 테스트 완료

4️⃣ develop → main PR 병합

5️⃣ GitHub Actions 자동 실행 → Vercel --prod 배포

6️⃣ https://af-fe.vercel.app 주소로 최신 버전 반영 완료

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
af-fe	Ready	Preview	Comment	Oct 9, 2025 6:22pm