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を使用しますがそのインストール手順は記載しません。→ インストール方法
• Firebaseを使用するにあたりこちらからアカウントの作成が必要になります。

はじめに

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

Angularの準備

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

mkdir portfolio
cd portfolio

ではAngularの下準備を行います。参考はこちら

yarn init
yarn add -D @angular/cli

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

次にAngularのプロジェクトを作成していきます。参考はこちら

ng new portfolio

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

-> % 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の環境構築を行います。
まずはブラウザ上でプロジェクトを作っておきます。以下の状態からプロジェクトを作成を選択して、適当に名前をつけます。今回はMy-Portfolioとつけておきました。

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

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

これでFirebase上にホスティングができているはずです。
下の画像のようにサイドバーからHostingを選択して、デプロイの履歴が表示されれば大丈夫だと思います。

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

Storageの準備

今回はFirebaseで使用可能なStorageを利用します。ブラウザ上のFirebaseでサイドバーからStorageを選択し、始めるを選ぶとルールの設定画面が表示されると思います。ルールの設定方法についてはこちら。
とりあえずデフォルトで次に進むと今度はリージョンの設定になります。リージョンについてはこちらを参考に近いところを選ぶと良いかと思います。
この設定が終わると、以下のような画面に移動するかと思います。

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

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

雑談

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

参考記事

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