中安拓也のブログ

プログラミングについて書くブログ

【Angular + Firebase】アプリケーションをデプロイする

Angular Firebase Angular Material JavaScript Typescript

はじめに

AngularとFirebaseを使って作成したアプリをFirebaseのHostingという機能を使ってデプロイします。

前提条件

  • Angularプロジェクトは作成ずみ
  • FirestoreやAutheticationを使用するためにFirebaseのプロジェクトも既に作成している

環境

ng --versionコマンドの実行結果

Angular CLI: 8.3.20
Node: 12.13.1
OS: darwin 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.20
@angular-devkit/build-angular     0.803.20
@angular-devkit/build-optimizer   0.803.20
@angular-devkit/build-webpack     0.803.20
@angular-devkit/core              8.3.20
@angular-devkit/schematics        8.3.20
@angular/cdk                      7.3.7
@angular/cli                      8.3.20
@angular/fire                     5.2.3
@angular/material                 7.3.7
@ngtools/webpack                  8.3.20
@schematics/angular               8.3.20
@schematics/update                0.803.20
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.39.2

デプロイ準備

では、Firebase Hostingへのデプロイの準備を初めていきます。まず、ターミナルからfirebaseを扱うツールをグローバルインストールします。

sudo npm i -g firebase-tools

インストールが終わったら下記のコマンドでfirebaseにアクセスします。

firebase login

firebase loginコマンドを実行すると、Firebaseがエラーレポートを収集していいか聞かれますので、お好みでYかnを入力してエンターキーを押下します。

i  Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI usage and error reporting information? Yes
i  To change your data collection preference at any time, run `firebase logout` and log in again.

質問に答えると、ブラウザが開かれてGoogleアカウントでのログインを求められるので、Firebaseプロジェクトを作成した時のGoogleアカウントでログインします。

f:id:l08084:20200620175304p:plain
Googleアカウントでのログインを求められる

firebaseへのログインが完了したら、firebase initというコマンドをターミナルに入力します。

firebase init

コマンドを入力すると、Firebaseのどの機能をセットアップするか聞かれるので、Hostingを選択します。

f:id:l08084:20200620175806p:plain
Hostingを選択する

続いて、「このディレクトリーに対してデフォルトで設定するFirebaseプロジェクトを選択してください」という質問が表示されます。

FirestoreやAutheticationを使用するためにFirebaseのプロジェクトを既に作成ずみなので、Use an existing projectを選択します。

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: 
  Use an existing project 
  Create a new project 
❯ Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project

Use an existing projectを選択した後に、Firebaseプロジェクトの一覧が表示されるので、該当のプロジェクトを選択します。(今回はtaikinプロジェクトを選択する)

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: taikin (taikin)
i  Using project taikin (taikin)

続いて、「公開用のディレクトリーとしてどのディレクトリを使用するか」質問されるので、dist/project_nameを入力します。(今回はdist/kintai)

=== 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?

最後に、SPAアプリケーションかどうか質問されるので、YESと回答します。

? Configure as a single-page app (rewrite all urls to /index.html)? Yes

このように質問に回答していくと、次のようなfirebase.jsonファイルが作成されます。

もし、質問に対する回答を間違えても最終的にfirebase.jsonファイルを手動で修正すれば大丈夫です。

{
  "hosting": {
    "public": "dist/project_name",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [{
      "source": "**",
      "destination": "/index.html"
    }]
  }
}

アプリケーションを本番ビルドする

Angularプロジェクトを本番ビルドして、dist配下に成果物が作成されるのを確認します。

もし、src/enviroment.prod.tsファイルに適切な設定をしていない場合は、事前に設定を完了させておく必要があります。今回は本番環境と開発環境で同じFirebaseのプロジェクトを使用しているため、src/enviroment.tsの内容をそのままsrc/enviroment.prod.tsにコピーしました。

ng build --prod

デプロイ実施

ng build --prodによる本番ビルドが完了したら、firebase deployコマンドを実施して、いよいよデプロイを実施します。

$ firebase deploy

=== Deploying to 'taikin'...

i  deploying hosting
i  hosting[taikin]: beginning deploy...
i  hosting[taikin]: found 25 files in dist/kintai
✔  hosting[taikin]: file upload complete
i  hosting[taikin]: finalizing version...
✔  hosting[taikin]: version finalized
i  hosting[taikin]: releasing new version...
✔  hosting[taikin]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/taikin/overview
Hosting URL: https://taikin.web.app

デプロイが正常に完了すると、上記のようにURLが表示されるので、デプロイしたアプリケーションにアクセスすることができます。

参考サイト

Firebase CLIでAngularアプリをFirebase Hostingにデプロイする - Qiita

5分でAngularチュートリアルアプリをFirebaseにデプロイする方法 - Qiita