时间戳

首页 > 解决方案 > 如何将我的 Angular 应用程序部署到不同的 firebase 环境？

angular - 如何将我的 Angular 应用程序部署到不同的 firebase 环境？

问题描述

我想让我的 Angular 应用程序在两个不同的网站上运行，一个用于开发/展示目的，一个用于生产。

为此，我创建了两个 firebase 项目（app 和 appDev），每个项目都有自己的实时数据库。

如何正确地将我的应用程序部署到这些环境？我需要使用 firebase CLI 还是 angular CLI？

我发现了 angular src/environments 文件夹，其中包含我的 environment.ts 和 environment.prod.ts - 但实际上它似乎没有改变任何东西，我可以将错误数据放入该文件，它仍会正确部署到我的开发环境（我最初配置 ng add @angular/fire）并使用开发数据库运行。

我还发现了关于 firebase 目标的信息，但是对于我想要实现的目标，它们似乎非常强大（具有不同的资源类型和东西），那时我可能无法使用 ng deploy，所以我不确定这是否是正确的方向。

第三种方法似乎是“firebase 使用 --add”并添加多个项目。

现在我可以在任何我想切换的时候重新初始化firebase，这可行，但不能这样想。任何指针？环境、目标和项目之间的假定区别是什么？

标签： angularfirebasegoogle-cloud-firestoreangularfire

解决方案

在文件 angular.json 例如：“配置”：

    { "staging": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.staging.ts"
        }
      ],
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "2mb",
          "maximumError": "5mb"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "6kb",
          "maximumError": "10kb"
        }
      ]
    },
    "demo": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.demo.ts"
        }
      ],
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "2mb",
          "maximumError": "5mb"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "6kb",
          "maximumError": "10kb"
        }
      ]
    },

src/environments/environment.staging.ts

export const environment = {
  production: true,
  apiUrl: 'https://firebase/api'
};

模型：

import {environment} from './environments/environment';

this.http.get(`${environment.apiUrl}/some/select_options`, { params })
      .pipe();

并构建或运行：

ng build --configuration=staging

推荐阅读