web-dev-qa-db-ja.com

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

create react app to bootstrap my appを使用しています。

ルートに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は、変数を正しく指摘しました プレフィックスを付ける必要があります with REACT_APP。

Edit 2

ファイルに.envという名前を付けても問題ありませんが、.env.developmentまたは.end.productionを使用している場合は問題ありません

reactjscreate-react-app
41
shenku

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

例：

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

詳細はこちらをご覧ください

87
jamcreencia

.env.development.env.productionのような複数の環境を使用する場合

dotenvパッケージ を使用します

プロジェクトのルートフォルダーに.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
8
Maria Jeysingh Anbu

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

8
Ryan Dhungel

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

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

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

.env.development
.env.production

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

.env.development
.env.production

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

3
Nastro

env-cmd について。 VMoisの種類 gitHubに投稿 、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ファイル内。

3
tim

.envファイルは機能するが、.env.developmentまたは.env.productionが機能しない場合は、これら2つと一緒に空の.envファイルを作成します。理由はわかりませんが、これは私には有効です。

2
Stjepan Golemac

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

ソース： Github

2
Joe