GitHubリポジトリをCloudflare Pagesと連携して、初めて自分のサイトを公開した話

前回、VS CodeからGitHubへコミット・プッシュできるところまで書きました。今回はその続きで、GitHub上に上げたリポジトリをCloudflare Pagesと連携し、実際にサイトとして公開するところまでをまとめます。結論から言うと、途中で選択肢を一つ間違えたせいで、フレームワークをAstroに変更できない画面に迷い込んでしまいました。同じところで詰まる人がいるかもしれないので、その部分は特に詳しく書いておきます。

1. Cloudflareにログインし、Workers & Pagesを開く

まずCloudflareにログインし、左側のメニューから「Workers & Pages」をクリックします。続けて「Create application」をクリックしました。ここまでは特に迷うところはありません。

2. ここが一番間違えやすいポイントだった

「Create application」を押すと、「Make something new」という見出しの画面が出てきます。ここで、正直かなり見落としそうな位置に「Need to use the legacy Pages workflow? Continue to Pages」という小さなリンクがありました。最初は目に入らず、案内に沿って別の作り方で進めてしまったのですが、その方法で作成すると、あとで書くフレームワークをAstroに変更できない状態になってしまいました。結局、一度作り直すことになり、この「Continue to Pages」の方を選び直して進める必要がありました。

今回のAstroプロジェクトのように、フレームワークを変更したい場合は最初からこちらの「Continue to Pages」を選んで進めるのが確実だと分かりました。

3. GitHubリポジトリをインポートする

「Continue to Pages」を選ぶと、いくつか作成方法の選択肢が出てきます。その中から「Import an existing Git repository」の「Get started」をクリックしました。続けて、連携済みのGitHubアカウントの中から、公開したいリポジトリを選択し、「Begin setup」をクリックします。前回の記事でGitHubに上げておいたリポジトリが、ここでそのまま選べる状態になっていました。

4. Framework presetとデプロイ設定を入力する

「Begin setup」を押すと、ビルドの設定画面に進みます。まず「Framework preset」でAstroを選択しました。プリセットを選ぶと、いくつかの項目が自動で入力されますが、念のため実際に入力した値をそのまま載せておきます。

項目	入力する値
Framework preset	Astro
Build command	npm run build
Build output directory	dist

「Build output directory」に dist と指定しているのは、前々回の記事で書いた通り、Astroはビルドすると dist フォルダの中に公開用のファイルを生成する仕組みになっているためです。ここが自分のプロジェクトの出力先と一致していないと、正しくデプロイされないので注意が必要だと思います。

5. 保存してデプロイする

設定を入力し終えたら、「Save and Deploy」をクリックします。これで、GitHub上のリポジトリの内容をもとに、Cloudflare側でビルドとデプロイが自動的に始まりました。ビルドログが流れていくのを見ながら待っていると、しばらくして公開用のURLが発行され、実際にブラウザでアクセスすると自分の作ったサイトが表示されました。ゼロから作った環境が、初めて実際のURLとして外に出た瞬間だったので、地味な作業の連続でしたが、この画面が出たときは素直に安心しました。

一度この設定さえできてしまえば、以降はGitHub側にプッシュするたびに、Cloudflare Pagesが自動でビルド・デプロイをしてくれるようになります。前回書いた「Commit」と「Push」の違いが、ここでようやく実感として繋がりました。プッシュした内容がそのまま公開サイトに反映される、というのは、最初の設定さえ乗り越えてしまえば、あとは驚くほど楽になるという印象です。