【Cloudflare Pages&Astro SSR入門】5分でCloudflare Pages上でAstroのSSGとSSRが動作することを確認するよ
この記事は「株式会社メンバーズ Jamstack研究会主催 Advent Calendar
2023」の10日目の記事です。
はじめに
今回は、忙しい人のために、5分で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さまの記事を参考にしてみて下さい。
この記事が気に入ったらサポートをしてみませんか?