この記事は「株式会社メンバーズ Jamstack研究会主催 Advent Calendar
2023」の10日目の記事です。

はじめに

今回は、忙しい人のために、５分でAstroのSSG（静的サイト生成）とSSR（サーバーサイドレンダリング）の挙動をCloudflare Pages上で確認できる手順をご紹介したいと思います。

TL;DR

Cloudflare公式のCLIツールであるC3（create-cloudflare-cli）を利用すると3分でSSRが動作する環境が用意できちゃいます😳
Astroではページ毎に、SSRするかSSGするかを選択できます。本文で紹介しているSSRとSSGの動作確認のためのコード追加する作業は、2分もかからないので、タイトルに偽りなく、本当に5分ほどでSSRとSSGが動くことを実環境で確認できてしまいます。

Cloudflare Pagesとは

CDNサービスでおなじみのCloudflare社が提供するJamstackホスティングサービスです。 
Cloudflare Pagesは、静的サイトホスティングだけでなく、AstroやNext.jsなどのWebフレームワークのビルドを実行するためのCI/CD環境も提供しています。また、Pages Functionsという機能を使うと、サーバーサイドレンダリングも可能です。さらに、ブランチ毎にプレビューURLを発行してくれる機能もあります。これらの機能は無料プランでも利用できるため、魅力的なサービスと言えます（無料プランは商用利用もできます）。
なお、デプロイする対象（静的HTMLなどのアセット）は、Cloudflare Pagesに接続したGitリポジトリにあるソースコードをビルドして用意できるだけでなく、ドラッグアンドドロップでの直接アップロードや、Wrangler を利用したCLIによる直接アップロードにも対応しています。

C3（create-cloudflare-cli）とは

WebフレームワークとCloudflare Pageのセットアップを1つのコマンド実行で実現できてしまう便利なコマンドです。詳細についてはこちらを参照して下さい。
C3が対応しているWebフレームワークは以下の通りです。

• Angular

• Astro

• Docusaurus

• Gatsby

• Hono

• Next

• Nuxt

• Qwik

• React

• Remix

• Solid

• Svelte

• Vue

C3でAstroとCloudflare Pagesをセットアップしてデプロイする手順

それでは実際に、C3を利用してCloudflare Pagesをセットアップする手順をご紹介していきます。

事前準備・前提条件

手順では、Cloudflareのアカウント作成の説明は割愛しています。こちらの記事などを参考に事前にCloudflareのアカウントを作成しておいて下さい。
また、Node.jsやnpmコマンドを利用しますので、Volta等のNode.jsバージョン管理ツールを利用して、あらかじめインストールしておいて下さい。
本記事の確認はMacで行っていますので、Windowsの方はそのままでは動作しない可能性がある点をご了承下さい。

技術条件

本記事は以下の条件で動作を確認しています。
Astro: 3.6.4
Node.js: 18.16.0（npm: 9.5.1）
C3: 2.8.0
Wrangler: 3.18.0

手順1： C3でAstroとCloudflare Pagesをセットアップする

ターミナルを開き、以下のコマンドを入力します。

npm create cloudflare@latest my-astro-cloudflare -- --framework=astro

まず、Astroに関する設問があります。全てデフォルトでも、お好きな設定を選んでもらっても大丈夫です。
次に、Cloudflareに関する設問があります（こちらもすべてデフォルトで問題ありません）。
この後ブラウザが起動しますので、Cloudflareにログインして下さい。
ログイン認証を行った後、Cloudflareアカウントに対するWranglerのアクセス許可画面が表示されるのでAllowを押下してください。

処理が完了すると、ローカル環境にCloudflareのSSRアダプタが導入されたAstroがセットアップされ、CloudflareをCLIで操作するためのWranglerもインストールされます。
astro.config.mjsに以下のような設定が追加されていると思います。

export default defineConfig({
  output: "server",
  adapter: cloudflare()
});

これは、全てのページをSSRで動作させるという設定です。SSRの詳細は公式ドキュメントを参照してください。

手順2： SSR確認用のファイルと、SSG確認用のファイルを用意する

src/index.astro ファイルを開き、コードフェンス内に以下を追加します。

const now = new Date();

<main>の開始タグの直下には時刻を表示する以下の記述を追加します。

<p>現在<span class="text-gradient">{`${now.getHours()}時${now.getMinutes()}分${now.getSeconds()}秒`}</span>です</p>

これで、SSR確認用のファイルが完成したので、次にこれを複製してsrc/ssg.astro というファイルを作成し、2行目（コードフェンス内）に以下を追加します。

export const prerender = true;

これは、src/ssg.astro のページのみ、SSRではなくSSGで動作させるという設定です。
これでSSG確認用のファイルも完成です。

手順3： Cloudflare Pagesにデプロイする

最後に以下のコマンドを入力し、ビルドとCloudflare Pagesへのデプロイを行います。

npm run pages:deploy

デプロイが正常に完了すると、ターミナルに以下のように表示されます。

🌍  Uploading... (2/2)

✨ Success! Uploaded 1 files (1 already uploaded) (1.16 sec)

✨ Compiled Worker successfully
✨ Uploading Worker bundle
✨ Uploading _routes.json
✨ Deployment complete! Take a peek over at https://xxxxxx.my-astro-croudflare.pages.dev

ブラウザで、ターミナルの最後の行に表示されたURL（上の例では https://xxxxxx.my-astro-croudflare.pages.dev ）にアクセスしてみてください。
このページは、/src/pages/index.astro に対応するページなので、SSRで動作しています。ブラウザをリロードするたびに左上の時刻が変わることが確認できると思います。
なお、Cloudflare PagesのFunctionsで動作しているのでタイムゾーンはUTCになっているようです。

次に、 https://xxxxxx.my-astro-croudflare.pages.dev/ssg にアクセスしてみましょう。
このページは、/src/pages/ssg.astro に対応するページのため、SSGビルドされた静的HTMLが表示されます。表示される時刻はビルドした時刻になっていると思います。ブラウザをリロードしても左上の時刻が変わらないことが確認できると思います。

まとめ

Cloudflareが提供するC3を利用すると、短時間でCloudflare Pages上にSSGとSSRが動作する環境が作れることがおわかり頂けたと思います。
SSRはAstroの欠点である「CSRでAstroコンポーネントが使えないためCMSプレビューを作るのがつらい」という課題を解決してくれるよい手段です。今回の記事が少しでもお役に立てたら幸いです。

※本記事の執筆にあたり、特にSSRとSSGの動作を確認するコードなどは、Stripe社Hidetaka Okamotoさまの記事を参考にさせていただきました。すでにあるAstro環境をCloudflare Pagesのデプロイに対応させたい場合は、Okamotoさまの記事を参考にしてみて下さい。

#Jamstack #メンバーズ #Astro #CloudflarePages #SSR