Nextjs + GitHub Actions 으로 CI/CD 적용하기

[Spring Boot + GitHub Actions 으로 CI/CD 적용하기

나는 EC2환경에서 nextjs기반의 프론트 프로젝트와 spring boot기반의 백엔드 프로젝트를 동시에 배포하고있다.비용적인 이유가 가장 크다.EC2에서의 배포는 Git을 통해 소스코드를 pull받은 뒤에 서버

mildwpaper.tistory.com](https://mildwpaper.tistory.com/32)

이전 시간에 Spring Boot 와 GitHub Actions으로 간단하게 CI/CD를 구축했었다.

오늘을 Nextjs 와 GitHub Actions을 사용해서 프론트 서버를 배포하려고 한다.

이전과 마찬가지로 GitHub Secrets설정이 필요하다.

GitHub Secrets 설정

이름	설명
SERVER_HOST	서버 ip (예: 13.124.56.78)
SERVER_USER	서버 사용자 (예: ec2-user)
SERVER_SSH_KEY	ssh 개인 키 (PEM 또는 OpenSSH 포맷)

이후에 프로젝트에 해당 파일을 추가한다. .github/workflows/deploy.yaml

name: Deploy Next.js

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repo
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '23'

      - name: Install pnpm
        run: npm install -g pnpm

      - name: Install dependencies
        run: pnpm install

      - name: Create .env.local from secrets
        run: |
          echo "NEXT_PUBLIC_KAKAO_REDIRECT_URI=${{ secrets.NEXT_PUBLIC_KAKAO_REDIRECT_URI }}" >> .env.local
          echo "NEXT_PUBLIC_KAKAO_CLIENT_ID=${{ secrets.NEXT_PUBLIC_KAKAO_CLIENT_ID }}" >> .env.local
          echo "KAKAO_CLIENT_SECRET=${{ secrets.KAKAO_CLIENT_SECRET }}" >> .env.local
          echo "NEXT_PUBLIC_KAKAO_JS_KEY=${{ secrets.NEXT_PUBLIC_KAKAO_JS_KEY }}" >> .env.local
          echo "NEXT_PUBLIC_BACKEND_API_URL=${{ secrets.NEXT_PUBLIC_BACKEND_API_URL }}" >> .env.local

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

      - name: Prepare deploy folder
        run: |
          mkdir deploy
          cp -r .next public package.json pnpm-lock.yaml next.config.ts deploy/

      - name: Upload to EC2
        uses: appleboy/scp-action@v0.1.4
        with:
          host: ${{ secrets.EC2_HOST }}
          username: ${{ secrets.EC2_USER }}
          key: ${{ secrets.EC2_SSH_KEY }}
          source: "deploy"
          target: "/home/ubuntu/web"

      - name: Restart on EC2 (PM2)
        uses: appleboy/ssh-action@v0.1.6
        with:
          host: ${{ secrets.EC2_HOST }}
          username: ${{ secrets.EC2_USER }}
          key: ${{ secrets.EC2_SSH_KEY }}
          script: |
            source /home/ubuntu/web/.env
            cd /home/ubuntu/web/deploy
            npm install
            pm2 delete nextjs-app || true
            pm2 start npm --name "nextjs-app" -- start --prefix /home/ubuntu/web/deploy

이전의 Srping Boot 배포 경험을 통해 어렵지 않게 할 수 있었다.
하지만 유의할 점이 있었는데, Spring의 경우 .jar로 파일이 묶여있는 상태에서 scp가 이뤄졌다면 이번에는 .next public package.json pnpm-lock.yaml 파일들을 스크립트를 통해 패키징 해줘야했다.

환경변수에대한 값들을 추가하는 부분 또한 GitHub Secrets에 추가하여 동작시켰다.

 

Nginx 설정

sudo apt install nginx -y
sudo vim /etc/nginx/sites-available/default

 

설정 예시

   server {
       listen 80;
       server_name _;

       location / {
           proxy_pass http://127.0.0.1:3000;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection 'upgrade';
           proxy_set_header Host $host;
           proxy_cache_bypass $http_upgrade;
       }
   }

 

적용 후 Nginx 재시작:

sudo nginx -t
sudo systemctl restart nginx