在5分钟内使用Firebase将Angular项目发布出去
在Firebase上创建一个项目。
- Firebseコンソールで新しいプロジェクトを選択
-
- プロジェクト名を入力します
- サンプルプロジェクトなのでリージョン等はデフォルトのままです。
-
- プロジェクトが作成されました。
今回はHostingを利用します。
创建Angular项目
Angular版本
生成模板
使用以下命令生成Angular模板
ng new angular-sample
建设
由于Firebase Hosting不支持TypeScript,因此需要编译生成HTML和JavaScript文件。
ng build
将Angular项目与Firebase关联
Firebase命令行工具的版本
初始化
我们将使用以下命令进行交互式设置。
firebase init
※只提取重要的部分
- 利用するサービスは「Hosting」を選択
-
- プロジェクトはFirebase側で作成したプロジェクトを指定
- ※もし聞かれない場合は初期化完了後にfirebase use –add {プロジェクトID}で切り替えられます
-
- 公開ディレクトリはdist/angular-sample
ビルドの出力先はangular.jsonで確認する
index.htmlのままで良いのでrewrite~はNo
dist/aungular-sample/index.htmlを上書きして良いか?はNo
- 初期化完了
在Firebase平台上进行公开
部署
只需执行以下命令
firebase deploy
请使用浏览器访问。
访问部署时显示的Hosting URL。
最終
使用Firebase可以很容易地发布Angular项目!由于Hosting只能运行静态项目,如果想要运行MEAN堆栈等内容,需要使用如Heroku等可以运行Node.js的PaaS。
只要使用CloudFunctions或Firestore等实现无服务器架构,由于Firebase本身作为BaaS很出色,我认为可以通过Firebase+Angular开发出足够的系统。