この記事では、CloudflareにRemixアプリをデプロイする際に環境変数をどのように取り扱うかを自分なりにまとめて紹介します。

Cloudflare向けに作る場合、サーバー側とブラウザ側で環境変数を個別に管理できる

Remix（Vite）でアプリを開発している場合、環境変数を2種類のファイルから読み込みできます。1つ目はViteなどを使ったアプリケーション開発でお馴染みの.envファイルです。これを使うと、開発時やビルド時にRemixにimport.meta.env.XXXのような形で変数を取り込むことができます。そしてもう1つはCloudflare向けアプリをローカル開発する際に利用する.dev.varsファイルです。ここで設定した値は、Wranglerを使ったローカルサーバーを立ち上げた際に、リクエストのコンテキスト情報としてデータが取得できます。

import { LoaderFunctionArgs } from "@remix-run/cloudflare";
import { useLoaderData } from "@remix-run/react";

export async function loader(props: LoaderFunctionArgs) {
    const {
        STRIPE_SECRET_KEY,
    } = props.context.cloudflare.env

    ...
}

export default function DemoApp() {
  ...
  return (
    <div className=`${import.meta.env.APP_MODE}`>...</div>
  )
}

.dev.vars側を使って全ての環境変数を管理しても良いのですが、両ファイルの特性を考えると次のような使い分けができそうです。

• .envに公開可能な環境変数を設定する（例: Stripeなどの公開可能APIキーやAlgoliaのインデックス名など）
• .dev.varsへはサーバー側でのみ使いたい、秘匿すべき環境変数を設定する（例: AWSのシークレットやStripeのシークレットAPIキーなど）

ファイルを分けて管理することで、公開してはいけない値を誤ってRemixのloaderなどで露出させてしまうリスクをへらせます。

環境ごとに別の値を設定したい場合

公開可能なデータについては、.envファイルで管理しています。そのため、.env.developmentや.env.productionのようにファイルを分けて管理したり、CIワークフローにて設定することができます。これらの値はRemixのビルド処理が実行されたタイミングでアプリケーションに取り込まれます。そのため、テスト環境と本番環境で利用するAPIキーが異なる場合は、ビルド時に取り込みたい方の値が設定できているかどうかを調べるようにしましょう。

.dev.varsで設定している値は、Cloudflare Pagesの環境変数として設定しておきましょう。wrangler secret put XXXコマンドを使うことで、値を簡単に取り込みさせることができます。

おわりに

あまり記事として紹介されているところを見ない方法でしたので、もしかするとベストプラクティスではないのかもしれません。（まだRemixに自信がない）ただ、体感として「ソースコードに含まれる。ユーザーに見られる可能性のあるものかどうか」が、一発でわかるのが良いので、明確な問題が見つかるまではこの方法でアプリケーション開発を進めたいと思っています。