React×Firebaseで会員サイトを作成する(Step1:Viteの環境構築、FirebaseにDeploy)

## はじめに
表題通り、Reactで会員サイトを作成していきます。
今回はViteを活用して、環境構築を実施していきます。

## Viteで環境構築

```shell:viteのinstall
~/develop/react$ yarn create vite react_membership --template react-ts
yarn create v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > ts-node@10.9.1" has unmet peer dependency "@types/node@*".
[4/4] 🔨  Building fresh packages...
success Installed "create-vite@5.1.0" with binaries:
      - create-vite
      - cva

Scaffolding project in /Users/kawamurakouji/develop/react/react_membership...

Done. Now run:

  cd react_membership
  yarn
  yarn dev

✨  Done in 0.92s.
```
→上記に記載の通り、`yarn`後に`yarn dev`を実施。

![スクリーンショット 2024-01-08 14.59.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/5633ff2f-7a9f-1efd-14c2-5c6b997157ff.png)
→http://localhost:5173/ で出ればOKです！！

## Firebaseの環境設定
![スクリーンショット 2024-01-08 15.01.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/08cbe0a1-23c0-ea22-8123-34e7cbedf0e2.png)

![スクリーンショット 2024-01-08 15.05.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/f4be144e-266e-49bd-a7a2-9571b4fedd45.png)

![スクリーンショット 2024-01-08 15.06.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/bd69005d-a389-aac7-046c-6fb379880747.png)
→後で必要な情報になります。

![スクリーンショット 2024-01-08 15.11.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/ba25c574-edcd-f6c7-aed3-d6cbec461b98.png)
→CLI経由でデプロイします。ローカルPCに下記コマンドを実行しておきましょう。

### FirebaseのCLIコマンドのinstall
```shell:
yarn global add firebase-tools
```

### Firebaseのログイン
```shell:firebaseへのLogin
firebase login
```
→`firebase login`実行後、URLが表示されます。
そこから、Googleログインを実施し下記画面が出ればOKです。
![スクリーンショット 2024-01-08 15.13.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/bd157b7d-8ea5-9755-d6c0-720020e65f20.png)

## Firestoreの構築
```shell:firebaseのconfig作成
~/develop/react/react_membership$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/kawamurakouji/develop/react/react_membership

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, 
<i> to invert selection, and <enter> to proceed)
 ◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default instance
 ◯ Firestore: Configure security rules and indexes files for Firestore
 ◯ Functions: Configure a Cloud Functions directory and its files
❯◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
 ◯ Hosting: Set up GitHub Action deploys
 ◯ Storage: Configure a security rules file for Cloud Storage
 ◯ Emulators: Set up local emulators for Firebase products
(Move up and down to reveal more choices)
```
:::note warn
そのままエンターを押すとエラーが出ます。
スペースで選択するので注意しましょう
:::

```shell:
=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: member-ship-c7eac (member-ship)
i  Using project member-ship-c7eac (member-ship)

=== 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? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
✔  Wrote dist/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!
```

## Firebaseへのデプロイ
```shell:
~/develop/react/react_membership$ firebase deploy

=== Deploying to 'member-ship-c7eac'...

i  deploying hosting
i  hosting[member-ship-c7eac]: beginning deploy...
i  hosting[member-ship-c7eac]: found 1 files in dist
✔  hosting[member-ship-c7eac]: file upload complete
i  hosting[member-ship-c7eac]: finalizing version...
✔  hosting[member-ship-c7eac]: version finalized
i  hosting[member-ship-c7eac]: releasing new version...
✔  hosting[member-ship-c7eac]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/member-ship-c7eac/overview
Hosting URL: https://member-ship-c7eac.web.app
```
→デプロイ先のURLが出てきます。
https://member-ship-c7eac.web.app　

![スクリーンショット 2024-01-08 15.39.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/8b3abc33-8211-e5c7-32bc-eef5d18fe19a.png)

:::note warn
プロジェクト名は`member-ship-c7eac`がhost名になるみたいですね。
安易にプロジェクト名を公開するとURLバレちゃうので気をつけましょう！
僕のプロジェクトも後で作り直しておきます😅
:::