AngularをFirebaseにデプロイするまでの手順

今回はAngularとFirebaseの勉強のために、ポートフォリオを作成したのでAngularのプロジェクト作成からFirebaseへのデプロイとStorage環境の作成までをまとめてみました。

# 開発環境
- macOS Catalina バージョン 10.15.3（19D76）
- yarn 1.21.1
- Angular CLI: 8.3.25
- Node: 13.6.0
- Angular: 8.2.14

# 前提
- 本記事ではyarnを使用しますがそのインストール手順は記載しません。→ [インストール方法](https://classic.yarnpkg.com/ja/docs/install/#mac-stable)
- Firebaseを使用するにあたり[こちら](https://firebase.google.com/)からアカウントの作成が必要になります。

# はじめに
まずは環境構築から始めます。基本的にはAngularとFirebaseの公式ドキュメント通りに進めていくので、そこまで真新しいことはしないです。なので参考にしたサイトを各所に記載しています。詳しい情報を見たい方はそちらの方を参考にしていただけると幸いです。

## Angularの準備
まずは今回作るプロジェクト用にディレクトリを作成します。

```terminal
mkdir portfolio
cd portfolio
```

ではAngularの下準備を行います。[参考はこちら](https://angular.jp/guide/setup-local)

```terminal
yarn init
yarn add -D @angular/cli
```

これでyarnの準備とAngularのインストールができました。

次にAngularのプロジェクトを作成していきます。[参考はこちら](https://angular.jp/guide/setup-local#%E3%82%B9%E3%83%86%E3%83%83%E3%83%972-%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9%E3%81%A8%E5%88%9D%E6%9C%9F%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B)

```terminal
ng new portfolio
```

上記のコマンドを打つと2つ質問を聞かれます(編集時:2020/3/1)。
1つ目はAngular routingを追加するか、2つ目はスタイルシートのフォーマットの選択です。本記事では以下のようにセットアップしています。

```terminal
-> % 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                ]
```

プロジェクトの作成が完了したら作成したプロジェクトの中に入りましょう。

```terminal
cd portfolio
```

## Firebaseの準備
次にFirebaseの環境構築を行います。
まずは[ブラウザ上](https://console.firebase.google.com/)でプロジェクトを作っておきます。以下の状態から`プロジェクトを作成`を選択して、適当に名前をつけます。今回は`My-Portfolio`とつけておきました。
![welcom_firebase.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200209/86b5b8b5-ef92-9a3c-3fc8-434520f4120f.png)

続いてFirebaseのCLIを使えるようにします。[参考はこちら] (https://firebase.google.com/docs/cli?hl=ja)

```terminal
npm install -g firebase-tools
firebase login
```

これで使えるようになったはずです。実際にFirebase上にあるプロジェクトの一覧をみてみましょう。

```terminal
-> % 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にアクセスするための準備を行います。[参考はこちら](https://angular.jp/guide/deployment)

```
ng add @angular/fire
ng deploy
```

これでFirebase上にホスティングができているはずです。
下の画像のようにサイドバーから`Hosting`を選択して、デプロイの履歴が表示されれば大丈夫だと思います。
![firebase_hosting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200209/0006f779-1e7b-9980-806f-ff3ef08ca1e8.png)

この状態でドメインのURLをクリックすれば、現在サーバーにアップロードされている状態を見ることが可能です。

## Storageの準備
今回はFirebaseで使用可能なStorageを利用します。ブラウザ上のFirebaseでサイドバーから`Storage`を選択し、`始める`を選ぶとルールの設定画面が表示されると思います。ルールの設定方法については[こちら](https://firebase.google.com/docs/storage/security/start?authuser=0)。
とりあえずデフォルトで次に進むと今度はリージョンの設定になります。リージョンについては[こちら](https://firebase.google.com/docs/projects/locations?authuser=0#location-r)を参考に近いところを選ぶと良いかと思います。
この設定が終わると、以下のような画面に移動するかと思います。
![fire_storage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200209/305c119f-c6cb-f0d3-3595-85f68097b844.png)

ここからは使用する画像ファイル等を好きなように上げていけば良いかと思います。


今回の記事はこれで以上になります！

# 雑談
前にAngularとFirebaseを一緒に使用したときは、npmで別々にAngularとfirebaseのライブラリをインストールしていたのですが、FirebaseをAngular経由でインストールするととても簡単ににデプロイできるというのは今回初めて知りました。
主観ですが、Angularはライブラリの選定にそこまで気を使わなくて良いので、小さなwebサイトを作るだけの使用でも有意義かと思いました。

# 参考記事
- ドキュメント
    - [Angular公式ドキュメント](https://angular.jp/)
    - [Firebase公式ドキュメント](https://firebase.google.com/docs)