Reactアプリで環境変数を使用する方法
私はReactにかなり慣れていないため、Azure全般についても調査しています。 ERP=バックグラウンドを取得しましたが、そのバックグラウンドにはVSTSやCI/CDなどのツールの使用が含まれていました。環境ごとに変数を指定するためにVSTSの「ライブラリ」を使用することに大きく依存していました。展開時にこれらを指定します。
だが！私はインターネット上で読み回し、設定をいじっていましたが、私の理解では、NPMによって生成された実際のコードにのみパラメーターを「埋め込む」ことができます。これは基本的に、私が慣れていない環境ごとに別のビルドを作成する必要があることを意味します。私は常に、あなたが本番に出荷するものは、プリプロダクション、またはステージング、または...環境変数を使用する他の方法は本当にありませんか？ Azure App Serviceのアプリケーション設定を使用することを考えていましたが、コンソールにポップアップ表示することもできません。 VSTSのライブラリでは、手順が1つしかないため、展開でこれらを使用する方法も見つかりませんでした。
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables でドキュメントを読む= .envファイルをソース管理に置くことを快適に感じさせません。私は置くというアプローチも試しました {process.env.NODE_ENV} 私のコードでは、Azureでは '開発'と表示されますが、npm run build（これはプロダクションである必要があります）も実行します...
だから、私はここで少し迷っています！ Reactアプリで、Azure App Serviceで指定された環境変数をどのように使用できますか？
ありがとう！
良いオプション
私はこの問題も抱えていましたが、環境に異なるビルドスクリプトを使用して、使用する環境変数をカスタマイズできます。このCRAドキュメントを見つけました https://create-react-app.dev/docs/deployment/#customizing-environment-variables-for-arbitrary-build-environments
YAMLで変数を設定することもできます。 https://docs.Microsoft.com/en-us/Azure/devops/pipelines/process/variables?view=Azure-devops&tabs=yaml%2Cbatch#set-variables-in-pipeline
しかし、単一のビルドが必要な場合はどうなりますか？
異なる環境（開発、ステージング、製品）に対して単一のビルドおよびリリースステージを使用している場合、これはまだ解決していません。すべてがビルドされているのでReactには、ビルド時に指定した環境変数がすべて含まれています。
- .NETビルドからの反応ビルドの分離。これにより、デプロイごとにこれを行うことができます。
- すべての環境変数を定義し、たとえばREACT_APP_SOME_KEY_を追加してから、サブドメインに基づいて特定の環境を選択します。たとえば https://dev.yoursite.comhttps://yoursite.com ですが、このオプションです非正規のようです。
- Reactすべての環境用にビルドする必要がある。制限がある可能性があります。個別のビルドが必要であることを受け入れてください。
このルートは、Azure DevOpsを使用している場合にのみ適用されます。
- Azure DevOpsには、ライブラリと呼ばれるパイプラインのセクションがあります。
- 新しい変数グループを作成し、環境変数を追加します。
- 最後に作成した変数グループをビルドプロセスに関連付けます。
また、環境変数にはREACT_APP_で始まる名前を付けてください。
それはあなたが探しているものとは正確には異なりますが、おそらくこれはあなたの問題の代替解決策です（ビルドステップ中にprocess-env.xを実際の値に置き換えます）：