使用Firebase CLI将Angular应用部署到Firebase Hosting
因为我想要尝试使用Firebase，所以我选择了看起来最简单的Firebase Hosting来进行试验。
在这里，我将介绍如何将由angular-cli创建的SPA应用部署到Firebase Hosting上。
前提 – prerequisite or prerequisite condition
-
- Firebaseのアカウントは取得済み(無料枠で可)
- ホスティングするAngluarのSPAを用意済み(今回はng newした直後のアプリを使用)
尝试时的环境
$ ng -v
Angular CLI: 1.5.2
Node: 9.2.0
OS: darwin x64
Angular: 5.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cli: 1.5.2
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.36
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.2
@schematics/angular: 0.1.5
typescript: 2.4.2
webpack: 3.8.1
$ firebase -V
3.15.2
步骤
事前准备
安装Firebase CLI。
$ npm install -g firebase-tools
创建Firebase项目
请登录Firebase的Web控制台并预先创建一个空项目。
https://console.firebase.google.com
在接下来的Firebase init命令中，虽然有一个选项可以选择“创建新项目”，但似乎还不支持。
我将登录Firebase账户的控制台。
$ firebase login
在回答是否可以发送错误报告的问题后，浏览器会打开并要求您使用Google帐户登录。
当登录完成后，会切换到以下画面，然后返回控制台。
接下来，我们将进行Firebase项目的初始化。
在此之前，请先移动到要部署的Angular应用程序的项目目录中。
$ cd angular-firebase-hosting
执行以下命令。
$ firebase init
我会选择Firebase Hosting网站来进行配置和部署，因为我被问及项目的种类。
另外，也需要您选择项目，因此我会选择先前创建的项目。
部署配置
编辑 firebase.json 文件来进行针对 Angular 的部署配置。
{
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
公共的指定了托管目录。
在重写中设置了HTTP重写规则。
如果使用Angular Router，我认为这是一个常见的配置。
部署和确认
提前构建Angular应用程序。
$ ng build --prod
执行以下命令，部署Angular应用程序。
$ firebase deploy
在部署完成后，执行以下命令，然后选择 “Hosting: Deployed Site”，就可以在浏览器中显示部署好的Angular应用程序。
$ firebase open
总结
可能的中文表达：
作为关键点，可能是在firebase.json的public和rewrites设置中。
此外，关于使用Firebase CLI来管理多个环境以及设置自定义域名等方面，有很多其他有参考价值的文章可以查阅，你也可以参考一下。
请提供句子或上下文段落进行重述。
以下是三个关于Firebase的链接：
1. Firebase命令行工具的GitHub页面：https://github.com/firebase/firebase-tools
2. 一个关于Firebase的教程文章：https://qiita.com/Ijoru/items/5b27f1c32df2222514fb
3. Firebase官方文档的完整配置指南：https://firebase.google.com/docs/hosting/full-config?hl=ja
