はじめに
表題通り、Reactで会員サイトを作成していきます。
今回はViteを活用して、環境構築を実施していきます。
Viteで環境構築
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を実施。
→http://localhost:5173/ で出ればOKです！！
Firebaseの環境設定
→後で必要な情報になります。
→CLI経由でデプロイします。ローカルPCに下記コマンドを実行しておきましょう。
FirebaseのCLIコマンドのinstall
yarn global add firebase-tools
Firebaseのログイン
firebaseへのLogin
firebase login
→firebase login実行後、URLが表示されます。
そこから、Googleログインを実施し下記画面が出ればOKです。
Firestoreの構築
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)
そのままエンターを押すとエラーが出ます。
スペースで選択するので注意しましょう
=== 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へのデプロイ
~/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
プロジェクト名はmember-ship-c7eacがhost名になるみたいですね。
安易にプロジェクト名を公開するとURLバレちゃうので気をつけましょう！
僕のプロジェクトも後で作り直しておきます😅