Astro + Cloudflare Pages + Newtでステージング環境を構築する

本記事では、Astro + Cloudflare Pages + Newtで、**下書き状態のコンテンツも含めて表示されるステージング環境**を構築する方法を解説します。
なお、Astroプロジェクトの立ち上げ方やNewtのコンテンツの取得方法などの解説は割愛させていただきます。
知りたい方は↓をご覧ください。
https://www.newt.so/docs/tutorials/get-contents-in-astro

## .envファイルに本番用・プレビュー用の環境変数を設定する

![CleanShot 2025-03-14 at 16.05.13@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571075/82f08e6b-2c9c-4f6d-a08b-8b3b3b9ed5a3.png)
まず、Newtのスペース設定の中の「APIキー」のページに飛び、`Newt CDN API Token`（本番用）と、`Newt API Token`（ステージング用）のキーを取得します。

続いて、Astroプロジェクトの.envファイルに、以下のように環境変数を定義します。

```.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に、↓のような記述を追加します。

```typescript: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として使うようにしています。

https://docs.astro.build/ja/guides/environment-variables/


この状態で、
`npm run dev`を実行してみましょう。

![CleanShot 2025-03-14 at 15.47.25@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571075/7bf8b4a3-b223-4af8-b891-7554c1caa114.png)
**`development`モードの画面なので、Newtで下書き状態になっているコンテンツも取得されています。**

次に
`npm run build`
を実行し、
`npm run preview`
で、ビルド後の画面を立ち上げてみましょう。

![CleanShot 2025-03-14 at 15.50.18@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571075/408e15c2-188b-475d-8c75-36ddd2606b0f.png)
**`production`モードのため、下書き状態のコンテンツは表示されていません。**
ローカルで本番判定のフラグがうまく動作していることを確認できたら、次のステップに移ります。

## Cloudflareのアプリケーションを作成

