Astro ✕ Cloudflare サーバレンダリングの環境変数
情報の掲載日：2025年 4月 4日
AstroとCloudflareでサーバーレンダリングをする際、WorkersやPagesの環境変数の扱いが少し特殊で、つまずいてしまいました。解決策を備忘録として残しておきます。
Astro でCloudflareの環境変数を読み込む。
Astro は標準でimport.meta.envをサポートしています。しかし、このままではCloudflareの環境変数.varsは読み込めません。
公式のアダプターにCloudflare runtimeというものが用意されているので、こちらを使って環境変数を読み込みます。
バージョン情報
Astro: v5.5.6
@astrojs/cloudflare: v12.4.0
microcms-js-sdk: v3.2.0
wrangler: v4.7.0
ソースコード
microCMSから記事情報をサーバサイドで取得する場合を例にします。
参考：AstroとmicroCMSで作るブログサイト
import type { MicroCMSQueries, MicroCMSListContent } from "microcms-js-sdk";
import { createClient } from "microcms-js-sdk";
// 型定義
export type Article = MicroCMSListContent & {
// microCMS ユーザー定義のAPIスキーマを参照
title: string;
detail: string;
images: { url: string; height: number; width: number }[];
};
// 指定されたコンテンツIDからメディア掲載記事の詳細データを取得する（サーバサイド用）
export const getArticleDetail = async (
context: {
env: {
MICROCMS_SERVICE_DOMAIN: string;
MICROCMS_API_KEY: string;
};
},
contentId: string,
queries?: MicroCMSQueries,
) => {
const serviceDomain = context.env.MICROCMS_SERVICE_DOMAIN as string;
const apiKey = context.env.MICROCMS_API_KEY as string;
const dynamicClient = createClient({
serviceDomain,
apiKey,
});
return await dynamicClient.getListDetail<Article>({
endpoint: "Your_endpoint",
contentId,
queries,
});
};
---
+ export const prerender = false; // SSRモード
import { getArticleDetail, type Article } from "./microcms.ts"
const { articleId } = Astro.params; // URL から記事 ID を取得
const article: Article = await getArticleDetail(
+ Astro.locals.runtime, //wrangler types を実行するまで未定義エラー
articleId as string,
);
---
省略
type Runtime = import("@astrojs/cloudflare").Runtime<Env>;
declare namespace App {
interface Locals extends Runtime {} // Astro.localsにRuntime<Env>型を拡張
}
name = "example"
main = "./dist/_worker.js"
compatibility_date = "2025-XX-XX" //今日の日付
下記を実行すると、worker-configuration.d.tsが自動で生成され、Astro.locals.runtimeの型未定義のエラーが解消します。
npx wrangler types
Pages/Workerの型情報は、build毎に自動で発行されるよう、スクリプトに追記しておきます。
...
"scripts": {
"dev": "wrangler types && astro dev",
"build": "wrangler types && astro build",
"preview": "wrangler pages dev ./dist",
"astro": "astro",
},
...
環境変数のセット方法
ローカル環境でテストする場合
MICROCMS_API_KEY = "Your_api_key"
MICROCMS_SERVICE_DOMAIN = "Your_service_domain"
CLoudflareで実行する場合
Wrangler CLIを使って、環境変数を設定します。
Cloudflareのページから環境変数の設定も可能ですが、なぜか私の環境では読み込みしてくれませんでした。
> npx wrangler secret put MICROCMS_SERVICE_DOMAIN
⛅️ wrangler 4.7.0
------------------
✔ Enter a secret value:***
> npx wrangler secret put MICROCMS_API_KEY
⛅️ wrangler 4.7.0
------------------
✔ Enter a secret value:***
おわりに
ここまで紹介した方法は、SSR時のみ有効なので、ローカルでbuildを実行する場合は、Astro標準のimport.meta.envと.envを利用してください。
buildをCloudflareで実行する方は、astro.config.mjsにvite defineを設定すると、import.meta.envでCloudflareの環境情報が読み込みが出来ます。
export default defineConfig{
...
adapter: cloudflare(),
vite: {
define: {
'process.env.MY_SECRET_ENV': JSON.stringify(process.env.MY_SECRET_ENV),
},
},
...
}
Discussion