Angular９とFirebaseでブログを作ってみる１（Angular9プロジェクトをFirebase Hostingにデプロイしてみる編）

Angular9が2019年10月リリース予定から延期され、2020年1月現在ではバージョン9.0.0-rc.11まで来ました。
Angular9を試したいという気持ちが抑えられないので、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`を指定（[参考](https://angular.io/guide/ivy)）

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

※グローバルのAngular CLIバージョンは8系なので、この時点で作成したプロジェクトはAngular8となります

## Angularバージョンを上げる

- [Angular Update Guide](https://update.angular.io/#8.2:9.0)に従ってアップデートを行います。  
※まだAngular9はメジャーバージョンでないため、グローバルでなくローカルでのみ採用します

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

※リポジトリをクリーンする必要がある旨のメッセージが出たら、`git commit`や`git stash`で一旦差分がない状態にする必要があります。


Angular9はTypescript3.7対応してないと思ってたんですが、Typescript3.7.5まで上がりました！
これ、地味にありがたいですね。

## ビルド

- 本番ビルドしてみます

```
npm run build -- --prod
```


# Firebaseプロジェクトの作成

Firebaseコンソールから「プロジェクトを追加」を選択します

- プロジェクト名を付けます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/3367b2c9-afd8-aed2-1463-8767df1556b5.png)


- アナリティクスの設定をします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/7607d47c-9213-f7e4-8ca9-f016d4927d7d.png)

- Googleアナリティクスアカウントを指定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/9f8fd80f-5b66-e954-bdd0-c888a9eea70c.png)

- 「プロジェクトを作成」を押下するとプロジェクトの作成が開始されます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/06b57397-614c-494d-2237-ad170a44e288.png)

- プロジェクトの作成が完了します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/0d6b2758-725d-49df-581c-a8274429b757.png)


## Firebase CLIの準備

Firebase HostingへデプロイするにはFirebase CLIが必要なため、インストールします。

- firebase cliのインストール（[参考](https://firebase.google.com/docs/cli?hl=ja#install-cli-windows)）

```
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 loginする](https://qiita.com/musatarosu/items/27eecf963ced917dc74f)



## Firebase Hostingへデプロイ

[公式の手順](https://firebase.google.com/docs/hosting/quickstart?hl=ja#initialize)に従ってデプロイしていきます。





- 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
```

以下のURLで公開されました！！
https://teracy-blog.firebaseapp.com


# まとめ

今回はFirebase HostingでAngular9プロジェクトを公開するところまでをやってみました。
次回は見た目をブログっぽくしていこうかな～と思います。

(追記)
[Angular９とFirebaseでブログを作ってみる２（Angular Materiaを導入してみる）](https://qiita.com/teracy55/items/b7fc7ebaef5770f2cdbc)