RemixをCloudflareでホスティングしたい。
Firebaseの設定値や、Cookieのシークレットキーなど諸々の環境変数を定義しておきたい。
環境変数には 「見えてもいい変数」 と 「見えてはいけない変数」 の二通りがある。「見えてもいい関数」はgitに上げても問題ない。「見えてはいけない変数」はホスティングサービスのダッシュボードから環境別に登録しなきゃならなかったり管理がとにかく大変。なるべく必要なものだけを登録するようにしたい。
見えてもいい変数
wrangler.toml に書く。環境別に定義できるのでとても便利。
Firebaseの設定を書くとか。Firebaseの設定はJavaScript SDKを利用するときのマニュアルでは直にJavaScriptファイルに書くように書いてあった。なので特段シークレットなものではない。Adminを利用するときのキーなどはシークレットなものなのでそこは注意。
...
[vars]
ENV = "development"
FIREBASE_API_KEY = "xxxxx"
FIREBASE_APP_ID = "xxxxx"
FIREBASE_AUTH_DOMAIN = "xxxxx"
FIREBASE_MESSAGING_SENDER_ID = "xxxxx"
FIREBASE_PROJECT_ID = "xxxxx"
FIREBASE_STORAGE_BUCKET = "xxxxx"
[env.production.vars]
ENV = "production"
FIREBASE_API_KEY = "xxxxx"
FIREBASE_APP_ID = "xxxxx"
FIREBASE_AUTH_DOMAIN = "xxxxx"
FIREBASE_MESSAGING_SENDER_ID = "xxxxx"
FIREBASE_PROJECT_ID = "xxxxx"
FIREBASE_STORAGE_BUCKET = "xxxxx"
ほかにも記述方法が色々あるのでEnvironment variables · Cloudflare Workers docsをチェック。
見えてはいけない変数
.dev.vars に書く。 gitignoreに .dev.vars を含めておくのを忘れずに。
cloudflareの公式ドキュメントはここに書いてあった。
今回はCloudflareでホスティングするので、.envじゃなくて.dev.varsに書くのがポイント。環境によって異なると思うのでそこも注意。
ひとまずCookieのシークレットキーを書いておいた。値は適当だ。
SESSION_SECRET="aaaaaaaaaaaaaa"
Remixでの環境変数の扱い
Remixのドキュメントはこのあたりに書いてある。
remix.run/docs/en/main/guides/envvars#local-development
自分も含めて、フロントエンドエンジニアが最も認識がズレているのが環境変数の定義。フロントエンドエンジニアが考える環境変数とは、APIのパスをproduction時はA、dev時はBとしてビルドする、といったものだろう。これは**「ビルド引数」であって、環境変数でない**のだ。
環境変数は、サーバー上で実行時に最も有用。アプリの動作を変更するために環境変数を変更することで、再ビルドや再デプロイなしでアプリの動作を変更することが可能。
Remixでは従来のビルド引数という概念はないので、ビルド時に変数を与えるといったことができない。こういうのが無理。
http.get(`${API_URL}/hoge`)
すべての環境変数（サーバーの秘密情報やブラウザで使用するJavaScriptの情報を含む）をサーバーに保持する。
Remixで環境変数を取得する唯一の方法はコレだ。
import { LoaderFunctionArgs } from "@remix-run/cloudflare";
export async function loader({ context }: LoaderFunctionArgs) {
const env = context.cloudflare.env;
console.log("env", env);
return json({});
}
loaderから環境変数を取得するのだ。LoaderFunctionArgsは @remix-run/cloudflare から参照しているので、contextにcloudflareというパラメータ型もちゃんと存在している。最高。
consoleの確認。
localhostでは無事に確認できたので次にCloudflare Pages上で確認する。
Cloudflare Pagesのダッシュボードで環境変数を設定
.dev.vars はローカルにしか存在しない。リモート上で環境変数を設定しないとならない。これはダッシュボード上から設定する。
今回はpreview環境で設定。
ターミナルから以下のコマンドを実行するとログが見られる。これ結構重要。
wrangler pages deployment tail --environment=preview
ちゃんととれてた。
Remixの環境変数の扱いは、フロントエンドエンジニアが知っている環境変数の扱いとは異なるのでご注意を！
Discussion