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

我已经在 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"
          }
        }
      }
    }

我错过了什么吗？

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

process.env.ENVIRONMENTAL_VARIABLES在服务器上渲染时可以访问前端部分（例如Angular Universal），有.env在根Nrwlmonorepo 和 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 as webpack.browser.config.js.

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

require('dotenv').config();

Note: until Angular 8我们还能够设置webpack- 服务器相关逻辑，在文件中，例如webpack.server.config.js。因此，可以应用与以下内容基本相同的代码dotenv，这是在webpack.browser.config.js。然而，它不再起作用了 https://github.com/angular/angular-cli/issues/16348. Angular CLI Builders 被用来构建和服务器 SSR 应用程序 https://github.com/nestjs/ng-universal/issues/418#issuecomment-688170340.

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

然后在你的functions您需要粘贴的文件夹.env文件也是如此。我在这里假设从functions你正在部署。

对于调试我建议：

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

可能会拯救你a lot的时间。