本記事では、Astro + Cloudflare Pages + Newtで、下書き状態のコンテンツも含めて表示されるステージング環境を構築する方法を解説します。
なお、Astroプロジェクトの立ち上げ方やNewtのコンテンツの取得方法などの解説は割愛させていただきます。
知りたい方は↓をご覧ください。
https://www.newt.so/docs/tutorials/get-contents-in-astro
.envファイルに本番用・プレビュー用の環境変数を設定する
まず、Newtのスペース設定の中の「APIキー」のページに飛び、Newt CDN API Token（本番用）と、Newt API Token（ステージング用）のキーを取得します。
続いて、Astroプロジェクトの.envファイルに、以下のように環境変数を定義します。
NEWT_SPACE_UID=<NewtのスペースUID>
NEWT_PRODUCTION_API_TOKEN=<Newt CDN API Tokenのキー>
NEWT_PREVIEW_API_TOKEN=<Newt API Tokenのキー>
src/lib/newt.tsに本番判定のフラグを設定
次にsrc/lib/newt.tsに、↓のような記述を追加します。
import { createClient } from 'newt-client-js';
//本番環境かどうかを判定
const isProduction = import.meta.env.MODE === 'production';
export const newtClient = createClient({
spaceUid: import.meta.env.NEWT_SPACE_UID,
token: isProduction
? import.meta.env.NEWT_PRODUCTION_API_TOKEN
: import.meta.env.NEWT_PREVIEW_API_TOKEN,
apiType: isProduction ? 'cdn' : 'api'
});
Astroのデフォルトの環境変数に「MODE」というものがあり、astro devを実行している場合はdevelopmentで、astro buildを実行している場合はproductionになります。
上のコードでは、、MODEがproductionならNEWT_PRODUCTION_API_TOKENを、それ以外ならNEWT_PREVIEW_API_TOKENをtokenとして使うようにしています。
この状態で、
npm run devを実行してみましょう。
developmentモードの画面なので、Newtで下書き状態になっているコンテンツも取得されています。
次に
npm run build
を実行し、
npm run preview
で、ビルド後の画面を立ち上げてみましょう。
productionモードのため、下書き状態のコンテンツは表示されていません。
ローカルで本番判定のフラグがうまく動作していることを確認できたら、次のステップに移ります。
Cloudflareのアプリケーションを作成
❶Cloudflareのダッシュボードにログインし、サイドメニューのWorker＆Pagesをクリック
❷「Pages」のタブを選択し、「Gitに接続」をクリックします。
githubリポジトリを選択し、「セットアップの開始」をクリックします
gitjub連携がお済みでない方は、「GitHubに接続」ボタンからご設定ください。
❶フレームワークプリセットは「Astro」を選択
❷ローカルと同じように環境変数を設定
❸「保存してデプロイする」でデプロイを開始
デプロイが完了したら、次のステップに進みます。
cloudflareで本番・ステージング判定用の環境変数を設定
❶「設定」タブを選択
❷「変数とシークレット」フィールドで環境変数を追加します
Astroのデフォルトに合わせて、変数名を「MODE」、値を「production」として設定します。
続いて、ステージング側にも環境変数を設定します。
❶「環境を選択」で「プレビュー」を選び、
❷本番環境の時と同様に「変数とシークレット」フィールドで環境変数を追加します
変数名を「MODE」、値は今回はなんでもいいですが、一応「staging」として設定します。
これで環境変数の設定は完了です。
githubのstagingブランチとプレビュー環境を結びつける
次に、githubでステージング環境用のブランチを作成します。
本記事では「staging」という名前のブランチを使用します。
stagingブランチを作成したら、Cloudflareに戻り、「ブランチ コントロール」を編集します。
「プレビュー ブランチ」エリアのラジオボタンを「カスタム ブランチ」に設定し、「プレビュー環境のブランチを含める」の入力フィールドに、先ほど作成したステージング用ブランチの名前を入力します。
これで、mainブランチの更新時には本番環境で、stagingブランチの更新時にはステージング環境でデプロイが走るようになります。
本番とステージングのWebhookを作成
まず、Cloudflare側でWebhookの設定を行います。
「デプロイ フック」を作成し、作成後に表示されるURLを控えておきます。
もうひとつ、ステージング環境用のデプロイフックも作成し、同じくURLを控えておきます。
次に、Newt側の設定に移ります。
「スペース設定」＞「Webhook」を開き、「Webhookを作成」ボタンをクリックして、「Webhookテンプレート」を選択します。
「Cloudflare Pages」を選び、「Deploy Hook URL」の欄に、控えておいた本番環境のデプロイフックURLを入力します。
Webhookが作成されたら、「編集」をクリックし、本番用とわかりやすい名前に変更します。
同じ手順で、ステージング用のデプロイフックURLを設定したWebhookも作成してください。
ステージングの方では、通知対象イベントに「保存」と「削除 - 下書きコンテンツ」を追加します。
これにより、Newtで下書きコンテンツの作成・削除を行った際に、ステージング環境のみでデプロイが走るようになりました。
Webhookを実行してデプロイ
上記すべての設定が完了したら、それぞれのWebhookで「今すぐ実行」をクリックしてください。
ステージングのみで下書きコンテンツが表示されていれば成功です。
なおステージング環境には、middlewareによるベーシック認証やZero Trustのログイン認証などをかけることをお勧めします。