APIのベースURLを環境で切り替えられるようにする

[tomoya]

ローカルAPIに繋いで動作確認とかするために、環境を使ってAPIのベースURLを切り替えられるようにする

参考資料

• Remix
  • Environment Variables
• Cloundflare
  • Interact with your secrets locally
  • Environment variables

[tomoya]

サーバー側の処理でしか環境変数を取れないことは知っていたけど、 cloundflare の場合は更に process.env じゃなくて context 経由しか取得できないという制約が入るのか。

If you're using the @remix-run/cloudflare-pages or @remix-run/cloudflare adapters, env variables work a little differently. You'll need to define your local environment variables in the .dev.vars file. It has the same syntax as .env example file mentioned above.

Then, they'll be available via Remix's context.cloudflare.env in your loader/action functions:

export const loader = async ({
  context,
}: LoaderFunctionArgs) => {
  console.log(context.cloudflare.env.SOME_SECRET);
};

Note that .env and .dev.vars files are only for development. You should not use them in production, so Remix doesn't load them when running remix serve. You'll need to follow your host's guides on adding secrets to your production server, via the links below.
https://remix.run/docs/en/main/guides/envvars#local-development

つまり、

export const yasunoriApiClient = hc<ApiRoute>("https://api.yasunori.dev");

のような関数はサーバー処理専用として定義しても、純粋な環境変数は使えないことになる（context から取得したものを渡す必要がある）。