React : Github-actions로 배포 자동화

 

 

 

github-pages를 통해 배포까지 완료했으나 매번 새로운 코드를 push하고, deploy 하는 과정은 낭비이므로 배포 자동화를 프로젝트에 적용해보자.

 

 

 

yml 파일 작성

 

actions가 어떤 방식으로 이루어질지를 결정하는 yml 파일을 우선 작성해야 한다.

 

root/.github/workflows/ 하위에 gh-pages.yml 파일을 생성하자.

 

내용은 아래와 같이 작성한다.

 

name: Build and Deploy

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v2.1.2
        with:
          node-version: "12.x"
      
      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{hashFiles('**/package-lock.json')}}
          restore-keys: ${{ runner.os }}-node
      - run: npm ci
      - run: npm run build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build # 이 폴더에 있는 파일을 배포

 

파일을 작성했다면 파일을 add, commit 후 원격 저장소에 push 해주자.

 

 

PAT (Personal Access Token) 업데이트

 

위 코드를 작성하고 git push origin main을 시도하면 아래와 같은 에러가 발생할 수 있다.

 

main -> main (refusing to allow a Personal Access Token to create or update workflow `.github/workflows/gh-pages.yml` without `workflow` scope)

 

이 오류가 발생하는 이유는 현재 저장된 GITHUB_TOKEN에 workflow가 설정되지 않았기 때문이다. 그러므로 workflow 제어 가능한 토큰을 발생하고 origin을 업데이트 해주어야 한다.

 

 

우선 새로운 토큰을 발급받는다. 발급 시 반드시 workflow 체크박스를 체크해주자.

 

반드시 체크

토큰이 발급되면 origin에 저장된 깃허브 주소를 업데이트하자.

 

우선, origin값을 제거한다.

 

git remote remove origin

 

이후 origin을 아래와 같이 생성한다.

 

git remote add origin https://<PAT>@github.com/<account>/<repo>.git

 

예로, pat가 '12345', 계정이 'react', 레포지토리가 'test'면

 

git remote add origin https://12345@github.com/react/test.git

 

위와 같이 입력하면 된다.

 

 

다시 yml 파일을 add, commit, push 하면 원격저장소에 파일이 올라간다.

 

 

빌드 자동화

 

yml 파일이 정상적으로 레포지토리에 올라가면 새로운 코드가 레포지토리에 커밋되는 동시에 빌드와 배포가 일어난다.

 

action이 제대로 이루어졌다면 커밋 메세지 끝이 초록색 체크가 뜬다.

 

 

Deployment 탭에서 배포 또한 정상적으로 이루어졌음을 알 수 있다.

 

 

 

배운 점

 

배포 자동화 구현을 통해 코드를 push하고 배포하는 번거로운 과정을 자동화시킬 수 있음을 배웠습니다.

 

다만, 아쉬운 점은 yml 파일 작성법을 몰라 거의 복붙을 했다는 점이 아쉽습니다.

 

yml 파일 작성방법, github actions 사용법을 더 자세히 익힐 필요성을 느낍니다.

 

 

출처

 

https://docs.github.com/en/enterprise-server@3.4/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens

https://github.com/orgs/community/discussions/26254

https://zuyo.tistory.com/910