Github pages 자동 배포하기 (+ Github Actions)

배경

최근 한 카페의 태블릿용 메뉴판 제작 의뢰를 받았다.

메인 컬러가 Black이고, 카페의 로고나 인테리어가 심플한 이미지를 갖고 있어서 최대한 심플한 UI로 구성해봤다.

그리고 이번 프로젝트는 단순 정적 웹이라 React + CSS로 몇 시간만에 뚝딱했다.

 

그리고 ①서비스가 가볍고, ②매장 내 한 기기에서만 사용될 것이기 때문에

Github pages로 배포했다!

 

 

아 뭔가 프로젝트가 너무 심심하게 끝나는 것 같다..😑

 

그래서! 

Github Actions를 사용하여 자동 배포를 해보고자 한다.

 

 

---

Github pages로 호스팅하는 방법은 아래 글을 참고하면 된다.

 

https://shinsojeong.tistory.com/106

Github pages로 정적 웹 무료 호스팅하기

 

 

---

 

자동 배포 설정

(https://docs.github.com/ko/actions/learn-github-actions/understanding-github-actions 참고)

 

지금까지는 코드가 변경될 때마다 매번 수동으로 빌드 및 배포를 해왔다.

이제부터는 Push될 때마다! 즉 코드가 변경될 때마다 자동으로 빌드 및 배포를 하도록 설정해보려고 한다.

자동 배포를 위해 Github Actions를 사용해볼 것이다.

 

 

 

GitHub Actions
빌드, 테스트 및 구현 파이프라인을 자동화할 수 있는 CI/CD 플랫폼이다.
저장소에서 특정 이벤트가 발생할 때 워크플로우를 실행할 수 있게 한다.

 

 

 

!간단한 용어 설명!

 

Workflows는 하나 이상의 작업(job)을 실행하는 자동 프로세스이다.

Job은 Step의 집합이며, 각 Job은 독립성을 갖고 있다. (=서로 종속되지 않음)

 

Event는 워크플로우를 실행시키는 특정 활동을 말한다.

예) commit push, pull request

 

 

// 프로젝트의_루트_폴더/github/workflows/github-actions.yml 예제

//워크플로우명
name: my first Workflow
//Github 저장소 > Actions 탭 > 실행 워크플로우 목록에 나타나는 이름
run-name: ${{ github.actor }} is learning GitHub Actions

//워크플로우의 트리거를 지정
on:
  push:
    branches: ["master"]  //브랜치명
  pull_request:
    branches: ["master"]  //브랜치명

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Node.js
        uses: actions/setup-node@v3
        with: node-version: 12.x

      - name: Install Modules
        run: npm install

      - name: Build
        run: npm run build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_ACTION_KEY }}
          publish_dir: ./build  //빌드된 파일 폴더

 

 

Github에서는 민감한 데이터를 안전하게 보관 및 사용할 수 있도록 돕는 Secrets라는 기능을 제공한다.

 

맨 마지막에서 두 번째 줄을 보면 secrets.GITHUB_ACTION_KEY가 보일 것이다.

이는 Private 저장소에 접근할 수 있도록 생성한 Personal access tokens을 Github Secrets에 저장하고, 사용한 것이다.

 

 

---

 

이제 Personal access tokens을 생성하여 Github Secrets에 저장하고, 사용해보자!

 

 

먼저 Personal access tokens를 생성한다.

 

Github 내 프로필 > Settings >  Developer Settings > Personal access tokens > Tokens (classic)

Generate new token을 클릭

 

반드시 workfflow를 체크해야 한다.

Note, 토큰 유지 기간을 추가로 입력한 후 토큰 생성 버튼을 클릭한다.

 

 

그럼 이렇게 발급된 토큰이 보여진다.

이 페이지를 벗어나면 다시는 절대 볼 수 없으니!! 잘 복사해둬야 한다.

 

 

.

 

이제 생성한 토큰을 Secrets 변수로 저장해보자.

 

프로젝트 Repository > Settings > Actions secrets and variables > Actions

 

New repository secret 버튼 클릭

 

Name에는 Secret을 식별하기 위한 이름을 넣고, (현재 프로젝트에서는 GITHUB_ACTION_KEY라는 변수명을 사용함)

Secret에는 아까 복사한 토큰을 붙여넣는다.

그리고 Add secret을 클릭하여 등록한다.

 

 

---

 

자동 배포가 제대로 이루어지고 있는지 확인!

 

위에서는 push되거나 pull-request를 보낼 때 워크플로우가 실행되도록 설정했다.

자동 배포가 정상적으로 이루어지고 있는지 확인하기 위해, 파일을 수정한 뒤 commit & push 해보자.

 

만약 자동 배포가 성공적으로 이루어졌다면

Github Repository > Actions에서 실행된 워크플로우들을 확인할 수 있을 것이다.

 

각 워크플로우를 클릭하면 보다 상세한 실행 내용도 확인할 수 있다.

 

첫 자동 배포 설정 성공!