React .env 環境変数（詳しい使い方、命名方法）

• Reactプロジェクトの作成後、.envデフォルトではファイルが存在しないため、手動で作成する必要があります。または、dotenvプラグインを使用することもできます。（添付：環境変数.env 公式ドキュメント）

• ファイル名の規則:

  • .env： デフォルト。
  • .env.local: ローカルオーバーライド。テストを除くすべての環境にこのファイルをロードします。
  • .env.development、  .env.test、  .env.production: 環境固有の設定。
  • .env.development.local、  .env.test.local、  .env.production.local: 環境固有の設定をローカルで上書きします。

• 左から右に、異なるファイル名、コマンド実行時の優先順位左边优先局最高:

  • $ npm start:  .env.development.local> .env.local> .env.development>.env
  • $ npm run build:  .env.production.local> .env.local> .env.production>.env
  • $ npm test:  .env.test.local> .env.test> .env(ノートは.env.local付属しません)

• で使用する必要がありますReact。環境変数を作成するときは、REACT_APP_接頭辞として ( VueinVUE_APP_を接頭辞として) を付ける必要があります。

  たとえば、BASE_URL環境変数を書きたい場合は、 のように記述する必要がありREACT_APP_BASE_URL=https://www.baidu.com、=前後のスペースは残しても残さなくても構いません。

• 環境変数を定義した後、コード内のオブジェクトを介してファイル内の変数process.envにアクセスします.env。

  たとえば、上記で定義した環境変数にアクセスするにはREACT_APP_BASE_URL、process.env.REACT_APP_API_KEYこれを通じてアクセスできます。

  出力で直接App.tsxテストしてください。

  useEffect(() => {
        
        
    console.log(process.env.REACT_APP_BASE_URL)
  }, [])