[github action] 빌드부터 배포까지!

아기코린이·2022년 10월 20일

들어가기

완성된 react 앱을 배포하기 위한 방법에는 여러가지 방법이있다. 그중 CI/CD를 보다 쉽게 해주는 vercel, netlify와 같은 클라우드 시스템을 사용하는 방법과 오늘 블로그에서 이야기해볼 github action을 이용하는 방법이다. 물론 다른 방법도 아주 많다!

Github action

오늘 github action을 연습하려고 만든 레포지토리다.

이미 여러번 시도했고 뼈아픈 실패를 겪었다. 이 글은 실패와 성공, 그리고 해결방법을 기록하는 글이다.

workflow 작성하기

최종적으로 완성된 코드는 아래와 같다. 다만 아래의 코드를 완성하는데 한가지 오류를 만나게 되었다.

name: build
on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [16.x]
    steps:
    - uses: actions/checkout@v2
    - uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - name: install
      run: npm install
    - name: build
      run: npm run build
      
  test:
    runs-on: ubuntu-latest
    needs: build
    strategy:
      matrix:
        node-version: [16.x]
    
    steps:
    - uses: actions/checkout@v2
    - uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - name: install
      run: npm install
    - name: test
      run: npm run test

왜... 안되지...?

jobs의 진행사항을 install, build, test로 나누고 싶었다.

name: build
on:
  push:
    branches: [main]

jobs:
  install:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [16.x]
    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: npm
    - name: install
      run: npm install
        
  build:
    runs-on: ubuntu-latest
    needs: install
    strategy:
      matrix:
        node-version: [16.x]
    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: npm
    - name: build
      run: npm run build

위와 같이 코드를 작성했고, 다음과 같은 오류가 나왔다.

Error: Process completed with exit code 127.

react-script 라이브러리가 설치되지 않아 발생한 오류라는 것을 확인했다. 나는 needs: install로 install이 진행된 뒤 같은 가상환경에서 build가 진행된다고 생각했다. 하지만 동일한 가상환경에서 실행되지 않았나보다. (눈물 한 방울 또르르...) 결국 install과 build를 같은 Action안에서 실행했다.

빌드된 파일을 EC2로

build 부분을 다음과 같이 수정했다. (test부분은 삭제했다.)

  ...
  build:
    ...
    - name: install
      run: npm install
    - name: build
      run: npm run build
    - name: Deploy build outputs
      uses: appleboy/scp-action@master
      with:
        host: ${{ secrets.SERVER_HOST }}
        username: ${{ secrets.SERVER_NAME }}
        key: ${{ secrets.SSH_PEM_KEY }}
        passphrase: ${{ secrets.SSH_PEM_PASSPHRASE }}
        source: "build/*"
        strip_components: 1
        target: ${{ secrets.SERVER_PATH }}

host: 서버의 주소
username: 서버에 유저 접속할 유저명
key: pem, crt, key 등 ssh 접속 키
passphrase: pem, crt, key의 비밀번호(비밀번호가 설정되지 않았다면 생략가능)
port: ssh접속 포트 번호 (생략시 기본포트인 22)
key로 접속하지 않고 username, password로도 접속가능

secrets는 다음 경로에서 작성이 가능하다.

repogitory -> setting -> secrets -> action

New repository secret 클릭 후 작성

모든 설정이 완료됐다면, 해당 레포지토리에 push를 한다! push와 동시에 작성된 action이 실행된다.

action이 성공하면 초록색 체크 표시를 볼 수 있다. (널 보기위해 내 소중한 하루를 갈아 넣었어....)

업로드된 파일 확인

서버에 정상적으로 올라갔다! 서버에 올라간 파일을 호스팅해주면 끝!

정적 배포

폴더 구조는 다음과 같다.

project
  ├── build/
  ├── node_modules/
  ├── package-lock.json
  ├── package.json
  └── server.js

express를 이용하여 간단한 정적배포를 구현했다.

// server.js
const express = require('express')
const static = require('serve-static')

const app = express()

app.use(static(__dirname + "/build"))

app.get('/', (req, res) => {
  res.send('index.html')
})

app.listen(9999, () => {
  console.log('server is running 9999')
})