将Angular部署到Firebase的步骤是什么？

1 年 ago

宇, 华

1 minute

这次为了学习Angular和Firebase，我制作了一个作品集，所以将Angular项目的创建、部署到Firebase以及创建存储环境的过程整理在一起。

开发环境可被解释为正在进行软件开发的计算机环境。

Angular: 8.2.14

前提 tí)

Firebaseを使用するにあたりこちらからアカウントの作成が必要になります。

首先

首先，我们将从环境设置开始。基本上，我们将按照Angular和Firebase的官方文档进行操作，所以不会有太多新的东西出现。因此，我在各个地方都记录了参考网站。如果您想查看更详细的信息，请参考那些网站。

Angular准备

首先，为了本次创建的项目，我们会新建一个目录。

mkdir portfolio
cd portfolio

现在我们来进行Angular的准备工作。参考资料在这里。

yarn init
yarn add -D @angular/cli

我已经准备好了yarn并安装了Angular。

接下来，我们将创建Angular项目。这里是参考资料。

ng new portfolio

当你输入以上命令时，会有两个问题需要回答（编辑日期：2020/3/1）。
第一个问题是是否要添加Angular路由，第二个问题是选择样式表的格式。在本文中，我们按照以下设置进行了配置。

-> % ng new portfolio
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]

完成项目的创建后，让我们进入创建的项目内。

cd portfolio

Firebase的配置准备

接下来我们将学习如何使用Firebase的命令行界面（CLI），请参考此链接。

npm install -g firebase-tools
firebase login

我们现在应该可以使用了。让我们实际查看一下Firebase上的项目列表。

-> % firebase projects:list
✔ Preparing the list of your Firebase projects
┌──────────────────────┬────────────────────┬──────────────────────┐
│ Project Display Name │ Project ID         │ Resource Location ID │
├──────────────────────┼────────────────────┼──────────────────────┤
│ My-Portfolio         │ my-portfolio-xxxxx │ [Not specified]      │
└──────────────────────┴────────────────────┴──────────────────────┘

1 project(s) total.

只要输出是这个样子的，应该没有问题。

将Angular部署到Firebase。

最后，我们将开始准备从 Angular 访问 Firebase 的步骤。可以参考此处。

ng add @angular/fire
ng deploy

如果在這種狀態下點擊域名的URL，就可以查看目前已上傳到服務器的狀態。

储存空间的准备

我想你可以随意上传你想要使用的图片文件等。

本次文章就到此为止！

聊天

以前我在使用Angular和Firebase时，是通过npm分别安装Angular和Firebase库，但这次我才第一次知道可以通过Angular来安装Firebase，非常方便地进行部署。
这只是我的主观感受，我认为Angular在库的选择上并不需要特别注意，即使只是用来创建一个小型网站也是有意义的。

参考文章

Angular公式ドキュメント
Firebase公式ドキュメント