概要
Firebase + React で作るTodoリストハンズオンの第二回目となります。このハンズオン通りに進めてもらってもいいですし、FirebaseとReactの繋げ方を知りたいという方も対象です！
前回
目次
Reactプロジェクトの立ち上げ
Firebaseの初期化←今回
FireAuth＋FireStore
Todoリストの作成
前提
ご自身のパソコンに、Node.jsがインストールされてる前提になります。
もしまだインストールされていない方はこちらからご自身のOSの最新バージンをインストールしてください。
仕様
アプリの仕様は以下の通りです。
- サインアップ、サインインの実装（メールアドレス、パスワード）
- ユーザーごとでにドキュメントを生成
使用するもの
- Firebase
- FireStore
- FireAuth
- React
- react-router-dom
セットアップ
-
コンソールにログインします
-
「プロジェクトを作成」を選択します
-
プロジェクト名を決めて、規約に同意し、「実行」を押します
-
そのまま「続行」を押します
-
アナリティクスの地域を選択できるので、「日本」に選択、規約に同意して「プロジェクトを作成」を押します。（プロジェクトを作成するのに数分かかる場合があります）
-
「ウェブ」を選択します。
-
マイウェブアプリにアプリ名を入力し、アプリを登録します。（ここまできたら「FirebaseSDKの追加」へ）
FirebaseSDKの追加
firebase.js
srcディレクトリのfirebase.jsを修正します。
import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';
import { getAuth } from 'firebase/auth';
const firebaseConfig = {
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID,
measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
};
// Initialize Firebase
export const app = initializeApp(firebaseConfig);
export const db = getFirestore();
export const storage = getStorage();
export const auth = getAuth();
ここはコピーペーストで大丈夫です。
今後使うサービスをそれぞれ初期化しています。
.env.local
ディレクトリの直下に.env.localファイルを作成します。
REACT_APP_FIREBASE_API_KEY=""
REACT_APP_FIREBASE_AUTH_DOMAIN=""
REACT_APP_FIREBASE_PROJECT_ID=""
REACT_APP_FIREBASE_STORAGE_BUCKET=""
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=""
REACT_APP_FIREBASE_APP_ID=""
REACT_APP_FIREBASE_MEASUREMENT_ID=""
このファイルの""に先ほど、SDKのSDKの設定と構成で確認した情報を入力してください。
このファイルを作ることで、外部に大事な情報を秘匿化します。
これでFirebase のSDKが追加されました。これでFirebaseを使うことができます。
試しにこのままアプリをデプロイしてみます。
ターミナル、もしくはコマンドプロンプトで以下のコマンドを打ちます。
firebase login #Firebaseにログインします。
firebase init hosting
firebase init hostingとすると、以下のように尋ねられるので下の通りに答えてください。
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: my-project-f2f2a (my project)
i Using project my-project-f2f2a (my project) #ここは個人により変更
=== 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? build
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
? File build/404.html already exists. Overwrite? No
i Skipping write of build/404.html
? File build/index.html already exists. Overwrite? No
i Skipping write of build/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete!
これhostingの初期化が終わりました。デプロイしていきます！
npm run build #デプロイするためのプロジェクトをビルドします
firebase deploy #firebaseへログインします。
以下のように出れば、成功です。
=== Deploying to 'my-project-f2f2a'...
i deploying hosting
i hosting[my-project-f2f2a]: beginning deploy...
i hosting[my-project-f2f2a]: found 2 files in build
✔ hosting[my-project-f2f2a]: file upload complete
i hosting[my-project-f2f2a]: finalizing version...
✔ hosting[my-project-f2f2a]: version finalized
i hosting[my-project-f2f2a]: releasing new version...
✔ hosting[my-project-f2f2a]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/my-project-f2f2a/overview
Hosting URL: https://my-project-f2f2a.web.app #こでがデプロイしたURL
これで簡単にデプロイすることができました！！
次回
今回はFirebaseを繋げてデプロイするとことまで実装しました。
次の回では実際にFirebaseで用意されているサービスを利用して、アプリの機能を実装していきます！！
最後に
プログラミング初心者なので、至らないところがあるかも知れません...
もし動かなかったり、全然できなかったり、また、アドバイス等ありましたら気軽にコメントいただけると幸いです！！