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

Question

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

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

我以前在不使用 Nx 的项目中所做的，是在/public文件夹中有一个env.js文件，在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文件，则必须在构建应用程序时实际设置这些变量。 对于本地构建，

本地

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

托管环境

我们在构建过程中将 envvars 添加到我们的 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

Answer 2

将前缀为 NX_ 的变量设置到 .env 文件中：

NX_SERVER_URL=http://localhost:8080

然后它将可以在您的反应应用程序中访问：

const url = process.env.NX_SERVER_URL

或者在 html 文档中：

<p>The server url is %NX_SERVER_URL%.</p>

还有NX 文档