github-action에서 Docker와 SSH로 Nextjs 원격 배포하기

📒 github-action에서 Docker와 SSH로 Nextjs 원격 배포하기

---

이전 개인 프로젝트를 배포했던 자취방 고물 노트북서버입니다.

 

보안도 허술하게 설정해놓고 하염없이 방치하다 보니 어느 순간 우분투가 먹통이 되어 이번에 포맷하고 새로 설치했습니다.

 

이번엔 포트폴리오 용도로 만든 Nextjs 웹사이트를 배포하려 하는데,

전에 github self hosted runner를 서버에 직접 설치해 사용하던 방식이 너무 불편했던 것을 떠올렸습니다.

 

생각해보니 깃허브에서 무료로 github hosted runner를 제공하고 있고,

이걸 다음과 같이 이용해 보자는 생각을 했습니다.

 

github hosted runner에서 앱 빌드
-> docker 빌드
-> docker hub에 이미지 push

-> ssh로 배포할 서버에 올린 이미지 받고 컨테이너 올리는 명령어 전송

-> 배포 끝

 

이런 흐름이면 docker repo 덕에 빌드하는 서버와 배포하는 서버 간 의존성이 없어져 서버 관리가 너무나 편리해집니다.

 

그럼 제가 짜본 스크립트를 소개드립니다.

 

📌 Dockerfile

FROM node:22-alpine AS base

FROM base AS deps
  RUN apk add --no-cache libc6-compat
  WORKDIR /app

  COPY package.json pnpm-lock.yaml ./
  RUN corepack enable pnpm 
  RUN pnpm i --frozen-lockfile

FROM base AS builder
  WORKDIR /app
  COPY --from=deps /app/node_modules ./node_modules
  COPY . .

  ARG FIREBASE_KEY
  ARG FIREBASE_PROJECT
  ARG FIREBASE_MESSAGING
  ARG FIREBASE_APP_ID
  ARG FIREBASE_MEASUREMENT_ID

  RUN echo "NEXT_PUBLIC_FIREBASE_KEY=$FIREBASE_KEY" >> .env \
    && echo "NEXT_PUBLIC_FIREBASE_PROJECT=$FIREBASE_PROJECT" >> .env \
    && echo "NEXT_PUBLIC_FIREBASE_MESSAGING=$FIREBASE_MESSAGING" >> .env \
    && echo "NEXT_PUBLIC_FIREBASE_APP_ID=$FIREBASE_APP_ID" >> .env \
    && echo "NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=$FIREBASE_MEASUREMENT_ID" >> .env
    
  RUN corepack enable pnpm
  RUN pnpm run build

FROM base AS runner
  WORKDIR /app

  ENV NODE_ENV=production

  RUN addgroup --system --gid 1001 nodejs
  RUN adduser --system --uid 1001 nextjs

  COPY --from=builder /app/public ./public

  RUN mkdir .next
  RUN chown nextjs:nodejs .next

  COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
  COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

  USER nextjs

  EXPOSE 3000

  ENV PORT=3000

  ENV HOSTNAME="0.0.0.0"
  CMD ["node", "server.js"]

도커 이미지를 빌드할 때 실행되는 파일입니다.

 

여기서는 node 이미지를 이용해 pnpm으로 앱을 빌드하고 환경변수를 추가해 주도록 했습니다.

 

사실 이미지를 빌드할 때 민감한 키 정보가 포함되면 이미지를 까봤을 때 죄다 노출되기 때문에 안되지만,

서버에 컨테이너를 올린 후, exec 명령어로 env 파일을 추가 해도 인식이 되지 않아 별 다른 방법이 없었습니다.

 

이 글을 보신다면 github repo와 docker hub가 public일 때 민감한 키 정보는 추가하지 마시길 당부드립니다.

 

Nextjs Dockerfile은 공식 예제를 조금 수정했으니 필요하시면 다음 링크를 참고해 주세요.

https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile

 

📌 .github/workflows/deploy.yml

name: deploy

on:
  push:
    branches: [main]

jobs:
  app-build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3

      - name: Login docker hub
        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_TOKEN }}

      - name: Build and Push Docker Image
        uses: docker/build-push-action@v6
        with:
          push: true
          tags: ${{ secrets.DOCKER_USERNAME }}/${{secrets.DOCKER_IMAGENAME}}:${{github.run_id}}
          build-args: |
            FIREBASE_KEY=${{secrets.FIREBASE_KEY}}
            FIREBASE_PROJECT=${{secrets.FIREBASE_PROJECT}}
            FIREBASE_MESSAGING=${{secrets.FIREBASE_MESSAGING}}
            FIREBASE_APP_ID=${{secrets.FIREBASE_APP_ID}}
            FIREBASE_MEASUREMENT_ID=${{secrets.FIREBASE_MEASUREMENT_ID}}

      - name: execute remote ssh
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SERVER_IP }}
          username: ${{ secrets.SERVER_USERNAME }}
          key: ${{ secrets.SERVER_SSH_KEY }}
          port: ${{ secrets.SERVER_SSH_PORT }}
          script: |
            docker login -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_TOKEN }}
            docker pull ${{ secrets.DOCKER_USERNAME }}/${{secrets.DOCKER_IMAGENAME}}:${{github.run_id}}
            docker stop ${{secrets.DOCKER_IMAGENAME}} || true
            docker rm ${{secrets.DOCKER_IMAGENAME}} || true
            docker run -d --restart=always --name ${{secrets.DOCKER_IMAGENAME}} -p 3000:3000 ${{ secrets.DOCKER_USERNAME }}/${{secrets.DOCKER_IMAGENAME}}:${{github.run_id}}

전 회사에서 배포 스크립트 짤 때는 gitlab ci를 사용해 모든 스크립트를 전부 수작업으로 처리해야 했는데,

github-action은 이런 배포 모듈 생태계가 너무 잘 짜여있어 사용할 때마다 너무나 편리한 것 같습니다.

 

제가 사용한 모듈은 다음과 같습니다.

• actions/checkout@v3
  github 리포지토리의 코드를 체크아웃
  
• docker/setup-buildx-action@v3
  docker의 멀티 아키텍처 빌드를 지원하는 Buildx를 설정
  
• docker/login-action@v3
  docker Hub에 로그인
  
• docker/build-push-action@v6
  docker 이미지를 빌드하고 푸시
• appleboy/ssh-action@master
  SSH로 원격 서버에 명령어를 실행
  도커 로그인 -> 이미지 pull -> 기존 컨테이너 내림 -> 새 이미지 컨테이너 실행
  

도커 파일의 변수는 docker/build-push-action의 build-args로 넘겨주었고,

appleboy/ssh-action을 이용해 서버에 키 방식으로 ssh 명령어를 날려주었습니다.

 

프로젝트가 잘 배포되었으니 계속해서 github hosted runner를 무료 한도 내에서 야무지게 사용할 예정입니다.