[GitHub Actions] Private Repo로 Github Blog 배포하기

안녕하세요, 블로그 주인장 하댑입니다.

깃헙 블로그를 열심히 만들었는데 코드를 공개하고 싶지 않을때 보통 여러 호스팅 사이트를 이용해서 배포하는데요. 예전에 제가 간단하게 깃헙 블로그를 Gatsby로 생성해서 Netlify로 배포하는 튜토리얼을 포스팅한 적이 있습니다. 이번에는 Github에서 기본으로 제공하는 Github Page를 이용해서 개발자인거 자랑도 좀 하면서, 관련 코드 자체는 Private 하게 보관할 수 있는 방법을 알려드리겠습니다.

---

준비 과정

일단 기본 아이디어는 크게 두가지 Repo를 만들어서 사용합니다.
- 사이트 정적파일을 업데이트할 Public Repo: { 본인의 깃헙 아이디 }.github.io
- 정적파일을 빌드하기 위한 코드를 저장할 Private Repo: { 이름은 아무거나 }
여기서는 Gatsby를 이용해 정적사이트를 빌드할 예정입니다.이 정적사이트를 생성해서 배포하는 원리를 이해하기 위해서는 서버리스 웹구조와 JAMStack에 대한 이해가 바탕이 되어야 하는데요, 나중에 관련 포스팅으로 정리해보겠습니다.

블로그 배포를 자동화하기 위해서 GitHub Actions를 사용합니다. 예전에 빌드와 배포 자동화를 위해서 다양한 다른 CI 플러그인이 필요했는데, 최근에는 Github Actions에 다양한 패키지들이 등장하면서 굉장히 편리해졌습니다.

전체과정을 살펴보면 Private Repo에서 npm run build 를 통해 만든 빌드 정보가 담긴 public 폴더를 그대로 Public Repo에다가 Commit/Push 하는 작업이 필요합니다. 깃헙 블로그를 만들어본 분이시라면 모두 아시겠지만, Public Repo 이름을 깃헙페이지 기본으로 해두었기 때문에 해당 Repo에 Push하면 별도의 작업 없이도 {{ 깃헙 아이디 }}.github.io 로 사이트가 배포된 것을 확인할 수 있습니다. 만약 따로 url을 커스터마이징 하고 싶다면 도메인 이름을 구매하셔서 CNAME을 작성해주시면 됩니다. Private Repo에서 이 CNAME 파일을 static 폴더에 넣어두고 빌드할 때 public 폴더에 생성되도록 합니다. (결과물: Repo )

깃헙 액션 워크플로우 (GitHub Actions Workflow) 작성

Gatsby 코드를 보관하고 있는 Private Repo의 root 폴더 경로에 .github/workflows 를 생성하고 main.yml 파일을 작성합니다.

main.yml

name: gatsby deploy

on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-20.04
    permissions:
      contents: write
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '14'

      - 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 format
      - run: npm run build

      - name: Push folder to Another Repo
        uses: cpina/github-action-push-to-another-repository@main
        env:
          API_TOKEN_GITHUB: ${{ secrets.ACTIONS_PERSONAL_TOKEN }}
        with:
          source-directory: public
          destination-github-username: '{{ 깃헙 아이디 }}'
          destination-repository-name: '{{ 깃헙 아이디 }}.github.io'
          target-branch: main
          commit-message: 'Update'

중요한 부분만 자세히 살펴보겠습니다. 

먼저 Private Repo에 main 브랜치에 push하면 워크플로우가 트리거되도록 합니다. Pull Request를 통해 트리거해서 배포 스케쥴을 따로 커스터마이징 하기도 합니다. 

on:
  push:
    branches:
      - main

배포 작업을 시작할 수 있도록 작업 환경을 설정해주고, actions/checkout@v3을 통해 해당 repo 코드를 내려받습니다. 
다음으로 actions/setup-node@v3 로 빌드 작업을 실행할 Node 버전을 설정해줍니다. 
매번 러닝 환경과 node 패키지를 설치하는 작업이 너무 오래걸리기 때문에 actions/cache@v2로 캐싱 작업을 해줍니다. 

      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

런타임에서 npm 빌드 작업을 차례로 해준다음 만들어진 public 폴더를 Public Repo로 push 해줍니다. 여기서 Github Token으로는 다른 Repo에 접근이 어렵기 때문에 Personal Access Token을 따로 생성해서 Private Repo에 Settings>Secrets>Actions에 저장해둡니다. 

Personal Access Token 등록

이제 cpina/github-action-push-to-another-repository@main을 이용해 public 폴더를 복사하고 push 하도록 스크립트를 작성합니다. 여러 옵션을 통한 커스터마이징은 링크로 걸어둔 해당 github action repo에서 확인하실 수 있습니다. 

      - name: Push folder to Another Repo
        uses: cpina/github-action-push-to-another-repository@main
        env:
          API_TOKEN_GITHUB: ${{ secrets.ACTIONS_PERSONAL_TOKEN }}
        with:
          source-directory: public
          destination-github-username: '{{ 깃헙 아이디 }}'
          destination-repository-name: '{{ 깃헙 아이디 }}.github.io'
          target-branch: main
          commit-message: 'Update'

자, 이제 작성한 스크립트를 포함한 Private Repo에 코드를 수정하고 push하면 배포 상황을 Actions 탭에서 확인하실 수 있습니다. 

public 폴더를 push한 Public Repo에서는 github-pages[bot]이 자동으로 배포해주게 됩니다. 

지금까지 Private Repo 에서 정적사이트를 빌드하고, 깃헙 블로그로 배포하는 작업을 알아보았습니다. 이렇게 배포한 제 사이트는 Gatsby/React/Typescript/Graphql 공부하면서 개인 사이드 프로젝트를 올리는 용도로 조금씩 업데이트할 예정입니다. 
누군가에게는 도움이 되길 바라며, Happy Hacking!