はじめに
初めまして、ゆうです。
久しぶりにReact触ろうとしたが、CRAは非推奨ということでReact with Viteで環境構築をしていきたいと思います。FirebaseでReactのWebアプリをデプロイした時の自分用のメモです。簡略化してわかりにくいかもしれません。
プロジェクト作成
Vite でプロジェクトを作成を作成していきます。
npm create vite@latest project_name
上記のコマンドを入力するとframeworkの設定が求められます。今回はReactに設定し、言語をJavaScriptにします。
> npx
> create-vite wedding-app
✔ Select a framework: › React
✔ Select a variant: › JavaScript
Scaffolding project in /home/username/React/project_name...
Done. Now run:
これでプロジェクト作成できました。
以下のコマンドを入力しましょう。
cd project_name
npm install
npm run dev
開発サーバーを起動して、プロジェクトが正しくセットアップされたことを確認します。
FireBase
FireBaseの登録をします。
https://firebase.google.com/
firebaseでプロジェクトを作成した後、ターミナルで以下を入力します。
npm install firebase
npm install -g firebase-tools
firebase login
FirebaseHostingの設定をしていきます。
firebase init hosting
=== 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
i Skipping write of dist/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete!
ビルドして、デプロイします。
npm run build
firebase deploy
URLが返ってくるのでアクセスするとビルドができているか確認してください。