Zenn
🙆

Cloudflare Workers on Remix の環境変数について

2022/12/15に公開
React
Cloudflare Workers
Remix
tech

Cloudflare Workers で遊んでいます。

今回は Cloduflare Workers で React ベースの Framework Remix を利用したときの環境変数について調べました。

環境

  • @remix-run/cloudflare
    • 1.8.2
  • @remix-run/cloudflare-workers
    • 1.8.2
  • miniflare
    • 2.11.0
  • wrangler
    • 2.2.1

公式の環境変数の渡し方について

Remix Environment Variables

では root ディレクトリに .env を読み込めばロードしてくれるよ。と記載されていましたが
Cloudflare Workers にデプロイをするとうまく読み込めませんでした。

これは wrangler で --env オプションを渡してもうまく動作しませんでした。

wrangler publish --help

wrangler publish [script]

🆙 Publish your Worker to Cloudflare.

Positionals:
  script  The path to an entry point for your worker  [string]

Flags:
  -c, --config   Path to .toml configuration file  [string]
  # dotenv オプションがあるが.....
  -e, --env      Environment to use for operations and .env files  [string]
  -h, --help     Show help  [boolean]
  -v, --version  Show version number  [boolean]

実際に --env オプションを付与して publish をするとエラーになる

wrangler publish --config=wrangler.development.toml --env=.env

 ⛅️ wrangler 2.6.2 
-------------------
▲ [WARNING] Processing wrangler.development.toml configuration:

    - The "account_id" field in your configuration is an empty string and will be ignored.
      Please remove the "account_id" field from your configuration.
    - No environment found in configuration with name ".env".
      Before using `--env=.env` there should be an equivalent environment section in the
  configuration.
  
      Consider adding an environment configuration section to the wrangler.toml file:
      ```
      [env..env]
      ```
  


Running custom build: npm run build

> build
> remix build

Building Remix app in production mode...
Built in 172ms
✘ [ERROR] ParseError: A request to the Cloudflare API (/accounts/bac84cf9c1d4859db9893d9bdfaf0969/workers/services/cycle-edge-dev-.env) failed.

      at throwFetchError
  (/Users/ryu/projects/ryurock/edge-cms/node_modules/wrangler/wrangler-dist/cli.js:143598:17)
      at fetchResult
  (/Users/ryu/projects/ryurock/edge-cms/node_modules/wrangler/wrangler-dist/cli.js:143567:5)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async publish
  (/Users/ryu/projects/ryurock/edge-cms/node_modules/wrangler/wrangler-dist/cli.js:161856:31)
      at async Object.publishHandler [as handler]
  (/Users/ryu/projects/ryurock/edge-cms/node_modules/wrangler/wrangler-dist/cli.js:162588:3) {
    text: 'A request to the Cloudflare API
  (/accounts/bac84cf9c1d4859db9893d9bdfaf0969/workers/services/cycle-edge-dev-.env) failed.',
    notes: [ { text: 'workers.api.error.invalid_script_name [code: 10016]' } ],
    location: undefined,
    kind: 'error',
    code: 10016
  }

env ファイルが渡せんとなるとどうしようかなぁ。。。。と思っていたのですが、Remix on Cloudflare Workers の dev サーバーの起動は miniflare に依存しています。
(miniflare は wrangler に統合されたのですが、Remix では現在利用しています)

ということは wrangler.toml の vars セクションから読み込みができるので
wrangler.toml を環境毎に作成すれば .dotenv でよくやる環境毎の変数のロードができます。

wrangler.development.toml
name = "{your worker name}"
main = "./build/index.js"
.
.
[vars]
STAGE = "development"
wrangler.prodcution.toml
name = "{your worker name}"
main = "./build/index.js"
.
.
[vars]
STAGE = "production"

開発サーバーの起動時は miniflare のオプションで --wrangler-config で指定

  "scripts": {
    "dev:miniflare": "miniflare ./build/index.js --watch --wrangler-config=wrangler.development.toml",
  },

デプロイ時は wrangler の --config で指定

wrangler publish --config=wrangler.development.toml

こんな感じです。

実際埋め込んだ変数は Global 変数として Assign されます。
(これは .env で読み込んだときと同じ挙動です)

app/root.tsx
export const loader = async ({ context }: LoaderArgs) => {
  console.log(STAGE)
  return {
    hoge: 'fuga'
  }
};

これで環境毎の可変変数の呼び出しができます

Discussion