ionic browserでビルドしたアプリをFirebase Hostingにデプロイする

ionicのビルド

ionic cordova platform add  browser
ionic cordova build  browser

Firebaseにデプロイ

• index.htmlが作られたディレクトリに移動

cd  platforms/browser/www

• Firebaseへのログインと初期設定

 $ firebase login

   ブラウザが立ち上がるのでログインする

 $ firebase init

     🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥     🔥🔥🔥     🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥     🔥🔥 🔥🔥       🔥🔥     🔥🔥  🔥🔥   🔥🔥  🔥🔥       🔥🔥
     🔥🔥🔥🔥🔥🔥    🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥   🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥    🔥🔥  🔥🔥       🔥🔥     🔥🔥 🔥🔥     🔥🔥       🔥🔥 🔥🔥
     🔥🔥       🔥🔥🔥🔥 🔥🔥     🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥     🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥

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

{PATH}/ionic/msg-firestore/platforms/browser/www

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites

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

? Select a default Firebase project for this directory: {PROJECT_NAME}

=== 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? ＜＜公開したいドキュメントルートなので、不要な場合は入力しない
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔  Wrote /index.html

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

✔  Firebase initialization complete!

• firebase.jsonが出来上がる

jsonの設定などは、下記を参考に設定する。
シングルページアプリケーションなので、全てindex.htmlに飛ばしている

デプロイ構成  |  Firebase

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

• デプロイ

$ firebase deploy

=== Deploying to '{PROJECT_NAME}'...

i  deploying hosting
i  hosting[{PROJECT_NAME}/]: beginning deploy...
i  hosting[{PROJECT_NAME}/]: found 61 files in ./
✔  hosting[{PROJECT_NAME}/]: file upload complete
i  hosting[{PROJECT_NAME}/]: finalizing version...
✔  hosting[{PROJECT_NAME}/]: version finalized
i  hosting[{PROJECT_NAME}/]: releasing new version...
✔  hosting[{PROJECT_NAME}/]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/{PROJECT_NAME}/overview
Hosting URL: https://{PROJECT_NAME}.firebaseapp.com

• URLにアクセスして表示されることを確認

Hosting URL: https://{PROJECT_NAME}.firebaseapp.com