在基于 nx 的 nodejs 应用程序中使用环境变量答案

【问题标题】：Using environment variables in nx based nodejs app在基于 nx 的 nodejs 应用程序中使用环境变量
【发布时间】：2019-07-22 15:28:20
【问题描述】：

我在 nrwl/nx 工作区中设置了一个包含多个 nodejs 和 Angular 应用程序的项目。

我正在尝试使用环境文件在 nodejs 应用程序中。

我已经像这样设置导入： import {environment} from './environments/environment';

然后我运行ng serve my-node-app，它显示了非生产环境。

现在我尝试使用 ng serve my-node-app --prod 来查看该应用如何与生产设置一起使用 - 但我收到错误消息：

Configuration 'production' could not be found in project my-node-app.

这是项目的 angular.json 配置：

"ui-server": {
      "root": "apps/ui/server",
      "sourceRoot": "apps/ui/server/src",
      "projectType": "application",
      "prefix": "ui-server",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@nrwl/builders:node-build",
          "options": {
            "outputPath": "dist/apps/ui/server",
            "main": "apps/ui/server/src/main.ts",
            "tsConfig": "apps/ui/server/tsconfig.app.json",
            "assets": ["apps/ui/server/src/assets"]
          },
          "configurations": {
            "production": {
              "optimization": true,
              "extractLicenses": true,
              "fileReplacements": [
                {
                  "replace": "apps/ui/server/src/environments/environment.ts",
                  "with": "apps/ui/server/src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@nrwl/builders:node-execute",
          "options": {
            "buildTarget": "ui-server:build"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "apps/ui/server/tsconfig.app.json",
              "apps/ui/server/tsconfig.spec.json"
            ],
            "exclude": ["**/node_modules/**"]
          }
        },
        "test": {
          "builder": "@nrwl/builders:jest",
          "options": {
            "jestConfig": "apps/ui/server/jest.config.js",
            "tsConfig": "apps/ui/server/tsconfig.spec.json"
          }
        }
      }
    }

我错过了什么吗？

【问题讨论】：

stackoverflow.com/questions/52319576/…的可能重复
@WillCain - 我不相信这是重复的。这一次，提到的话题没有回答我的问题。其次 - 它谈到了一个角度项目中的一个库。我说的是 nrwl/nx 项目中的 nodejs 应用程序。
链接线程中有更多信息。 --prod 不再需要，因为它总是被编译。我们在这里所做的是--configuration=producttion，它需要在angular.json 的应用程序的构建部分中输入production。您能否发布您应用的架构师配置，以便我们更好地提供帮助？
@electrichead 谢谢。我已将配置添加到问题中。配置好像已经有了。

标签： node.js angular-cli nrwl nrwl-nx

【解决方案1】：

我在寻找如何获取.env 文件中定义的环境变量时发现了这篇文章。

在服务器端渲染时可以访问前端部分的process.env.ENVIRONMENTAL_VARIABLES（例如Angular Universal），.env在Nrwl的monorepo和webpack属性的根中，例如：

const dotenv = require('dotenv-webpack');

module.exports = {
  plugins: [
    new dotenv(),
  ],
};

别忘了更改你的angular.json：

...
"architect": {
  "build": {
     "builder": "@angular-builders/custom-webpack:browser",
       "options": {
         "customWebpackConfig": {
           "path": "./webpack.browser.config.js",
           "replaceDuplicatePlugins": true
          },
          ...

我已将自定义 webpack 命名为 webpack.browser.config.js。

现在，假设您有一个 server/...，您将其用于一些后端内容，那么您将无法在此处访问它们。你需要安装dotenv 包和server/main.ts，假设这是你服务器的根目录，需要这个包，这样：

require('dotenv').config();

注意： 在Angular 8 之前，我们还可以在webpack.server.config.js 等文件中设置webpack-server 相关逻辑。因此，可以应用与dotenv 相关的基本相同的代码，该代码位于webpack.browser.config.js 中。但是，it doesn't work anymore。 Angular CLI Builders are being used to build & server SSR apps instead.

部署到Firebase/使用Cloud Functions for Firebase（可能还有其他无服务器/FaaS）？

然后在您的functions 文件夹中，您还需要粘贴.env 文件。我在这里假设您正在从functions 进行部署。

对于调试，我建议：

console.log(require('dotenv').config({ debug: true }));

可能会为您节省很多时间。

【讨论】：