【Firebase】 ReactでFirebaseを繋げる

## 概要
Firebase + React で作るTodoリストハンズオンの第二回目となります。このハンズオン通りに進めてもらってもいいですし、FirebaseとReactの繋げ方を知りたいという方も対象です！

## 前回

https://qiita.com/yousuke_1112/items/720dcfbae1650556f112

## 目次
[Reactプロジェクトの立ち上げ](https://qiita.com/yousuke_1112/items/720dcfbae1650556f112)
[Firebaseの初期化](https://qiita.com/yousuke_1112/items/948021e4f037855e49a0)←今回
[FireAuth＋FireStore]()
[Todoリストの作成]()


## 前提
ご自身のパソコンに、Node.jsがインストールされてる前提になります。
もしまだインストールされていない方は[こちら](https://nodejs.org/ja/download/)からご自身のOSの最新バージンをインストールしてください。

## 仕様
アプリの仕様は以下の通りです。
- サインアップ、サインインの実装（メールアドレス、パスワード）
- ユーザーごとでにドキュメントを生成

## 使用するもの
- Firebase
    - FireStore
    - FireAuth
- React
    - react-router-dom

### セットアップ
1. [コンソール](https://console.firebase.google.com/u/0/?hl=ja)にログインします
1. 「プロジェクトを作成」を選択します
1. プロジェクト名を決めて、規約に同意し、「実行」を押します
1. そのまま「続行」を押します
1. アナリティクスの地域を選択できるので、「日本」に選択、規約に同意して「プロジェクトを作成」を押します。（プロジェクトを作成するのに数分かかる場合があります）
1. 「ウェブ」を選択します。
![スクリーンショット 2022-09-30 12.48.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2868037/fc807ccb-5749-d4b5-423b-1940cc5ac3a1.png)

1. マイウェブアプリにアプリ名を入力し、アプリを登録します。（ここまできたら「FirebaseSDKの追加」へ）

## FirebaseSDKの追加
### firebase.js
srcディレクトリのfirebase.jsを修正します。
```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ファイルを作成します。
```.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を使うことができます。
試しにこのままアプリをデプロイしてみます。

ターミナル、もしくはコマンドプロンプトで以下のコマンドを打ちます。
```shell
firebase login #Firebaseにログインします。
firebase init hosting
```
`firebase init hosting`とすると、以下のように尋ねられるので下の通りに答えてください。
```shell
? 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の初期化が終わりました。デプロイしていきます！
```shell
npm run build #デプロイするためのプロジェクトをビルドします
firebase deploy #firebaseへログインします。
```
以下のように出れば、成功です。
```shell
=== 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で用意されているサービスを利用して、アプリの機能を実装していきます！！
## 最後に
プログラミング初心者なので、至らないところがあるかも知れません...
もし動かなかったり、全然できなかったり、また、アドバイス等ありましたら気軽にコメントいただけると幸いです！！