Cloudflare Pages に PNPM + Astro なウェブサイトをデプロイしたい

Cloudflare Pages の Web UI から、 PNPM + Astro なウェブサイトをデプロイするぞ！
ということで、やり方のメモ。

やり方は、リポジトリを接続した後、以下のように設定すれば良い。

ビルドコマンド：

# pnpm のインストールと、依存のインストール＆ビルド
npm install -g pnpm@8.4.0 && pnpm install && pnpm run build

出力ディレクトリ：

/dist

ただ、これだけだと動かなくて、以下のようにする必要がある。

$ node -v > .node-version

原因は PNPM v8.4.0 が Node.js 16 以上しかサポートしていないからなのだけど、デフォルトでは Node.js 12 が使われてしまう。
ドキュメントには、 NODE_VERSION 環境変数にバージョンを入れてね！とあるけど、無視され続けたので、 .node-version を設定する必要がある。
ただまぁ、プロジェクト的には .node-version があるのが正しい姿ではあるので、今回はそちらの方針をとった。

あと、環境変数を使用して、かつ Cloudflare 側から注入する場合、 Vite の設定を変更する必要がある。
これは、たしかデフォルトで Vite がセキュリティ上の問題で、システム側の環境設定をサーバーサイドについても露出させないものが原因だった記憶。
そのため、以下のように設定を変更する必要がある。

import { defineConfig } from "astro/config";
import { loadEnv } from "vite";

const ENVIRONMENT_VARIABLES = [
  // システム側の環境変数の名前
  "DB_PASSWORD",

  // Public Prefix をつければクライアントバンドルにも含まれる
  "PUBLIC_GOOGLE_ANALYTICS_ID",
];

const dotenv = loadEnv(import.meta.env.MODE, process.cwd(), "");

const env = ENVIRONMENT_VARIABLES.reduce((acc, key) => {
  acc[`process.env.${key}`] = JSON.stringify(dotenv[key] ?? process.env[key]);

  return acc;
}, {});

export default defineConfig({
  vite: {
    define: env,
  },
});

まぁ process.env 使えるなら使っちゃえばいい気もするけど、そうすると間違えてクライアント側に露出させちゃったとき、 Vite の保護機構が効かないような気もするので仕方なし。
ということで、メモでした。