실습: CI/CD 구성해 보기

문제

기본 react.js app 으로 CI/CD 를 구성해 본다.

 

app 생성 & 실행하기

npx create-react-app react-app --use-npm

cd react-app
npm run start

app build 하기

npm run build

app 테스트 실행하기

npm run test
CI=true npm run test
CI=true npm run test -- --coverage

app 배포하기

실습을 위해 surge 를 활용한다.

# surge 설치
npm install --global surge

# 배포시 아래 명령 실행 후 build 디렉토리 위치를 지정
# interactive mode
surge  

# domain 을 지정할 경우
nxp surge --project ./build --domain rainy-tank.surge.sh

app build 를 하면 build 디렉토리가 생성 되는데, 이 위치를 surge 에서 project 위치로 지정해 준다.

https://rainy-tank.surge.sh/ 로 app 이 배포되었다.

 

workflow 구조

 

workflow 작성

feature branch → dev branch merge pull request

name: merge feature to dev PR
on:
  pull_request:
    branches:
      - dev

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: use NodeJS
        uses: actions/setup-node@v1 # python 도 지정 가능 setup-python@v2
        with:
          node-version: "12.x"
      - run: npm ci
      - run: npm test -- --coverage
        env:
          CI: true

 

accepts pull request (feature → dev)

pull request 를 수락해 dev branch 로 merge 될 때의 workflow 를 작성한다. 앞서 했던 작업을 모두 수행하면서 build, deploy 과정이 추가되어야 한다. workflow 파일을 분리해 작성할 수도 있지만, 여기서는 if 문을 활용해 위의 workflow 에 추가하는 형태로 작성해 본다. dev branch 로 merge 가 완료된 것은, dev branch 의 push 이벤트로 감지할 수 있다.

name: Feature to Dev PR
on:
  pull_request:
    branches: [dev]
  push:
    branches: [dev]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: use NodeJS
        uses: actions/setup-node@v1 # python 도 지정 가능 setup-python@v2
        with:
          node-version: "12.x"
      - run: npm ci
      - run: npm test -- --coverage
        env:
          CI: true

      #########################################################
      # dev 에 merge 되었을 때는 build / deploy 를 추가로 한다.
      # merge 는 dev push event 로 처리된다.
      #########################################################
      - name: build project
        if: github.event_name == 'push'
        run: npm run build

      - run: npm install -g surge
        if: github.event_name == 'push'

      - name: deploy to staging
        if: github.event_name == 'push'
        run: npx surge --project ./build --domain toothsome-wall.surge.sh # stage address
        env:
          # surge 를 한번 실행한적이 있다면
          # surge whoami 로 확인 가능
          SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }}
          # surge token 으로 생성 가능
          SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}

 

아래 처럼 code coverage check 후 결과를 github actions 에 업로드 할 수도 있다.

      - run: npm ci
      - run: npm test -- --coverage
        env:
          CI: true
      - name: Upload test coverage
        uses: actions/upload-artifact@v1
        with:
          name: code-coverage
          path: coverage

실행 완료후에는 artifacts 항목에서 다운로드할 수 있다.