【超簡潔】ReactとFirebaseの初期設定の方法について解説【デプロイまでスムーズ】
こんにちは。エンジニアのmasakiです。
ReactとFirebaseを使ってwebアプリを開発するときに、初期設定のやり方って結構忘れがちですよね？
実は僕自身も、毎回手順がよくわからなくなって、開発になかなか取りかかれないということが何度かありました。
そこで今回は、ReactとFirebaseの初期設定の方法について解説していきます。
この記事は、以下が前提条件となっています。
前提条件
- node.jsがインストールされている
- vscodeがインストールされている
- Googleアカウントを持っている
まだの方は、先に上記を実施してからこちらの記事をお読みください。
目次
Reactの初期設定
プロジェクトの作成
プロジェクトの作成をするには以下のコマンドをターミナルで実行します。
今回はtwitter-cloneというプロジェクト名にしています。
npx create-react-app twitter-cloneプロジェクトを作成したら、そのフォルダに移動します。
cd twitter-cloneそして、以下のコマンドを打って、ローカルで起動してみましょう。
yarn start※ターミナルにコマンドを実行したいときは、ctrl+cで落としてください。
プロジェクト内の不要な箇所の削除
プロジェクトを作成したままだと、使わないコードやファイルがあるので、そちらを削除していきます。
App.jsの編集
以下のheader部分を削除します。
srcフォルダの中身を編集
以下を実施してください。
- App.cssの中身を全削除
- App.test.jsの削除
- logo.svgの削除
- reportWebVitals.jsの削除
- index.js中でreportWebVitals.jsを使用している部分の削除（※1）
- setupTests.jsの削除
※１の部分が少しわかりにくいと思ったので補足。
以下でいうと5行目と17行目を削除します。
コンポーネントの作り方
srcフォルダの直下にcomponentsというフォルダを作成するのが良いかと思います。
components直下の構成は、ご自身のわかりやすいようにしてください。
ちなみにvscodeにReactのextentionがインストールされている場合は、コンポーネントのファイルを作成するときに、rafceと打ってtabを押して頂くと補完機能が使えるので便利です。
このような感じで雛形を簡単に作成できるので是非活用してみてください。
materialUIのインストール
ほとんどの場合、materialUIも使用するので、こちらもインストールしておきます。
materialUIの公式ページを見ると、以下のように記載されています。
今回はyarnで実行したいので、以下のコマンドをターミナルにコピペして実行します。
yarn add @mui/material @emotion/react @emotion/styledエラーが出ました
ちなみに僕はnode.jsのバージョンが合っていないというエラーが出てハマったので、node.jsのバージョンをアップしてから再度上記のコマンドを実行しました。
僕の場合はnodenvでnodeのバージョンを管理しているので、
まずは
node -vで自身のnodeのバージョンを確認。
nodenv install -lで、インストールできるnodeのバージョンを確認。
nodenv local バージョンでnodeのバージョンを指定してインストール。
再度
node -vで確認すると、プロジェクト内のnodeのバージョンがきちんとアップされており、エラーも解決しました。
アイコンの使用
さて、少し横道に外れましたが、このままだとアイコンはまだ使えません。
なのでiconsのページに飛びましょう。
すると、以下のようにインストール方法が書かれているので、
yarn add @mui/icons-materialをターミナルにコピペして実行してください。
これでmaterialUIの設定も完了になります。
以上でReactのプロジェクトでお決まりの設定は完了です。
Firebaseの初期設定
次はFirebaseの初期設定をやっていきます。
アプリの登録
最初に、先ほど作成したReactのアプリを、Firebaseの管理画面に登録します。
まずは以下のようにfirebaseと検索します。
Firebase-Googleをクリックします。
すると以下のようなfirebaseの画面に飛べるので、「使ってみる」をクリック。
プロジェクトを作成をクリック。
プロジェクト名を入力して、「続行」をクリック。
今回は使わないので、Google Analyticsの設定は無効にして、「プロジェクトを作成」をクリック。
（もし使うのであればチェックを入れておきましょう。）
これでプロジェクトの作成が完了します。
次はプロジェクトの初期設定です。
今回はwebを使うので、webのアイコンをクリックします。
Firebase Hostingの設定の箇所にもチェックを入れて、「アプリを登録」をクリック。
すると、「Firebase SDK の追加」と出てきますが、こちらは後でやるので、一旦「次へ」を押します。
こちらも「次へ」をクリックしましょう。
こちらも「コンソールに進む」をクリックしましょう。
これでとりあえず初期設定が完了しました。
Firebase SDKの追加
ホーム画面に戻り、歯車のアイコンをクリックすると、「プロジェクトの設定」という項目があると思うので、そちらをクリック。
すると、以下のような画面があると思います。
上記の手順に従って、順番に実行していきましょう。
まずは以下のコマンドをターミナルで実行。
これでfirebaseがインストールされます。
npm install firebase次は、先ほど作成したReactのプロジェクトのsrcフォルダの直下に、firebase.jsというファイルを作成してください。
そして、ご自身のFirebaseの画面から、以下のソースコードをコピペしてください。
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// 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
const firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);あとはfirebase.jsに以下のように記述していけば、他のファイルでdbという変数をインポートしてfirebaseの様々な機能を利用できるというわけですね。
※getFirestore()はインポートが必要です。
const db = getFirestore(app);
export default dbここまでの手順を終えていれば、Cloud Firestoreの機能をアプリ内で使用することができます。
AuthenticationやCloud Storageなども基本的な使い方は同じです。
（それぞれの機能の使い方についてはドキュメントを参照してください。）
Firebase CLIのインストール
最後に、Firebase Hostingにデプロイしていきます。
そのためには、Firebase CLIをインストールする必要があります。
左側の地球のアイコンをクリックし、「始める」をクリックしてください。
すると、Firebase CLIのインストールの画面になります。
以下のコマンドをコピペしてターミナルで実行してください。
実行できたら「次へ」をクリックします。
npm install -g firebase-toolsFirebase Hostingへのデプロイ
以下のような画面になっているかと思います。
以下のコマンドを実行して、ターミナルからFirebaseにログインしましょう。
firebase loginログインしたら、以下のコマンドを実行します。
firebase initFirebaseのどの機能を使いたいのかを聞かれるので、Hostingを選択します。
このとき、Github Actionsでデプロイするのは、必須ではなくオプションとしておきたいので以下の方を選択します。
既存のプロジェクトをデプロイしたいので、Use an existing projectを選択してEnterします。
デプロイしたいプロジェクトを選んでEnter。
ビルドしたファイル群はbuildというフォルダの直下に置きたいので、buildと入力してEnter。
SPA（シングルページアプリケーション）の開発の場合は、yでEnter。
今回はGithubを使って自動でデプロイしないので、nでEnter。
Firebase initialization complete!という文言が表示されればOKです。
ここまで完了したら、以下の画面に戻り、「次へ」ボタンをクリックします。
すると、以下のような画面になります。
ターミナルで、以下のコマンドを実行してください。
firebase deployこれでデプロイが完了しました。
画面に記載されているURLをコピーしてブラウザからアクセスしてみてください。
僕の場合はtwitter-clone-xxxxxx.web.appというURLになります。
アクセスしてみると、以下のような画面になってしまって焦ると思います。
これは、ビルドがまだできていないためです。
なので、以下のコマンドを実行してビルドしましょう。
npm run buildビルドが完了した後に再度
firebase deployしてください。
これで本当にデプロイが完了しました。
先ほどのURLに再度アクセスしてみると、ご自身の開発したアプリがきちんと確認できると思います。
ドメインを取得したい場合は、Firebaseからではなく、ムームードメインなどの別のドメインサービスからドメインを購入する必要があります。
これでFirebaseの設定は以上となります。
参考
ReactやFirebaseの基本的な使い方については、『React.js & Next.js超入門』という書籍が参考になるかと思います。
また、Firebaseが学べるプログラミングスクールについては以下をご覧ください。
» 【2022年版】Firebaseが学べるプログラミングスクールを紹介【現役エンジニアがオススメ】