deploy to firebase

React

make Project and register App

[https://blog.shinonome.io/yi-nian-sheng/]

firebaseホームページで「プロジェクトを作成」し、</>ボタンを押してウェブアプリを登録しておくこと

Firebase Hosting: アプリ公開用のサーバーなので「設定する」にチェック

project name: reactApp4

app name: calendar

src > firebase.js （FirebaseSDKの追加）

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
   /// 省略 ///
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

Firebase CLIのインストール

npm install -g firebase-tools

インストールされたか確認します

firebase --version

Firebase Hosting へのデプロイ

$firebase コマンドを使うために、firebaseをインストールします

cd myApp
npm install firebase

これによって次のコマンドが使えるようになりました

$firebase login
$firebase init
$firebase deploy

Firestore Database

firebaseホームページのCloud Firestoreでデータベースをテストモードで新規作成します。

「コレクションを開始」ボタンからデータを何個か入れておきます。

collection ID: posts

document ID: post1, post2, post3

field: title(string), date(timestamp), contents(string)

Storage

ストレージを使うためには無料プラン（Spark）から従量課金制プラン（Blaze）にアップグレードしないといけません。今回は使わないでおきます。

src > firebase.js （コードの追記）

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore } from "firebase/firestore";  <-- データベースを使う場合は追加
import { getStorage } from "firebase/storage"; <-- ストレージを使う場合は追加
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
   /// 省略 ///
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const db = getFirestore(app); <-- データベースを使う場合は追加
const storage = getStorage(app);  <-- ストレージを使う場合は追加

export default db; <-- 追加

Firebaseにログインする

firebase login

Firebaseの初期化

firebase init  // ローカルのpackage.jsonを見て、Firebaseサーバー側がパッケージをインストールします

? Which Firebase features do you 
want to set up for this directory?
---> Hosting と Firestore　にチェックを入れてEnter

? Please select an option
---> Use an existing project  を選択　　※1

? What do you want to use as your 
public directory? (public)
---> デプロイするディレクトリを選択します。何も入力せずにEnterを押せばpublicディレクトリをデプロイできます

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
---> Noを選びます（404.htmlが作成されます）Yesを選ぶとfirebase.jsonにリライト設定が追記されます

? Set up automatic builds and deploys with GitHub?
---> No

? File public/index.html already 
exists. Overwrite?
---> Noを選びます（Yesを選ぶとindex.htmlがFirebase仕様になり、<div id="root"></div>が削除されてしまいます）

+  Firebase initialization complete!

※1 … Error: Failed to list Firebase projects. See firebase-debug.log for more info.　というエラーが発生する場合は、一度ログアウト（firebase logout）してから再度ログイン（firebase login）してください

Firebaseにデプロイする

npm run build
firebase deploy

Hosting URLにアクセスして真っ白な画面が出てきます。

これはpublicフォルダの中にある初期ファイルのindex.htmlがデプロイされたためです。

publicディレクトリの中身がデプロイされるため、作成したindex.htmlとstaticディレクトリをpublicディレクトリの中に移動させます。（index.htmlは上書きします）

その後でもう一度 firebase deploy します。

参考【https://zenn.dev/umi_mori/books/1f8ec725ae4b90/viewer/3030e8】

BACK