[解決済み] [Solved] create react app not pick up .env files?

質問

を使用しています。 リアクトアプリの作成 を使用して、私のアプリをブートストラップします。

を2つ追加しました。 .env ファイル .env.development と .env.production を根底に置く。

私の .env.development が含まれています。

API_URL=http://localhost:3000/api
CALLBACK_URL=http://localhost:3005/callback

を使ってアプリを実行すると react-scripts start とコンソールアウト process.env 吐き出す

{ NODE_ENV: "development", PUBLIC_URL: "" }

いろいろと試してみたのですが、開発ファイルにある検証可能なものを拾ってくれません。

ディレクトリー構造は

/.env.development
/src/index.js

Package.jsonスクリプトは。

"start": "export PORT=3005; npm-run-all --parallel server:start client:start",
    "client:start": "export PORT=3005; react-scripts start",
    "server:start": "node server.js",
    "build": "react-scripts build",

編集する

jamcreenciaが私の変数を正しく指摘してくれました。 はプレフィックスが必要です。 と REACT_APP .

編集2

ファイル名を .env を使用した場合はそうなりません。 .env.development または .end.production

解決方法は？

リアクトアプリを作成する際、プリフィックスとして REACT_APP_ を変数名として使用します。

REACT_APP_API_URL=http://localhost:3000/api
REACT_APP_CALLBACK_URL=http://localhost:3005/callback

CRA Docs on カスタム環境変数の追加 :

備考 : で始まるカスタム環境変数を作成する必要があります。 REACT_APP_ . を除くその他の変数は NODE_ENV は無視されます。これは、同じ名前を持つ可能性のある秘密鍵が誤ってマシンに公開されるのを避けるためです。