使用Angular9和Firebase创建博客1（将Angular9项目部署到Firebase Hosting）进行尝试

2 年 ago
宇, 华
3 minutes

由于Angular9的预定发布日期从2019年10月延期到了2020年1月，目前最新版本已经到达了9.0.0-rc.11。因为迫不及待地想要尝试Angular9，我想顺便结合Firebase来制作一个博客。

因为我想悠闲地进行创作，所以我打算分成几次来发布。

构成（预定）

前端：Angular9（部署至Firebase Hosting）
后端：Firestore

开发环境

    • windows10 Home

 

    Angular CLIバージョンは以下を参照
$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.23
Node: 12.13.0
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.23
@angular-devkit/build-angular     0.803.23
@angular-devkit/build-optimizer   0.803.23
@angular-devkit/build-webpack     0.803.23
@angular-devkit/core              8.3.23
@angular-devkit/schematics        8.3.23
@angular/cli                      8.3.23
@ngtools/webpack                  8.3.23
@schematics/angular               8.3.23
@schematics/update                0.803.23
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

生成Angular项目

ng newコマンドでプロジェクトを生成します

プロジェクト名はmy-blog

ルーティングを有効にするため–routingを指定
スタイルはSCSSで書くため–style=scssを指定
レンダリングエンジンはIvyを使用するため–enable-ivyを指定（参考）

ng new my-blog --routing --style=scss --enable-ivy
cd my-blog

由于全局的Angular CLI版本为8系列，因此此时创建的项目将成为Angular8。

升级Angular版本

Angular Update Guideに従ってアップデートを行います。
※まだAngular9はメジャーバージョンでないため、グローバルでなくローカルでのみ採用します

 ng update @angular/core @angular/cli --next

如果收到了需要清理存储库的消息，您需要使用git commit或git stash将其暂时设置为没有差异的状态。

我曾认为Angular 9不支持Typescript 3.7，但它已经升级到了Typescript 3.7.5！这真是令人感激，虽然看起来不起眼。

创建

    本番ビルドしてみます
npm run build -- --prod

创建Firebase项目

从Firebase控制台中选择“添加项目”。

    プロジェクト名を付けます
image.png
    アナリティクスの設定をします
image.png
    Googleアナリティクスアカウントを指定します。
image.png
    「プロジェクトを作成」を押下するとプロジェクトの作成が開始されます
image.png
    プロジェクトの作成が完了します
image.png

准备Firebase CLI

由于需要使用Firebase CLI将其部署到Firebase Hosting，所以需要先安装Firebase CLI。

    firebase cliのインストール（参考）
npm install -g firebase-tools
    バージョンを確認します
$ firebase --version
7.12.1
    firebaseへログインします
firebase login

出现了以下这样的错误。。。

$ firebase login

Error: Cannot run login in non-interactive mode. See login:ci to generate a token for use in non-interactive environments.

我之前是在GitBash中执行的，据说在GitBash中添加–interactive选项会更好。
*参考了以下文章。在Git Bash中登录firebase 。

将应用部署到Firebase Hosting。

按照公式的步骤进行部署。

    firebaseとの紐づけ
firebase init
    実行すると、以下のように利用するサービスを聞かれるため、Hostingを選択します。
$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  C:\Users\liter\Desktop\develop\my-blog

? Are you ready to proceed? (Y/n)
? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to set up for this folder? Press Space
 to select features, then Enter to confirm your choices. (Press <space> to selec
t, <a> to toggle all, <i> to invert selection)
>( ) Database: Deploy Firebase Realtime Database Rules
 ( ) Firestore: Deploy rules and create indexes for Firestore
 ( ) Functions: Configure and deploy Cloud Functions
 ( ) Hosting: Configure and deploy Firebase Hosting sites
 ( ) Storage: Deploy Cloud Storage security rules
 ( ) Emulators: Set up local emulators for Firebase features
    • デプロイ対象のディレクトリを指定します

dist/my-blogを指定します（Angularのビルド先です）
AngularはSPAなので、rewrite all urls to /index.htmlはyを指定します
dist/my-blog/index.html

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? (public) dist/my-blog
? What do you want to use as your public directory? dist/my-blog
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File dist/my-blog/index.html already exists. Overwrite? (y/N) N
? File dist/my-blog/index.html already exists. Overwrite? No
i  Skipping write of dist/my-blog/index.html
    デプロイします
$ firebase deploy

=== Deploying to 'teracy-blog'...

i  deploying hosting
i  hosting[teracy-blog]: beginning deploy...
i  hosting[teracy-blog]: found 10 files in dist/my-blog
i  hosting: uploading new files [0/9] (0%)
i  hosting: uploading new files [0/9] (0%)
+  hosting[teracy-blog]: file upload complete
i  hosting[teracy-blog]: finalizing version...
+  hosting[teracy-blog]: version finalized
i  hosting[teracy-blog]: releasing new version...
+  hosting[teracy-blog]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/teracy-blog/overview
Hosting URL: https://teracy-blog.firebaseapp.com

以下的网址链接已经发布啦！！
https://teracy-blog.firebaseapp.com

总结

我已经尝试使用Firebase Hosting在Angular9项目中进行发布。

下一步，我打算将其外观设置得更像博客。

（追加）在Angular 9和Firebase上创建博客（尝试使用Angular Materia）

bannerAds