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

2023-02-05

概要

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

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

目的

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

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

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

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

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

$ hugo --gc --minify --enableGitInfo

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

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

GitHub Actionsを設定する

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

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

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

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

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

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

カスタムトークンを選択します。

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

アカウント	Cloudflare Pages	編集

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

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

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

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

アカウントIDを調べる

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

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

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

プロジェクト名を調べる

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

GtiHub Actionsに変数を設定する

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

変数	値
ACCOUNT_ID	先ほど調べた値
PROJECT_NAME	test
ASSET_DIRECTORY	./public
HUGO_VERSION	0.110.0
NODE_VERSION	16

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

workflowファイルを作成する

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

• Cloudflare Pages GitHub Action - github marketplace
• peaceiris/actions-hugo - GitHub

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:

参考

• Create an API token - Cloudflare Docs
• Find zone and account IDs - Cloudflare Docs
• Generate an API Token - cloudflare/pages-action
• リポジトリに暗号化されたシークレットを作成する - GitHub Docs
• 変数 - GitHub Docs
• peaceiris/actions-hugo - GitHub

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

デフォルトの設定では、プレビュー環境は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

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

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

まとめ

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

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

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

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

Caution

Gitに接続 + GitHub Actionsの自動デプロイを設定すると、プレビュー環境が表示されなかったりと表示が不安定になったので避けた方が良いでしょう。

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

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

参考まとめ

• Cloudflare Pages GitHub Action - github marketplace
• cloudflare/pages-action - github
• Create an API token - Cloudflare Docs
• Find zone and account IDs - Cloudflare Docs
• Generate an API Token - cloudflare/pages-action
• リポジトリに暗号化されたシークレットを作成する - GitHub Docs
• 変数 - GitHub Docs
• Customizing preview deployments access - Cloudflare Docs

Tags:

• Cloudflare Pages
• GitHub Actions
• Hugo