Skip to content
blog.takenoko.dev
Blog

GitHub Actionsを使ってCloudflare Pagesにブログを自動デプロイする

概要

前の投稿でHugoで作成したブログをCloudflare Pagesにデプロイしました。
そのときはGitHubのリポジトリにCloudflare Pages GitHub Actionのアプリをインストールすることで自動デプロイを実現しました。

今回は自動デプロイにCloudflare Pages GitHub Actionを使わず、GitHub Actionsを使用してみます。 おまけにプルリクエストを作成して構築されたプレビュー環境に誰でもアクセスできてしまう問題があるので、自分のみアクセスできるようにします。

目的

この記事では以下の設定をします。

  • プレビュー環境へのアクセスを自分のみに設定する
  • Cloudflare Pagesが実行する本番環境への自動デプロイを止め、GitHub Actionsにデプロイさせる

ダイレクトアップロード用のプロジェクトを新規作成する

create-project

select-direct-upload

今回はtestというプロジェクト名で作成します。 project-upload

アップロードするファイルは以下のコマンドで生成します。Hugoを使っているなら、おそらくローカル環境に/publicディレクトリが作成されると思います。

Terminal window
$ hugo --gc --minify --enableGitInfo

publicができたなら、そのディレクトリをドラッグアンドドロップでアップロードします。 drag-and-drop-public-dir

サイトをデプロイボタンを押すとデプロイが完了します。

GitHub Actionsを設定する

やることは以下のステップです。

  1. CloudflareからAPIトークンを作成する
  2. GitHub Actionsにシークレットを設定する
  3. GitHub Actionsに変数を設定する

さっそくやっていきましょう

CloudflareのAPIトークンを発行する

Cloudflare dashboardのページに行きAPI Tokenを発行します。

トークンを作成するボタンを押します。 profile-token

カスタムトークンを選択します。 select-custom-token

トークン名は任意なので、好きに決めます。
アクセス許可は以下を選択します。

アカウントCloudflare Pages編集

create-custom-token

GitHub Actionsにシークレットを設定する

ブログを置いているGitHubのリポジトリに行きます。
Settings > Secrets and variables > ActionsからNew repository secretを選択します。

シークレット名は CLOUDFLARE_API_TOKENにして、シークレットはCloudflareで作成したAPIトークンをセットします。

変数値
CLOUDFLARE_API_TOKENCloudflareで発行したAPIトークン

set-secret-github-actions

アカウントIDを調べる

Cloudflare PagesのURLから確認できます。https://dash.cloudflare.com/<アカウントID>

ドメインを登録している場合、CloudflareのWebサイトからでも確認できます。
select-web-site

右下にアカウントIDがあるので、それをコピーします。 cloudflare-account-id

プロジェクト名を調べる

プロジェクト名はCloudflare Pagesの画面から探せます。今回はtestです。 find-project-name

GtiHub Actionsに変数を設定する

先ほど調べたアカウントIDとプロジェクト名、Deploy on Cloudflare Pages - HBS Docsを見ながら変数をセットします。

変数値
ACCOUNT_ID先ほど調べた値
PROJECT_NAMEtest
ASSET_DIRECTORY./public
HUGO_VERSION0.110.0
NODE_VERSION16

ブログを置いているGitHubのリポジトリに行きます。 Settings > Secrets and variables > ActionsからVariablesのタブをクリックし、New repository variableを選択します。

github-actions-variables

workflowファイルを作成する

以下を参考にCloudflare PagesへデプロイするGitHub Actionsを定義します。

2023年2月現在最新はv1.3.0です。

- name: Cloudflare Pages GitHub Action
  uses: cloudflare/pages-action@v1.3.0

自分のリポジトリに.github/workflows/publish.ymlを作成し、以下のymlをコピペします。

.github/workflows/publish.yml
on: [push]


jobs:
  publish:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      deployments: write
    name: Publish to Cloudflare Pages
    steps:
      - name: Checkout
        uses: actions/checkout@v3


      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: ${{ vars.HUGO_VERSION }}
          extended: true


      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: ${{ vars.NODE_VERSION }}
          cache: 'npm'
          # The action defaults to search for the dependency file (package-lock.json,
          # npm-shrinkwrap.json or yarn.lock) in the repository root, and uses its
          # hash as a part of the cache key.
          # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-data
          cache-dependency-path: '**/package-lock.json'


      - run: npm ci
      - run: hugo --gc --minify --enableGitInfo


      - name: Publish to Cloudflare Pages
        uses: cloudflare/pages-action@v1.3.0
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ vars.ACCOUNT_ID }}
          projectName: ${{ vars.PROJECT_NAME }}
          directory: ${{ vars.ASSET_DIRECTORY }}
          # Optional: Enable this if you want to have GitHub Deployments triggered
          # gitHubToken: ${{ secrets.GITHUB_TOKEN }}

これで、mainブランチにpushするとプロダクション環境に、ブランチにpushするとプレビュー環境にデプロイされます。:tada:

deploy-preview

参考

自分のみプレビュー環境へアクセスができるようにする

デフォルトの設定では、プレビュー環境はURLさえ知っていれば誰でもアクセスができます。

You can use Cloudflare Access to manage access to your deployment previews. By default, these deployment URLs are public. Enabling the access policy will restrict viewing project deployments to your Cloudflare account.

By default, preview deployments are enabled and available publicly

Customizing preview deployments access - Cloudflare Docs

設定自体は簡単で、以下の画像赤枠部分に有効にするボタンがあるので、そこをクリックするだけです。 access-policy

実際にプレビュー環境にアクセスしにいくと、以下の画像のようにメールアドレスとコードの入力を求められます。 cloudflare-access-email-input cloudflare-access-code-input

まとめ

プレビュー環境へのアクセスを自分のみに設定し、Cloudflare Pagesにダイレクトアップロード用で作成したプロジェクトに対してGitHub Actionsで自動デプロイすることができました。

前の投稿とのまとめになりますが、検証した結果をまとめると以下になります。

Cloudflare Pagesのプロジェクトの作成方法GitHub Actionsを設定ビルドする場所
Gitに接続xCloudflare Pages
ダイレクトアップデート○GitHub Actions

こちらの記事ではwranglerでプロジェクトを作成してからGitHub Actionsでデプロイを実現しています。

Cloudflare PagesにGitに接続でプロジェクトを作成すると、自動デプロイの仕組みまで簡単に設定できるので工数は少ないメリットがあります。
しかし、GitHub Actionsは他にもワークフロー内に処理を入れられるので、柔軟さではダイレクトアップデート、wranglerでプロジェクトを作成する方に軍配が上がります。

記事はこれで以上です。みなさんがCloudflare Pagesにサイトをデプロイするときの参考になれば幸いです。

参考まとめ

Tags: