将Angular的构建与Firebase的部署进行同步
这篇文章是关于使用Angular+Firebase创建聊天应用的入门指南。
前一篇文章：在WEB应用中搭建Firebase的部署环境。
通过这篇文章要做的事情
在前一篇文章中，我介绍了有关Firebase的分阶段运营和部署方法，而在本篇文章中，我将介绍如何将Angular和Firebase的部署进行联动。
-
- 開発環境にデプロイする
-
- ステージング環境にデプロイする
- 本番環境にデプロイする
使用Angular进行部署
不仅仅是Angular，近年的JavaScript应用程序通常会分开开发环境和生产环境的构建文件。在开发环境中，需要进行调试，所以允许显示SourceMap，以便更容易进行调试。而在生产环境中，重点是文件的加载速度和机密性，所以需要对文件进行压缩，减少额外的信息。
由于自己尝试进行这个构建任务会变得非常麻烦，因此使用像webpack和gulp这样的任务管理器来管理已成为事实上的标准。
同样，即使在Angular中也不例外，在内部似乎使用了webpack来处理任务，但并非在webpack.config.js中，而是在angular.json中记录了构建和测试工具的设置信息。
如果你想要自己编写配置，也有名为@angular-builders/custom-webpack的工具可供选择，适用于那些想要自己调整配置的人，请参考以下链接。
参考：搭建Angular + 自定义Webpack开发环境
实施内容
如果要将Angular和Firebase连接起来进行部署，可以使用AngularFire的ng deploy命令。通过这个命令，可以实现根据开发环境进行构建和部署。
关于AngularFire，我们已经在之前的文章中介绍了安装方法等内容，如果您是通过这篇文章查阅的，请确保参考那篇文章。
请参考以下链接：https://angular.io/guide/deployment
注意事项1：ng deploy在Angular/cli中是从v8.3.0版本开始引入的。如果您使用的是早于这个版本的@angular/cli，则无法使用，请注意。
注意事项2：@angular/cli的ng deploy在2020年5月报告了一个错误，并已经修复。以下实现在之前的@angular/cli版本中会出现错误，请确保使用最新的版本。
参考：https://github.com/angular/angular-cli/issues/17613
此外，本次使用的Firebase项目有两个，并且将按照以下方式进行设置。
将应用部署到开发环境中。
首先，我们要检查 angular.json 的源代码。
"deploy": {
"builder": "@angular/fire:deploy",
"options": {},
}
如果是在@angular/cliv8.3.0或更高版本的angular.json文件中，就已经包含了ng deploy的配置。只要在这种初始状态下运行ng deploy命令，它的行为将与运行ng build –prod命令时相同。
然而，在开发环境中，由于需要进行调试，因此需要设置为不使用–prod。
"deploy": {
"builder": "@angular/fire:deploy",
"options": {
"buildTarget": "NgChat:build",
},
}
现在开发环境的设置已经完成。
我们将进行ng deploy操作，以确认开发环境的运行情况。
执行结果
将应用部署到预上线环境。
首先，创建一个用于staging环境的环境配置文件。
将开发环境下的src/environments/environment.ts文件复制一份，并将production设置为true。
export const environment = {
production: true,
firebase: {
apiKey: '<your-key>',
authDomain: '<your-project-authdomain>',
databaseURL: '<your-database-URL>',
projectId: '<your-project-id>',
storageBucket: '<your-storage-bucket>',
messagingSenderId: '<your-messaging-sender-id>',
appId: '<your-app-id>',
measurementId: '<your-measurement-id>',
},
};
接下来，您将在angular.json文件中进行构建配置。检查build对象中的configurations属性，您会发现已经有了用于生产环境的设置，因此您只需将其修改为适用于staging环境的配置即可。
＊除了配置文件路径，其他部分没有进行更改。
"configurations": {
"production": {
"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"
}
]
}
}
如果要大致总结这里所写的设置信息的意义，可以概括如下：
这是从以下文章中提取出来的内容。有关其他参数，请参考那篇文章。
参考：angular.json的内容
为了能够根据此处指定的内容进行部署，我们将在 angular.json 的部署信息中进行追加。
"deploy": {
"builder": "@angular/fire:deploy",
"options": {
"buildTarget": "NgChat:build"
},
"configurations": {
"staging": {
"buildTarget": "NgChat:build:production"
}
}
}
现在准备工作已经完成。
只需添加-c选项（–configuration的别名）进行部署。
ng deploy -c staging
执行结果
将代码部署到生产环境
请将firebase的信息追加到Angular项目中的environment.prod.ts文件中，最后进行生产环境的部署设置。在此过程中，请使用生产项目中的参数。
export const environment = {
production: true,
firebase: {
apiKey: '<your-key>',
authDomain: '<your-project-authdomain>',
databaseURL: '<your-database-URL>',
projectId: '<your-project-id>',
storageBucket: '<your-storage-bucket>',
messagingSenderId: '<your-messaging-sender-id>',
appId: '<your-app-id>',
measurementId: '<your-measurement-id>',
},
};
接下来，在angular.json中添加生产环境项目。
由于serve和test仅在开发和部署环境中使用，所以已经从生产环境项目中排除了它们。
"NgChatProd": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/NgChat",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.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"
}
]
}
}
},
"deploy": {
"builder": "@angular/fire:deploy",
"options": {}
}
}
}
由于在主机部署时会出现错误，因此需要在Firebase的配置文件中进行补充。本次将创建两个项目，一个用于开发，另一个用于生产，而不使用用于临时环境的Firebase项目。
{
"projects": {
"dev": "開発用FirebaseプロジェクトID",
"prod": "本番用FirebaseプロジェクトID"
},
"targets": {
"開発用FirebaseプロジェクトID": {
"hosting": {
"NgChat": [
"開発用FirebaseプロジェクトID"
]
}
},
"本番用FirebaseプロジェクトID": {
"hosting": {
"NgChatProd": [
"本番用FirebaseプロジェクトID"
]
}
}
}
}
{
"target": "NgChat",
"public": "dist/NgChat",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
{
"target": "NgChatProd",
"public": "dist/NgChat",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
使用ng deploy命令后，将项目名称填入，并执行，本地环境的设置即完成。
ng deploy NgChatProd
执行结果 (shí jié guǒ)
使用Angular和Firebase创建聊天应用的条目已经全部结束。
辛苦了。
源代码
请在此时点提供源代码。
※ 删除了apiKey，请在试用时自行创建并输入apiKey。
