Firebase + React.jsでCloud Functions For Firebase を使ったプロジェクトの雛形作成

# (1)導入と環境構築
firebaseをフロントエンドから扱う際にsdkを利用してアプリ開発するサンプルはたくさんあったけれど、実際にはそれ以外にもメールやslackなどの外部サービスや、裏で処理させたくなる場合が多く実務ではcloud functionsを使ったバックエンドの実装も行うことが多いがそのサンプルがなかなか見当たらなかったので、自分用のアウトプットと参考になる人がいればと思い記事を書いてみることにしてみました。

またEmulatorを活用してローカルでfirestoreを扱いながら開発を進める方法も見てきます。

**(2)Firebase Emulatorを使ってREST APIを自作してFirestoreにデータを保存させる。**
https://qiita.com/sugimo-ne/items/71dbaa7108dfee487810


## 概要
Cloud Functions For FirebaseでバックエンドのREST APIを作成しつつ、
フロントエンドをReactで作り、
Firebaseで自分のAPIを簡単に作成する方法と
自作のREST APIとフロントエンドの連携方法を学びましょう。

またfirebaseのEmulatorを使用してローカルでFirebaseの開発をしてデプロイまでしてみます。

*firebaseのfunctionsをデプロイするためにクレジットカード情報が必要になります。

## 使用技術
- 言語/フレームワーク
  - javasript/React.js
  - javascript/node.js+Express.js

- 使用ツール
  - create-react-app
    - https://create-react-app.dev/
  - firebase cli
    - https://firebase.google.com/docs/cli?hl=ja
  - APIテストツール：postman
    - https://www.postman.com/
  
  - Firebase Local Emulator Suite
    - https://firebase.google.com/docs/emulator-suite


*投稿主の環境
- Node : v16.4.0
- npm : 7.18.1

## 準備

### reactアプリを作る
```
$ mkdir 〇〇

$ cd 〇〇

$ npx create-react-app . --use-npm

$ npm start
```
![スクリーンショット 2022-08-20 14.23.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652033/af3c79a8-25ef-f0e6-04b1-754691515d46.png)

http://localhost:3000
にアクセスするとreactのアプリが立ち上がっていることがわかります。

### Firebaseのログインとプロジェクト作成
https://firebase.google.com
アカウントがない方はアカウントを作成してください。
firebaseのコンソールにログインしたら[プロジェクトを追加]ボタンを押してボタンを押してプロジェクトを作成します。

プロジェクトの名前を決めて続行し、アナリティクスは無効にして作成します。

#### firestoreのデータベースを作成
- テストモードで開始
- ロケーションはasia-northeast1
![スクリーンショット 2022-08-20 14.34.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652033/cfab70d4-8c02-7681-df78-bbdf1a3dd8d8.png)
![スクリーンショット 2022-08-20 14.34.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652033/f9261db2-b275-28fd-d6f8-8a155152a38d.png)




#### githubのプロジェクトの作成
![スクリーンショット 2022-08-20 14.43.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652033/95e5a992-70cb-6179-874e-2e4348de2012.png)

### firebaseCLIでプロジェクトにfirebaseを追加する
作成したreactのプロジェクトにて
```
$ firebase init
```
対話形式でfirebaseの設定を行います。

1. 使うfirebaseの機能を選択
![スクリーンショット 2022-08-20 14.28.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652033/d0185fd6-831b-059f-13bc-7bb11fa79efe.png)

全て選択しておきます。(realtime databaseはおそらく使わないですが選択しておきました。)

2. プロジェクトのセットアップ
![スクリーンショット 2022-08-20 14.30.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652033/d59b4ce0-643b-6395-b79c-7a3abc6bc131.png)

Use an existing projectを選択

先ほどfirebaseのサイトで作成したプロジェクトを選択

＊cloudfunctionsにはjavascriptを使用します

github emulator以外に関して聞かれた質問にはyでエンターを押して設定ファイルはデフォルトでいくので何も入力せずにエンターで進みます。

githubの設定では
githubの**アカウント名/プロジェクト名**![スクリーンショット 2022-08-20 14.44.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652033/0882f652-bf57-45f2-eee0-df0185599590.png)

としてエンターを押します。
後はデフォルトの設定とyで進みましょう。

emulatorの設定は全てを選択してエンターを押して後はyとデフォルトで進みます。

そうするとプロジェクトの設定が完了します。
![スクリーンショット 2022-08-20 14.48.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652033/4bc7d4e2-bfd4-a993-ca92-67c1805da678.png)



### 動作確認

#### firebaseのエミュレータを起動
```
$ firebase emulators:start
```
#### 起動ができなかった場合
![スクリーンショット 2022-08-20 14.56.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652033/565809c1-0705-d38b-1279-cff4cb616f43.png)
使用済みのポートがある場合起動できずエラーが吐かれます。
ポートを切るか、firebase.jsonのポートの設定を変えるなどしてポートが被らないようにしましょう。

#### Emulatorにアクセスする
![スクリーンショット 2022-08-20 14.58.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652033/86ce01b7-a737-deed-7226-b8be617be7e9.png)
http://localhost:4000

でfirebaseエミュレーターにアクセスすることができます。
実際にここからアプリの開発をスタートしていきます。
次回は、cloudfunctionsをローカルでコーディングして動作確認するところから始めます。

https://qiita.com/sugimo-ne/items/71dbaa7108dfee487810