Github Action사용법 + Push하면 바로 deploy 되게 하기

얼마전 취업 코딩과제로 받았던 Movie App 만들기에 GithubAction을 달아서 Push시 자동 Deploy가 되도록 만들었다.
구글 검색을 열심히 해가며 프로젝트에 적용하는것은 어렵지 않았지만, 그래도 적지 않은 시간이 들었다.
시간이 지나서 또 필요한 상황이 왔을때 간단한 검색만으로 빠르게 적용하기 위해 내 것으로 만드는 시간을 가져보려 한다.

Github Action

Github 저장소의 Workflow를 자동화 하기위한 도구이다.

아래 YAML 코드는 Push하면 자동으로 deploy 하게 만드는 Github Action이다.

name: Auto Deploy # deploy source
 
on:
  push:
    branches: [ main ]
  workflow_dispatch:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@master
        with:
          node-version: 14.x
      - name: Cache node_modules
        uses: actions/cache@v1
        with:
          path: node_modules
          key: ${{runner.OS}}-build-${{hashFiles('**/yarn.lock')}}
          restore-keys: |
            ${{ runner.OS }}-build-${{ runner.OS }}-
       - name: Install dependencies
        run: |
          npm install
          npm run build
       - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{secrets.ACCESS_TOKEN}}
          publish_dir: ./build

GitHub Action을 만드는 방법

Github의 본인의 repo에 접속해 Actions 탭으로 들어간다.

Node, Deno 등등 여러가지 제공하는 Workflows가 있다.
하지만 다 필요없고 set up a workflow yourself -> 를 누른다
Workflow의 간단한 사용법을 정리해봤다.

name: CI # workflow의 이름
on: # Workflow가 동작하는 조건
  push: # git push를 하면 동작
    branches: [ main ] # main 브랜치만 트리거하게끔 함
  pull_request:
    branches: [ main ]
   # Actions 탭에서 이 워크플로를 수동으로 실행할 수 있습니다.
  workflow_dispatch:
jobs: # 수행할 작업들
  build: # 작업의 이름
    runs-on: ubuntu-latest # 가상환경 인스턴스
    steps: # job에서 수행할 작업들을 순서대로 나열
      - uses: actions/checkout@v2 # 외부의 Action을 가져옴
      - name: Run a one-line script # 수행할 목록의 이름
        run: echo Hello, world! # 수행할 명령어, 단일 명령을 수행함.
        with: # Action에 넘겨주는 파라미터
                path: 'static-site-generator' # uses에 적혀있는 Action에 해당 값을 넘겨준다.
      - name: Run a multi-line script
        run: | # 수행 할 명령어, 여러가지 명령을 수행함
          echo "Hello $FIRST_NAME $middle_name $Last_Name, today is Monday!"
          echo test, and deploy your project. 
        env: # 환경 변수값 정의, 위 명령어에서 사용가능
               FIRST_NAME: Mona
          middle_name: The
          Last_Name: Octocat

이제 위에 쓰여진 사용법을 토대로 deploy하는 github action을 스스로 분석해서 적용해보자.

추가로 actions-gh-pages은 v2와 v3의 사용법이 다르다.
v2의 경우 토큰이나 배포 폴더등을 env로 지정하지만, v3는 with로 사용해야 한다. 이것때문에 많이 헤맸다.