[GitHub] actions 이용한 github pages 배포 방법 (베타)

github pages 배포 방식이 기존 브랜치 배포 말고 또 하나 생겼는데요, GitHub Actions를 이용하는 방식입니다.

• actions/configure-pages
• actions/upload-pages-artifact
• actions/deploy-pages

위 액션들을 이용하게 되는데, 빌드 후 pages artifact에 업로드 하고, 해당 artifact로 deploy 하게 됩니다. 기존엔 보통 peaceiris/actions-gh-pages 같은 액션을 썼는데, 이젠 공식 액션을 쓰면 되겠습니다.

베타 버전이긴 하지만 기능이 없어지거나 하진 않을 듯 합니다.

 

name: Deploy React with Github Actions

on:
  workflow_dispatch:
  push:
    branches: [ main ]

# Allow one concurrent deployment
concurrency:
  group: "pages"
  cancel-in-progress: true

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/configure-pages@v2
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          # cache: 'npm'

      - run: npm ci --legacy-peer-deps
      - run: npm run build
        env:
          CI: false

      - name: Upload pages artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: 'build/'

  # Deploy job
  deploy:
    needs: build
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

react 프로젝트를 빌드, 배포하는 워크플로 예시입니다.

이렇게 구성하면 따로 github pages용 브랜치를 만들 필요가 없고, CNAME 설정도 리파지토리별로 해줄 필요가 없습니다!!

너무 좋네요