angularをFirebaseでデプロイ

趣旨

angularとdjangoで作ったブログアプリのangularの方をFirebaseでデプロイします。
メモ程度にまとめるつもりです。

アカウントとプロジェクトの作成

Firebase公式サイトで行います。
アカウントは、なぜか作ってありました。まず『プロジェクトの追加』を押して、プロジェクトを作成します。なんとかに同意みたいなことがいっぱい出てきますが、かたっぱしから同意します。

Hosting

今回は『Hosting』という機能を使うので、『開発』→『Hosting』を選択します。
始めたいので、『始める』を選択します。

Firebase CLI

『Firebase CLI』を使うので、指示に従ってターミナルに移動してインストールします。

ターミナル

$ cd アプリのディレクトリ
$ npm install -g firebase-tools

ターミナルでログイン

以下のコマンドを打って、FirebaseCLIにログインします。

ターミナル

$ firebase login

そしたらいろいろ出てきて指示に従ってぽちぽちしていけばいつの間にかターミナルでログインできています。

プロジェクトをビルドする

ターミナル

$ ng build --prod

このコマンドを打って、ファイルの中にエラーが残っていた場合はエラーを吐かれます。

※次のプロジェクトの初期化の前にビルドをしてdistディレクトリを作成する必要があります。

プロジェクトの初期化

ターミナル

$ firebase init

そしたらめっちゃ質問されるので、全部英語を読んで頑張って答えます。

『What do you want to use as your public directory?』
と聞かれたら、
『dist/アプリのディレクトリ名』と答えます。

テスト

デプロイする前にローカルサーバーで動作を確認します。

ターミナル

$ firebase serve

想定通りにアプリが動いたらいよいよデプロイです。

デプロイ

ターミナル

$ firebase deploy

完了したらURLが出てきます。そのURLに飛んだら自分の作成したアプリが表示されます。
表示されずに『Welcomeなんとか』って表示される場合は、『⌘+シフトキー+R』でキャッシュを消してみると現れると思います。