Github Action을 이용해서 CloudFlare Pages 배포, CI/CD 만들기

이 블로그는 Cloudflare Pages에 배포된 사이트입니다.

보통은 배포를 위해 Wrangler CLI 를 설치해서 수동으로 배포하거나, Github Repository 를 만들어서 Cloudflare Pages에 연동하고 옵션/기능을 이용하면 자동으로 쉽게 배포할 수 있습니다.

하지만, Github Action을 이용하여 CI/CD를 만들어야 하는 분도 있을거라고 생각합니다.

저의 경우에는 Git Flow -> Github Flow -> Butler Flow 등 다양한 깃 전략을 사용하고 있습니다. 그래서 이에 맞추어 CI/CD 를 만들어 사용해야 더 편한 배포가 가능했습니다.

Wrangler Action …?#

Github Action에서 Wrangler를 사용하기 위한 통합도구입니다.

Wrangler Action ↗에서 자세한 내용을 확인할 수 있으며, 주요기능으로는

Cloudflare Workers 배포 자동화
Pages 프로젝트 배포¹
KV 네임스페이스 관리
…etc.

우리는 Pages 프로젝트 배포에 사용할 것이므로 관련 기능에 대해서만 다루겠습니다.

Create a Blank Github Action#

작업하고 있는 코드에서 Github Action 파일을 직접 작성할 수 있는 분은 건너뛰어도 되는 부분입니다.

아니라면 아래 내용을 확인하여 빈 Github Action 파일을 생성할 수 있습니다.

Create a Github Action

작업하고 있는 깃허브 저장소에 Actions 탭에서,set up a workflow yourself -> 버튼으로 빈 Github Action을 생성합니다.

Write a Github Action#

코드 작성하는 화면이 만들어지면, 혹은 직접 파일을 생성하셨으면 다음과 같이 내용을 작성하시면 됩니다.

astro + bun + workflow_dispatch 버전#

먼저, workflow_dispatch²를 이용해서 Github Action을 수동으로 트리거 하는 방법입니다.

deploy-cloudflare-pages.yaml

name: Deploy Cloudflare Pages

on: workflow_dispatch

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - uses: actions/checkout@v4

      # node package manager 로 BUN 을 이용합니다.
      - name: Set up bun
        uses: oven-sh/setup-bun@v2

      # bun 을 이용해서 astro 를 빌드합니다.
      - name: bun install and build
        run: |
          bun install
          bun run build

      - name: Deploy app
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          # Astro 는 빌드된 파일들이 dist 폴더에 존재합니다. (기본값)
          command: pages deploy dist --project-name=<PROJECT_NAME> --branch=<BRANCH_NAME>

      - name: print deployment-url
        env:
          DEPLOYMENT_URL: ${{ steps.deploy.outputs.deployment-url }}
        run: echo $DEPLOYMENT_URL

yaml

vercel + pnpm + push main branch 버전#

deploy-cloudflare-pages.yaml

name: Deploy Cloudflare Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - uses: actions/checkout@v4

      # node package manager 로 PNPM 을 이용합니다.
      - name: Set up pnpm
        uses: pnpm/action-setup@v4

      # pnpm 을 이용해서 빌드합니다.
      - name: pnpm install and build
        run: |
          pnpm install
          pnpm run build

      - name: Deploy app
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          # Vercel 은 빌드된 파일들이 .vercel/output/static 폴더에 존재합니다. (기본값)
          command: pages deploy .vercel/output/static --project-name=<PROJECT_NAME> --branch=<BRANCH_NAME>

      - name: print deployment-url
        env:
          DEPLOYMENT_URL: ${{ steps.deploy.outputs.deployment-url }}
        run: echo $DEPLOYMENT_URL

yaml

그 외 다른 버전은…?#

필요한 것들을 제보³해주시면, 집계 후 작성하겠습니다.

마무리#

이 글은 저처럼 Butler Flow 등의 다양한 Git 전략을 이용하거나, Github Action 을 이용하여 Cloudflare Pages 배포하고 싶은 분들을 위한 글입니다.

공식 문서를 찾아도 초보를 위해 완벽하게 동작하는 코드를 찾을 수 없습니다. 이미 잘 알고 있는 사람들을 위한 문서들 뿐입니다.

그렇기에 이 글을 통해 다른 분들이 편히 이해하고 사용할 수 있었으면 좋겠습니다.

예전에는 Pages 프로젝트 배포에 Pages Action ↗이라는 것을 이용할 수 있었는데, 현재는 더 이상 사용되지 않습니다. ↩
수동으로 action 워크플로 실행에 관한 자세한 내용은 Github Docs ↗를 확인하시기 바랍니다. ↩
댓글(기능 추후 업데이트) 혹은 메일로 제보 부탁드립니다. ↩