代码之家  ›  专栏  ›  技术社区  ›  user28273827332

如何在Angular应用程序部署中安全地管理环境变量

  •  1
  • user28273827332  · 技术社区  · 1 年前

    我有一个 environment.ts 文件

    export const environment = { token: '345' };
    

    和一个 enviroment.development.ts 文件

    export const environment = { token: '123' };
    

    两者都在公共GitHub回购上。我想部署一个应用程序,并将令牌值设置为真正的键值,但在Netlify或Vercel上使用环境变量不起作用,因为我为项目设置了环境变量。我不想在我的应用程序的任何部分写下真正的访问令牌。如何部署应用程序并将伪造的代币值更改为真实值?如果我把真正的价值放在 src/environments/environment.development.ts 它将是公开的,但我必须这样做,因为它是Netlify或Vercel获取代码的地方。

    如果我加上:

      production: true,
      token: '345',
    

    这些值仍然没有改变。

    下列的 https://angular.io/guide/build#configure-target-specific-file-replacements

    angular.json:

    {
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      "version": 1,
      "newProjectRoot": "projects",
      "projects": {
        "flightSearch": {
          "projectType": "application",
          "schematics": {},
          "root": "",
          "sourceRoot": "src",
          "prefix": "app",
          "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:application",
              "options": {
                "outputPath": "dist/flight-search",
                "index": "src/index.html",
                "browser": "src/main.ts",
                "polyfills": ["zone.js"],
                "tsConfig": "tsconfig.app.json",
                "assets": ["src/favicon.ico", "src/assets"],
                "styles": [
                  "src/styles.css",
                  "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
                  "node_modules/primeng/resources/primeng.min.css"
                ],
                "scripts": [],
                "server": "src/main.server.ts",
                "prerender": true,
                "ssr": {
                  "entry": "server.ts"
                }
              },
              "configurations": {
                "production": {
                  "budgets": [
                    {
                      "type": "initial",
                      "maximumWarning": "500kb",
                      "maximumError": "1mb"
                    },
                    {
                      "type": "anyComponentStyle",
                      "maximumWarning": "2kb",
                      "maximumError": "4kb"
                    }
                  ],
                  "outputHashing": "all"
                },
                "development": {
                  "optimization": false,
                  "extractLicenses": false,
                  "sourceMap": true,
                  "fileReplacements": [
                    {
                      "replace": "src/environments/environment.ts",
                      "with": "src/environments/environment.development.ts"
                    }
                  ]
                }
              },
              "defaultConfiguration": "production"
            },
            "serve": {
              "builder": "@angular-devkit/build-angular:dev-server",
              "configurations": {
                "production": {
                  "buildTarget": "flightSearch:build:production"
                },
                "development": {
                  "buildTarget": "flightSearch:build:development"
                }
              },
              "defaultConfiguration": "development"
            },
            "extract-i18n": {
              "builder": "@angular-devkit/build-angular:extract-i18n",
              "options": {
                "buildTarget": "flightSearch:build"
              }
            },
            "test": {
              "builder": "@angular-devkit/build-angular:karma",
              "options": {
                "polyfills": ["zone.js", "zone.js/testing"],
                "tsConfig": "tsconfig.spec.json",
                "assets": ["src/favicon.ico", "src/assets"],
                "styles": ["src/styles.css"],
                "scripts": []
              }
            }
          }
        }
      },
      "cli": {
        "analytics": "3921564e-694e-4bc9-aa09-49b8c3772415"
      }
    }
    
    1 回复  |  直到 1 年前
        1
  •  1
  •   Naren Murali    1 年前

    在您的项目中将有 .gitignore 文件,在这里您可以包括您的 environment 文件夹,提交甚至不会显示这些文件,它们在本地系统中是安全的,您可以使用它们从本地部署。

    另一种方法是使用 Deploy keys (github),在那里您可以安全地存储密钥,然后在部署代码时使用脚本和node.js来创建文件。

    How to keep your secrets from your source code in an Angular project ?!