[프론트엔드 CI/CD 적용] React 프로젝트, Github Actions, Netlify 이용한 CI/CD 자동화 적용기

🚀 개요

프론트엔드에서의 지속적인 통합과 지속적인 배포의 자동화에 대해 적용을 하여 최적화를 진행한 경험과 방법을 공유하고자 합니다. 

 

우선 현재 프로젝트 환경에 대해 간략히 이야기 하겠습니다. 두 명이서 2주동안 진행하는 소규모 프로젝트이다 보니, Dev 브랜치에서만 Pull 과 Push를 하며 협업하기로 합의했습니다.

 

현 상황에 맞게 Dev 브랜치로 Push가 발생한다면 Github Actions에 의해 자동으로 Main 브랜치로 지속적인 통합을 해주며, 바뀐 Main 브랜치의 커밋을 감지하여 Netlify에 의해 자동으로 지속적인 배포를 해주는 자동화 로직을 구현하였습니다. 

 

추가적으로 자동으로 테스팅하려면 `package.json`의 script에 test와 관련된 라이브러리(vitest, jest) 를 설정 해주고 github actions 파일에 test 관련 스크립트를 추가하면, 쉽게 가능할 것으로 보입니다. 하지만 본 프로젝트는 테스트를 안하기로 합의해서 테스트 부분은 추후 구현되는 경우 업데이트 하겠습니다.

 

우선적으로 시연에서의 기술 스택은 React와 Github Actions, Node.js v18.7.0, Netlify 입니다. 사실 React는 중요하지 않습니다. 다른 라이브러리나 정적 웹사이트 경우에도 깃허브만 사용한다면 충분히 도움 될 것입니다.

 

✨프로젝트 CI/CD 설정

1️⃣ 리액트 설치

- `test-cicd` 로 프로젝트를 만들기

cd test-cicd
npx create-react-app .

 

CRA, Vite 중 편한 방식으로 리액트를 다운 받아주세요

 

2️⃣ 깃허브 설정

- 새 레포지토리 생성(test-cicd 이름으로 생성했습니다)

- 원격 저장소와 연결 (origin 이름으로 연결해줬습니다)

 

 

- 원격저장소 main으로 push 

git push origin main

 

- dev 브랜치 생성 

git checkout -b dev

 

- 원격저장소 dev로 push

git push origin dev

 

3️⃣ Github Actions 를 이용한 지속적인 통합

Github Actions는 반복적인 작업들을 자동화 해주기 위해 Github에서 제공하는 툴로서, 본 포스팅에서는 dev로의 push가 일어났을 경우, build를 하고 성공한다면 main으로 푸쉬하는 로직을 자동화 할 것입니다

 

- 루트 디렉토리에  .github 폴더, 그 안에 workflows 폴더 생성 후 node.js.yml 폴더 생성 후 입력하기

name: Node.js CI

on:
  push:
    branches:
      - dev

jobs:
  build:
    runs-on: ubuntu-latest

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

      - name: Use Node.js 18.7.0
        uses: actions/setup-node@v2
        with:
          node-version: '18.7.0'
          cache: 'npm'

      - name: Install dependencies
        run: npm install

      - name: Config Github Setting
        run: |
          git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
          git config --local user.name "github-actions[bot]"

      - name: Push to main
        if: success()
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          branch: main
          force: true
          atomic: true

on은 이벤트의 감지를 하는 옵저버 역할이고, 이벤트가 감지된다면 jobs를 실행하는 형식이다. 따라서 dev로의 push가 감지된다면 차례대로 `actions/checkout@v2`, `actions/setup-node@v2`, `npm install`, `ad-m/github-push-action@master`가 실행됩니다.

 

`actions/checkout@v2` 은 레포지토리 코드를 다운 받고, 작업 환경으로 가져오는 것입니다

`uses: actions/setup-node@v2`은 Node.js 환경 설정하는 것입니다, 아래 with, node-version에 사용할 노드 버젼을 입력하시면 됩니다. 로컬 환경의 Node 버젼을 입력해줬습니다

 

`ad-m/github-action@master` 같은 경우는 Github Action에서 repository에 push하기 위한 권한을 주는데 도움 주는 명령어입니다.

 

- 이 상태에서 `git push origin dev` 으로 dev로 push 하면 이제 자동으로 Github Actions가 실행되는 것을 확인할 수 있습니다

레포지토리의 Actions 목차에 가보면 Push한 마지막 커밋의 이름으로 자동화가 진행 된 것을 확인할 수 있습니다

하지만 Push to main에 권한이 없다는 것을 확인할 수 있습니다.

 

- Github 권한 설정해주기

- 깃허브 레포지토리 설정 > Actions > General 접속

- 아래 Workflow Permissns 의 Read and write Permissions 허용

- 그 후 커밋과 dev 브랜치로의 push를 하면 성공적으로 main 브랜치로 자동으로 푸쉬되는 것을 확인 가능합니다

성공적으로 main 브랜치로 push

 

4️⃣ Netlify를 이용한 지속적인 배포

앞서 Github Actions를 이용하여 dev 브랜치로 push시 빌드가 성공이라면 main 브랜치로 push하도록 자동화 시켰습니다.

 

이제 main 브랜치가 변경된다면, 자동으로 레포지토리의 main 을 다운받아, 지속적인 배포를 시키는 방법을 알려드리겠습니다

 

- Netlify Github로 가입

- Netlify > add new site > import an existing project

 

- 기존에 업로드 한 test-cicd 선택 

 

- 아래와 같이 설정

=> 결과적으로 프로젝트에서 Dev로만 Push해도 Main으로 적용후 자동으로 배포 되도록 환경설정을 하였습니다

 

💡새롭게 알게 된 것

동료로 부터 Github Actions를 통한 자동 배포에 대한 인사이트를 얻어서 새로운 프로젝트에 대해 적용했습니다.

 

기존에 자동 배포툴로 사용하던 Netlify에 자동으로 Main으로 푸쉬하게 해주는 Github Actions 를 얹어 나만의 자동 배포 방식을 설정했습니다

 

Github Actions를 잘 쓸 수만 있다면 초기 설정 시 프로젝트의 시간적인 측면에서 효율적일 수 있겠다 생각이 듭니다. 추후에도 비슷하게 자동화 할 수 있도록 공부를 해야겠습니다

 

이번에는 사용하면서 많이 막히기도 하였고, 간결한 코드 작성이 아닌 것 같다는 생각도 많이 듭니다. 기회되는데로 포스팅을 수정해 나가겠습니다

 

 

 

 

참조

https://github.com/ad-m/github-push-action

GitHub - ad-m/github-push-action: GitHub actions to push back to repository eg. updated code

자동화 된 내 레포지토리

https://github.com/TaePoong719/test-cicd

GitHub - TaePoong719/test-cicd