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

Question

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

我是不是漏掉了什么？

Answer 1

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

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-服务器相关逻辑，在文件中，例如 webpack.server.config.js .因此，可以应用与 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（可能还有其他 Serverless/FaaS）？

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

对于调试，我建议：

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

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

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

Using environment variables in nx based nodejs app

node.js

angular-cli

nrwl

nrwl-nx