Astroでビルドした静的WebサイトをGitHub経由でCloudflare Pagesに自動デプロイする方法

2022年ごろから話題になっているJSフレームワークのAstroを触ってみました。

並行してCloudflareについても勉強中なので、ビルドしたサイトをPagesへデプロイする方法を試してみた覚書です。

Cloudflare PagesとGitHubのリポジトリを連携させる

Cloudflare Pagesのプロジェクトを作成する際に、[Connect to Git]を選択します。

接続するGitリポジトリを選びましょう。2023/04時点では、GitHubとGitLabが選べます。

初めての場合、GitHubへの連携を許可する画面が開きます。Organizationにつなぐ場合などでは、リポジトリを指定する[Only select repositories]の方が良いかもしれません。

接続の設定が終われば、あとはリポジトリを選択します。

Astroで構築したアプリのデプロイ設定を行おう

ブランチとビルドの設定を行いましょう。

ある程度ユーザーのいる？知名度のある？フレームワークはプリセットがある様子です。

環境変数は、Environment variables(Advanced)から設定しましょう。

NODE_VERSIONの設定を行おう（2023/04時点）

NODE_VERSIONで16など新しいバージョンを設定する必要があります。デフォルトではNodeのバージョンが12系らしく（2023/04時点）、Astroのビルドがコケるためです。

error @astrojs/markdoc@0.0.1: The engine "node" is incompatible with this module. Expected version ">=16.12.0". Got "12.18.0"

この辺りは、Cloudflare側でアップデートされ次第対応が不要になるとは思います。

ビルド・デプロイログを見守る

設定が終われば、ビルドとデプロイが始まります。

エラーが発生した場合は、ログを確認しましょう。

ビルドごとの詳細ページでも、Build logから確認できます。

デプロイしたサイトにアクセスする

デプロイが完了すれば、Pagesのプロジェクトトップページにドメインなどが表示されます。

CRONなどで定期的にビルドしたい場合

SSGモードで運用する場合、毎日特定時間にビルドするなどの運用をしたくなります。

その場合、自分が調べた範囲では、GitHub Actions側からWranglerでデプロイした方が良さそうかなと思いました。

方法は「Cloudflare Pagesへのデプロイを、GitHub Actionsから行う方法」で紹介していますので、こちらも参考にしてください。