【Astro】Cloudflare PagesでSSRを利用してデプロイできない場合の対処法

Astroで作成しているブログのデプロイ先としてCloudflare Pagesを利用しています。これまでは、SSGでビルドしていたのですが、microCMSで記事を作成するようになりプレビュー機能をつけるためハイブリッドレンダリング(SSRとSSG)を利用することにしました。

以下のサイトを参考にすすめていたのですが、ローカルではビルド実行できるのに、Cloudflare Pages側ではビルドがコケました。

microCMS + Astro｜ハイブリッドレンダリングを用いた画面プレビュー実装方法

原因#

microCMSの記事を取得するために必要なAPIキーやドメイン情報が取得できていませんでした。

実際には以下のようなエラーが発生します。

Error: parameter is required (check serviceDomain and apiKey)

Cloudflare Pagesの設定画面でしっかりとmicroCMS用の環境変数を設定しているにも関わらず、このエラーが発生するのです。

実際コンソールで環境変数を出力してみても、undefinedになります。

理由としては、単純でCloudflare PagesのSSRでは、process.envが存在せず、そこから環境変数を取得しようとしてできていないためです。

また、Astro側でもprocess.envで環境変数を利用できるような変換を行っていません。

Astroのissueにも上がっていました。

Secret env variables undefined during server build with Cloudflare SSR

対処法#

変換作業をコードで行う必要があります。

microCMSの場合は、以下２つの環境変数の呼び出しができるようにする必要があります。

const client = createClient({
  serviceDomain: import.meta.env.MICROCMS_SERVICE_DOMAIN,
  apiKey: import.meta.env.MICROCMS_API_KEY,
});

astro.config.jsに次のコードを追加することで対応が可能です。

export default defineConfig({
(...略...)
  vite: {
    define: {
            'process.env.MICROCMS_SERVICE_DOMAIN': JSON.stringify(process.env.MICROCMS_SERVICE_DOMAIN),
            'process.env.MICROCMS_API_KEY': JSON.stringify(process.env.MICROCMS_API_KEY)
        }
(...略...)
  }
})