僕は技術ができない

技術のできないスーツ園児ニアが考えていること

Angular プロジェクトを Firebaseにデプロイするまでの流れ

今回は Angular プロジェクトを Firebase にデプロイし、アクセスするまでの流れをまとめます。

ケースとしては、とりあえずアプリをデプロイして繋ぐことができればOKというガバガバ仕様を想定してますので予めご了承ください。

Firebase側での作業

プロジェクトの作成

以下にアクセス
https://console.firebase.google.com/

Firebase アカウントを作成していない場合は作成してください。特記すべきことは特になく、案内に従って適当にポチポチしてればできます。

以下の設定値でプロジェクトを新規作成します。

  • プロジェクト名:deploy-test
  • Google Analytics の設定:デフォルトのFBアカウント

Authentication の設定

プロジェクトが作成されたら、左ペインから「Authentication」をクリックします。 「ログイン方法」タブから適当にログインプロバイダを選び、設定します。 今回は Google アカウントでログインするように設定します。

f:id:contemporarycuz:20190917160408p:plain

「プロジェクトの公開名」と「プロジェクトのサポートメール」を設定し、「有効にする」トグルを有効にし、「保存」をクリックします。

f:id:contemporarycuz:20190917160843p:plain

Database の設定

プロジェクトホームの左ペインから「Database」をクリックし「データベースの作成」をクリックします。

f:id:contemporarycuz:20190917161229p:plain

以下の設定値で Firestore を作成しました。セキュリティルールは個々の事情に合わせて選んでください。

  • セキュリティルール:テストモード
  • ロケーション:asia-northeast1

Storage の設定

プロジェクトホームの左ペインから「Storage」をクリックし、「スタートガイド」をクリックします。

f:id:contemporarycuz:20190917161958p:plain

セキュリティ保護ルールとロケーションはデフォルトのまま作成します。

一旦これで FIrebase 側の作業は終了です。

ローカル側での作業

Angular プロジェクトの作成〜ビルド

$ ng new deploy-test
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? (Use arrow keys)
❯ CSS 
  SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
  Less   [ http://lesscss.org                                             ] 
  Stylus [ http://stylus-lang.com                                         ]

プロジェクト直下に移動し、疎通確認します。

$ cd deploy-test
$ ng serve --open

一旦ビルドします。

$ ng build --prod

ツール類 のインストール(まだしていない場合)

Angular CLI

以下を実行します。

$ npm install -g @angular/cli --unsafe-perm
$ ng --version
Angular CLI: 8.3.4

Firebase Tools

以下を実行します。

$ npm install -g firebase-tools --unsafe-perm
$ firebase --version
7.3.2

Firebase へのデプロイ設定

以下を実行します。 今回は「Firestore」「Hosting」「Storage」を利用するので、それらにチェックを入れています。

$ firebase login
$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/(...略...)/deploy-test

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. 
 ◯ 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

プロジェクトセットアップでは、Firebaseの設定ファイルを指定します。 ここでは自動生成するために基本的にはデフォルト通りで設定しています。 ただし、注1〜注3では、デフォルトのままだと勝手に index.html を生成してしまうので、ビルドしたファイルの index.html に向くように設定します。 ここでは、「dist/deploy-test/index.html」を向くように設定し、overwriteされないようにしています。

=== 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
? Select a default Firebase project for this directory: deploy-test-(略) (deploy-test)
i  Using project deploy-test-(略) (deploy-test)

=== Firestore Setup

Firestore Security Rules allow you to define how and when to allow
requests. You can keep these rules in your project directory
and publish them with firebase deploy.

? What file should be used for Firestore Rules? firestore.rules

Firestore indexes allow you to perform complex queries while
maintaining performance that scales with the size of the result
set. You can keep index definitions in your project directory
and publish them with firebase deploy.

? What file should be used for Firestore indexes? firestore.indexes.json

=== 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? dist/deploy-test  // ☆注1☆
? Configure as a single-page app (rewrite all urls to /index.html)? Yes  // ☆注2☆
? File dist/deploy-test/index.html already exists. Overwrite? No  // ☆注3☆
i  Skipping write of dist/deploy-test/index.html

=== Storage Setup

Firebase Storage Security Rules allow you to define how and when to allow
uploads and downloads. You can keep these rules in your project directory
and publish them with firebase deploy.

? What file should be used for Storage Rules? storage.rules

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

Firebase へのデプロイ

$ firebase deploy

=== Deploying to 'deploy-test-(略)'...

i  deploying storage, firestore, hosting

(...略...)

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/deploy-test-()/overview
Hosting URL: https://deploy-test-().firebaseapp.com

Hosting URLにアクセスします。

f:id:contemporarycuz:20190917164546p:plain

これでデプロイまで行けました。