Nx React 在运行时注入环境变量

Question

我有一个带有多个 React 应用程序的 Nx monorepo。

我希望能够运行一次构建，然后将相同的构建部署到多个环境（例如开发、测试、生产）。

我在以前没有使用 Nx 的项目中所做的就是在文件夹env.js中有一个文件/public，并在头部有一个脚本标签index.html来获取该env.js文件。

Nx是否可以达到相同的结果？

Answer 1

NX默认情况下，您/environments/environment.ts可以在其中存储环境变量的文件。

您可以使用以下命令将其导入您的应用程序：

import { environment } from './environments/environment'

您可以在构建过程中使用该文件交换环境workspace.json。

...
"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "apps/client/src/environments/environment.ts",
        "with": "apps/client/src/environments/environment.prod.ts"
      }
    ],
  ...

如果您想将环境变量注入到index.html文件中，则必须在构建应用程序时实际设置这些变量。对于本地构建，

本地

我.env在反应项目的根目录创建了一个文件并将变量放在那里

托管环境

我们在构建过程中将环境变量添加到 CI 中。

- name: Build Applications
  run: |
    NX_DOMAIN_NAME="My Super Domain" npx nx run-many --target=build --configuration=production

https://nx.dev/latest/react/guides/environment-variables#using-environment-variables-in-indexhtml