![CleanShot 2025-03-13 at 16.28.26@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571075/d1c6ed22-7544-48a8-b90a-a0dd1a9f082e.png)
❶[Cloudflare](https://www.cloudflare.com/ja-jp/)のダッシュボードにログインし、サイドメニューのWorker＆Pagesをクリック
❷「Pages」のタブを選択し、「Gitに接続」をクリックします。

![CleanShot 2025-03-13 at 16.35.29 2@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571075/103dc9f2-37e4-487d-87a1-20cfa899fd4d.png)
githubリポジトリを選択し、「セットアップの開始」をクリックします
gitjub連携がお済みでない方は、「GitHubに接続」ボタンからご設定ください。

![CleanShot 2025-03-13 at 16.55.23@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571075/2158978b-ba8b-4462-8b74-63225d8a4f44.png)
❶フレームワークプリセットは「Astro」を選択
❷ローカルと同じように環境変数を設定
❸「保存してデプロイする」でデプロイを開始


デプロイが完了したら、次のステップに進みます。

## cloudflareで本番・ステージング判定用の環境変数を設定
![CleanShot 2025-03-13 at 18.13.43@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571075/53b6a846-ffe0-4ddd-bd9b-72f73c502253.png)
❶「設定」タブを選択
❷「変数とシークレット」フィールドで環境変数を追加します

![CleanShot 2025-03-13 at 18.18.41 2@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571075/db820aed-e28e-4ce3-9b74-6c59fe109f34.png)
Astroのデフォルトに合わせて、変数名を「MODE」、値を「production」として設定します。
続いて、ステージング側にも環境変数を設定します。

![CleanShot 2025-03-13 at 18.26.03 2@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571075/13a02134-2181-4e70-9fcd-a04cdd3e3e1c.png)
❶「環境を選択」で「プレビュー」を選び、
❷本番環境の時と同様に「変数とシークレット」フィールドで環境変数を追加します

![CleanShot 2025-03-13 at 18.29.07@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571075/2c0a2ef9-b68a-4fe2-9c4d-a9718211728f.png)
変数名を「MODE」、値は今回はなんでもいいですが、一応「staging」として設定します。
これで環境変数の設定は完了です。

## githubのstagingブランチとプレビュー環境を結びつける
![CleanShot 2025-03-13 at 18.42.18@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571075/5d30f511-16c5-40c5-80bd-7cbb6b56f7c3.png)
次に、githubでステージング環境用のブランチを作成します。
本記事では「staging」という名前のブランチを使用します。

![CleanShot 2025-03-13 at 18.38.07 2@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571075/7167658c-938f-424f-8dd4-47650f5ea515.png)
stagingブランチを作成したら、Cloudflareに戻り、「ブランチ コントロール」を編集します。


![CleanShot 2025-03-13 at 18.49.27@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571075/3762bb5b-522b-4ba2-b63e-e26bd9cf1dcb.png)
「プレビュー ブランチ」エリアのラジオボタンを「カスタム ブランチ」に設定し、「プレビュー環境のブランチを含める」の入力フィールドに、先ほど作成したステージング用ブランチの名前を入力します。

これで、**mainブランチの更新時には本番環境で、stagingブランチの更新時にはステージング環境でデプロイが走る**ようになります。


## 本番とステージングのWebhookを作成
まず、Cloudflare側でWebhookの設定を行います。
![CleanShot 2025-03-14 at 13.52.14@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571075/23062965-0ea6-48b8-af59-a1f47b1ddb06.png)
「デプロイ フック」を作成し、作成後に表示されるURLを控えておきます。

![CleanShot 2025-03-14 at 13.56.15@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571075/e2dcec17-f96b-4456-96f8-89aaf9c153aa.png)
もうひとつ、ステージング環境用のデプロイフックも作成し、同じくURLを控えておきます。


次に、Newt側の設定に移ります。


![CleanShot 2025-03-14 at 14.03.38@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571075/929430e7-9ff0-4db9-b494-630bf78d41a4.png)
「スペース設定」＞「Webhook」を開き、「Webhookを作成」ボタンをクリックして、「Webhookテンプレート」を選択します。

![CleanShot 2025-03-14 at 14.07.39@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571075/9c5a9c32-941f-4637-9d9c-9d49e6b6998f.png)
「Cloudflare Pages」を選び、「Deploy Hook URL」の欄に、控えておいた本番環境のデプロイフックURLを入力します。

![CleanShot 2025-03-14 at 14.12.37 2@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571075/5ca34a46-c24b-41e0-a1ab-915b6092ccfc.png)
![CleanShot 2025-03-14 at 14.14.47@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571075/c03cc600-99cd-405b-9b8d-0e443daf1353.png)
Webhookが作成されたら、「編集」をクリックし、本番用とわかりやすい名前に変更します。

同じ手順で、ステージング用のデプロイフックURLを設定したWebhookも作成してください。
![CleanShot 2025-03-14 at 14.19.25 2@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571075/754ffc8b-0431-44b0-8b17-223fbb014043.png)
ステージングの方では、通知対象イベントに「保存」と「削除 - 下書きコンテンツ」を追加します。
これにより、**Newtで下書きコンテンツの作成・削除を行った際に、ステージング環境のみでデプロイが走る**ようになりました。

## Webhookを実行してデプロイ
![CleanShot 2025-03-14 at 14.25.31@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571075/00097010-90f8-4987-86c0-dfbb312c0802.png)
上記すべての設定が完了したら、それぞれのWebhookで「今すぐ実行」をクリックしてください。


![CleanShot 2025-03-14 at 16.15.18@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571075/994cae90-64bb-4a81-bddc-9f3b613658af.png)
![CleanShot 2025-03-14 at 16.17.37@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571075/f85ff3bd-e300-4237-89f5-4893143ff74c.png)
ステージングのみで下書きコンテンツが表示されていれば成功です。
なおステージング環境には、middlewareによるベーシック認証やZero Trustのログイン認証などをかけることをお勧めします。