时间戳

首页 > 解决方案 > Nx React 在运行时注入环境变量

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

问题描述

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

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

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

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

标签： reactjsnrwl-nxnrwl

解决方案

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反应项目的根目录创建了一个文件并将变量放在那里

托管环境

我们在构建过程中将 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

推荐阅读