nextJS 아파치 서버 github action CI/CD 구축하기

seonik kim·2024년 4월 12일

VPS 서버를 구매하여 webpanel(VirtualMin)을 설치하여 사용하고 있습니다.
nextJS를 vps server에서 사용하기 위한 과정을 공유합니다.

  1. github repo 생성
  2. local github 연결
  3. server (root)virtualMin에서 ssh key를 생성합니다.
    (관리자 계정으로 들어가서 ssh를 생성해야 github action)이 오류 없이 작동합니다.
    ssh-keygen -t rsa -C "rsa Key"
  4. github 계정에서 key(.pub)를 등록합니다.
    -- github repo ssh 복사를 위해 등록 필요
  5. public_html(배포하고자 하는 폴더)에 접속해 git init을 실행 + github repo 연결 pull 받기
    -- 이 방식이 안좋다는 말이 있어서 공부가 필요
  6. virturalmin Proxy 설정 - virtualmin edit proxy website 에서 수정.
    -- proxy 3000 ~ 30xx 로 다른 가상 서버와 겹치지 않게 설정해야 함. 또한 ecosystem에서 값을 동일하게 맞춰줘야 정상적으로 pm2로 실행이 됩니다.
  7. yarn intsall -> yarn build -> yarn start-pm2(pacakage.json 사전 설정) 테스트 후
  8. github action CI/CD 코드 작성
  9. root에 .github/workflows/deploy-to-server.yml
    -- env 설정은 오류가 있음. 수정 필요
  10. secrets.VPS_IP, secrets.VPS_USERNAME, secrets.VPS_PASSWORD github에서 추가
  11. 배포 완료

`
name: Deploy to VPS

on:
push:
branches:
- main

jobs:
deploy:

runs-on: ubuntu-latest

strategy:
  matrix:
    node-version: [18.x]

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

  - name : Cache
    uses: actions/cache@v4
    with:
      path: |
        ~/.npm
        ${{ github.workspace }}/.next/cache
      key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
      restore-keys: |
        ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-

  - name: Install dependencies
    run: |
      yarn install

  - name: access to secrets
    run: | 
      echo "NEXT_PUBLIC_GRAPHQL_API_URL=${{ secrets.API_END_POINT }}" >> .env         

  - name: Build the project
    run: |
      yarn build 

  - name: 원격 접속 배포
    uses: appleboy/ssh-action@v0.1.6
    with:
      host: ${{ secrets.VPS_IP }}        
      username: ${{ secrets.VPS_USERNAME }}     
      password: ${{ secrets.VPS_PASSWORD }}    
      port: 22                             
      script: |
        echo "Deploying to VPS server"
        cd public_html
        git pull origin main
        yarn install 
        yarn build
        pm2 list
        yarn start-pm2

`

ecosystem.config.js
`
module.exports = {
apps: [
{
name: 'severino partners', #프로젝트에 맞게 변경
script: 'next',
args: 'start',
instances: '2',
exec_mode: 'cluster',
env: {
NODE_ENV: 'production',
PORT: 3002, #본인에 맞게 변경
},
},
],
};

`

개선이 필요한 점
SSR 사용시 서버에 부담이 크기 때문에 SSG 형태로 개발 방향을 전환하는게 필요함.
또한 배포시 CICD 최적화 필요

profile
김선익

0개의 댓글