.envファイルを取得しないreactアプリを作成しますか？

create reactappを使用してアプリをブートストラップしています。

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

を使用すると、変数名にアクセスできるように、変数名のcreate-react-app前にプレフィックスを付ける必要がありREACT_APP_ます。

例：

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

詳細はこちら

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

これと同じ問題がありました！解決策は、ノードサーバーへの接続を閉じることでした（これはCTRL + Cで実行できます）。次に、「npm runstart」を使用してサーバーを再起動すると、.envが正しく機能するはずです。

出典：Github

のような複数の環境を使用したい場合 .env.development .env.production

dotenv-cliパッケージを使用する

プロジェクトのルートフォルダに追加.env.developmentし .env.productionて

そしてあなたのpackage.json

"scripts": {
    "start": "react-app-rewired start",
    "build-dev": "dotenv -e .env.development react-app-rewired build",
    "build-prod": "dotenv -e .env.production react-app-rewired build",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"   
},

次に、次のような環境に従って構築します

npm run-script build-dev 

env-cmdについて。gitHubに関するVMoisの親切な投稿に従って、env-cmdが更新され（執筆時点ではバージョン9.0.1）、環境変数はReactプロジェクトで次のように機能します。

"scripts": {
    "build:local": "env-cmd -f ./.env.production.local npm run build",
    "build:production": "env-cmd -f ./.env.production npm run build"
  }

あなたにpackage.jsonのファイル。

この目的のために、env-cmdモジュールがあります。npmを介してインストールし、セクションのファイルにインストールnpm i env-cmdします。package.jsonscripts

  "scripts": {
    "start": "env-cmd .env.development react-scripts start",
    "build": "GENERATE_SOURCEMAP=false env-cmd .env.production react-scripts build",
  }

プロジェクトルートで、環境変数が同じで値が異なる2つのファイルを作成する必要があります。

.env.development
.env.production

次に、それらを公開から除外します。これを.gitignoreファイルに追加するには、次の2行を追加します。

.env.development
.env.production

したがって、これはdevとprodに異なる環境変数を使用する適切な方法です。

同じ問題が発生していましたが、.envファイルがJSではなくYAML形式であったことが原因でした。

そうだった

REACT_APP_API_PATH: 'https://my.api.path'

しかし、それはする必要がありました

REACT_APP_API_PATH = 'https://my.api.path'

場合は.env、ファイルが動作しますが、.env.developmentまたは.env.production、空作成していない.envものを2と一緒にファイルを。理由はわかりませんが、これでうまくいきます。

また、envファイルのAPIキーの後にセミコロンを付けないように注意してください。

REACT_APP_API_KEY = 'ae87cec695cc4heheh639d06c9274a';

する必要があります

REACT_APP_API_KEY = 'ae87cec695cc44heheh1639d06c9274a'

それは私の間違いでした

最新のreact-scripts（3.2.0）の時点では、言うのは簡単です

PORT=4000
BROWSER=none

ルートフォルダにあるはずの.envまたは.env.developmentファイル（..etc）にあります。

REACT_APPプレフィックスでは機能せず（ドキュメントは古くなっていると思います）、追加のnpmパッケージは必要ありません（react-scriptsにはすでにdotenv 6.2.0が含まれています）