☰

reactアプリを作成しても.envファイルが取得されない？質問する

tag-icon • tag-icon reactjs create-react-app
reactアプリを作成しても.envファイルが取得されない？質問する

使っています反応アプリを作成するアプリをブートストラップします。

ルートに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

ベストアンサー1

REACT_APP_create react app では、変数名にプレフィックスを付ける必要があります。例:

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

** .env ファイルが src フォルダー内ではなく、ルート ディレクトリにあることを確認してください。

CRAドキュメントカスタム環境変数の追加:

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

おすすめ記事