[React] 자기소개 페이지 만들고 배포하기(github actions로 자동 배포) - 3

github action은 소프트웨어 workflow를 자동화할 수 있도록 도와주는 도구 라고한다.

업데이트가 생기면 자동으로 프로젝트를 배포하기 위해 사용했다.

 

Github Secrets 만들기

보안 취약점을 방어하기 위해 사용한다. 나는 노드 버전과 깃허브 Personal Access Token을 Secrets에 추가했다.

 

Github Secrets 경로

해당 Repogitory > setttings > 왼쪽 메뉴 Secrity > Secrets and variables > Actions 

 

GITHUB_TOKEN은 어디서 만들까? 

github actions의 workflow를 업데이트하기위해 personal access token이 필요하다.

깃허브 우측 상단 프로필 사진 > Settings > Developer Settings > Personal access tokens > Tokens > Generate new token을 통해 만들 수 있다. 

 

.github/workflow 폴더에 ph-pages.yml 만들기 

우선 .github/workflow 폴더를 만들자. 그리고 그 안에 ph-pages.yml 파일을 만들고 작업흐름을 정의해야한다.

더 설명하자면 .github/workflows 폴더 안에 있는 YAML 에 정의된 GitHub Actions 작업 흐름대로 자동화된 빌드, 테스트 및 배포 작업을 수행할 수 있기 때문이다. Repository에 push 될 때 마다 workflow가 실행된다.

 

Github Action Core 개념 

• Github Action을 이해하기 위해서 알아야 하는 개념은 Workflow, Event, Job, Step, Action, Runner 등이 있음
• 1) Workflow
  • 여러 Job으로 구성되고, Event에 의해 트리거될 수 있는 자동화된 프로세스
  • 최상위 개념
  • Workflow 파일은 YAML으로 작성되고, Github Repository의 .github/workflows 폴더 아래에 저장됨
• 2) Event
  • Workflow를 Trigger(실행)하는 특정 활동이나 규칙
  • 예를 들어 다음과 같은 상황을 사용할 수 있음
    • 특정 브랜치로 Push하거나
    • 특정 브랜치로 Pull Request하거나
    • 특정 시간대에 반복(Cron)
    • Webhook을 사용해 외부 이벤트를 통해 실행
  • 자세한 내용은 Events that trigger workflows 참고
• 3) Job
  • Job은 여러 Step으로 구성되고, 가상 환경의 인스턴스에서 실행됨
  • 다른 Job에 의존 관계를 가질 수 있고, 독립적으로 병렬 실행도 가능함
• 4) Step
  • Task들의 집합으로, 커맨드를 날리거나 action을 실행할 수 있음
• 5) Action
  • Workflow의 가장 작은 블럭(smallest portable building block)
  • Job을 만들기 위해 Step들을 연결할 수 있음
  • 재사용이 가능한 컴포넌트
  • 개인적으로 만든 Action을 사용할 수도 있고, Marketplace에 있는 공용 Action을 사용할 수도 있음
    • Github Marketplace와 Github Actions Repository에서 확인 가능
• 6) Runner
  • Gitbub Action Runner 어플리케이션이 설치된 머신으로, Workflow가 실행될 인스턴스
  • Github에서 호스팅해주는 Github-hosted runner와 직접 호스팅하는 Self-hosted runner로 나뉨
  • Github-hosted runner는 Azure의 Standard_DS2_v2로 vCPU 2, 메모리 7GB, 임시 스토리지 14GB
    • Self-hosted runners 참고
• 7) with: Action에 값을 전달할 수 있다. ${{ secrets.XXX }}라는 값으로 GitHub의 Secrets 값을 가져올 수 있다.
  
     

 

 

        

 

나는 아래와 같이 정의 했다. 

 

# workflow의 이름
name: Build and Deploy

# Workflow를 동작시키는 trigger
on:
  push:
    branches:
      - "main"

jobs:
  #실행할 job deploy 뿐만 아니라 test 등과 같이 다양한 job이 있다.
  deploy:
  	# job을 사용하는 환경
    runs-on: ubuntu-latest
    steps:
      # GitHub Actions는 프로젝트를 리눅스 환경에 checkout하고 나서 실행한다.
      # 누군가 만들어 놓은 Action을 사용할 때는 uses라는 키워드를 사용해야 한다.
      - uses: actions/checkout@v2
	  # job의 이름
      - name: Use Node.js
        uses: actions/setup-node@v2
		#GitHub의 Secrets 값인 NODE_VERSION을 가져온다.
        with:
          node-version: ${{ secrets.NODE_VERSION }}

 	  # 해당 프로젝트의 node_modules가 변했는지 안 변했는지를 이용해서
      # 모듈 변화가 있을 때만 패키지를 install 하도록 한다.
      - name: Cache node modules
        uses: actions/cache@v2
        # 해당 step을 대표하는 id
        id: cache
        with:
          # cache의 대상을 정한다. 
          # yarn에서 의존성이 설치되는 dir인 node_modules가 대상이다.
          path: node_modules
          # cache 무효화를 결정하는 기준은
          # 의존성이 변경되면 함께 변경되는 파일인 yarn.lock(npm은 package-lock.json)을 기준으로 한다.
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          # key가 유효하지 않은 경우 runner의 운영체제 값과 node라는 suffix를 key로 복구.
          # 결과적으로 yarn.lock(npm은 package-lock.json)이 변경되지 않았다면 
          # 캐싱된 node_modules를 사용한다.
          # 만약 복구될 캐시가 없다면 아래에서 사용할 cache-hit는 false
          restore-keys: |
            ${{ runner.os }}-yarn-

      - name: Install Dependencies
      	# 이전의 cache가 없다면 dependency를 설치
        if: steps.cache.outputs.cache-hit != 'true'
        run: yarn install

      - run: yarn install --immutable --immutable-cache --check-cache
      - run: yarn build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.TOKEN }}
          # build가 되는 경로
          publish_dir: ./build

 

이제 push를 하면 위에서 정의한대로 workflow가 실행된다.

 

실행된 모습

 

예전에 진행했을 때는 정말 복잡하다고 생각했는데 다행히 여러 참고자료가 있어서 자료조사에 수고를 덜었다. 감사합니다.

 

 

참고

- Github Action 사용법 정리

https://zzsza.github.io/development/2020/06/06/github-action/

 

- 카카오웹툰은 GitHub Actions를 어떻게 사용하고 있을까?

https://fe-developers.kakaoent.com/2022/220106-github-actions/  

 

- npm ci란? 그렇다면 yarn은?

https://duck-blog.vercel.app/blog/web/npm-ci-do-how-about-yarn 

 

- 뱅크샐러드 Web chapter에서 GitHub Action 기반의 CI 속도를 개선한 방법

https://blog.banksalad.com/tech/github-action-npm-cache/

 

- Github Actions를 이용하여 gh-pages 자동 배포하기 

https://davidyang2149.dev/front-end/github-actions%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-gh-pages-%EC%9E%90%EB%8F%99-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0/