React Firebase入門　Hosting(デプロイ)

作ったWEBアプリをデプロイする事をしたいと思います。 Firebaseじゃなくて他のサーバーにもアップできるのですがFirebaseで完結したいので今回はFirebaseにアップします。ちなみに無料で使える容量に制限があります。普通に使えばそこまでいく事はないと思います。

この記事はReact Firebase入門シリーズです

よかったら他の記事も見てください。

やりたい事
ツールのインストールと初期設定
環境変数の設定
reactのコンパイル
デプロイ
感想

やりたい事

作ったWEBアプリを公開する

ツールのインストールと初期設定

Firebase－CLIの導入

以下のコマンドをターミナルで実行し、Firebase－CLIをインストールする。
（管理者権限で実行する)

$ npm install -g firebase-tools

Googleアカウントを紐づけ

$ firebase login     
# 実行後、メールアドレスなどを入力する

Firebaseの初期化

プロジェクトFolderのルートに移動して以下を実行してFirebaseを初期化

$ cd ProjectFolder
$ firebase init

初期化後、以下のようにターミナルから、色々聞かれるので

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

? 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: Configure Firebase Realtime Database and deploy 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
 ( ) Emulators: Set up local emulators for Firebase features
 ( ) Remote Config: Get, deploy, and rollback configurations for Remote Config

hostingの部分をスペースで選択してEnterキーを押します

◯ Hosting: Configure and deploy Firebase Hosting sites

を選択し、 スペースキー を押した後に Enter

次にoptionを聞かれるので

? Please select an option:
> Use an existing project（既にProjectがある場合）
  Create a new project（Projectを新規作成）
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project

Projectがあるので「Use an existing project」を選択します

? Select a default Firebase project for this directory: (Use arrow keys)
> angular-study-chat (angular-study-chat)
  learn-firebase-masalib (Learn-Firebase-masalib)
  masalib-hosting (masalib-hosting)
  testpwa-32138 (testpwa)

Projectを選択してEnterキーを押します

=== 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? (public)

アップするFolderがProjectFolderのどこにあるのかを聞いています。 create-react-appで作っているなら「build」になると思います。（設定で変えれるのでweb-packの設定を確認

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

リライトルールを聞いてくるの「Y」を入力してEnterキーを押します。 Nを押した場合は404.html が作成される

https://qiita.com/megane42/items/96356a88d67fcc1499ee

Set up automatic builds and deploys with GitHub?

Githubと連携してアップするのかと聞かれるので、「N」を入力します

Yと入力した場合はgithubの設定などやらないといけません。私はやっていないので以下のページを参照してください

https://qiita.com/taptappun/items/4a8f7ecaa3f91cb21be9

? File public/index.html already exists. Overwrite? (y/N)

Hello,Firebaseみたいなページを作ってくれますが必要ないので「N」を入力します

入力が終わるとProjectFolderの配下に

/firease.json

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

/.firebaserc

{
  "projects": {
    "default": "learn-firebase-masalib"
  }
}

というファイルができます

環境変数の設定

Firebaseの設定を環境変数にいれている場合は .env.production.localのファイルを作成して記載する必要があります

reactのコンパイル

自分が作ったプログラムをアップするためのファイルにまとめてくれます

$ firebase init

デプロイ

reactのbuild

npm run-script build

デプロイ前の最終確認

アップする前にローカルで最終確認します

serve -s build

#   ┌───────────────────────────
#   │                                                    │
#   │   Serving!                                         │
#   │                                                    │
#   │   - Local:            http://localhost:5000        │
#   │   - On Your Network:  http://192.168.10.101:5000   │
#   │                                                    │
#   │   Copied local address to clipboard!               │
#   │                                                    │
#   └───────────────────────────

もしserveをインストールしていない場合は

$ npm install -g serve

デプロイ

$ firebase deploy
#=== Deploying to 'learn-firebase-masalib'...
#
#i  deploying hosting
#i  hosting[learn-firebase-masalib]: beginning deploy...
#i  hosting[learn-firebase-masalib]: found 16 files in build
#+  hosting[learn-firebase-masalib]: file upload complete
#i  hosting[learn-firebase-masalib]: finalizing version...
#+  hosting[learn-firebase-masalib]: version finalized
#i  hosting[learn-firebase-masalib]: releasing new version...
#+  hosting[learn-firebase-masalib]: release complete
#
#+  Deploy complete!
#
#Project Console: https://console.firebase.google.com/project/learn-firebase-masalib/overview
#Hosting URL: https://learn-firebase-masalib.web.app