FirebaseとReactとVite

dai@Mac-Studio VoiceAITest % npm create vite@latest voice-sample-app
Need to install the following packages:
  create-vite@5.3.0
Ok to proceed? (y) y
✔ Select a framework: › React
✔ Select a variant: › JavaScript

Scaffolding project in /Projects/VoiceAITest/voice-sample-app...

Done. Now run:

  cd voice-sample-app
  npm install
  npm run dev

dai@Mac-Studio VoiceAITest % cd voice-sample-app 
dai@Mac-Studio voice-sample-app % npm install
dai@Mac-Studio voice-sample-app % npm run dev

dai@Mac-Studio voice-sample-app % npm install firebase
dai@Mac-Studio voice-sample-app % npm install -g firebase-tools

dai@Mac-Studio voice-sample-app % firebase init
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter 
to confirm your choices. 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

=== 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: voice-sample-app-***** (voice-sample-app)
i  Using project voice-sample-app-***** (voice-sample-app)


=== Firestore Setup

Firestore Security Rules allow you to define how and when to allow
requests. You can keep these rules in your project directory
and publish them with firebase deploy.

? What file should be used for Firestore Rules? firestore.rules

Firestore indexes allow you to perform complex queries while
maintaining performance that scales with the size of the result
set. You can keep index definitions in your project directory
and publish them with firebase deploy.

? What file should be used for Firestore indexes? firestore.indexes.json


=== Functions Setup
Let's create a new codebase for your functions.
A directory corresponding to the codebase will be created in your project
with sample code pre-configured.

See https://firebase.google.com/docs/functions/organize-functions for
more information on organizing your functions using codebases.

Functions can be deployed with firebase deploy.

? What language would you like to use to write Cloud Functions? JavaScript
? Do you want to use ESLint to catch probable bugs and enforce style? No
✔  Wrote functions/package.json
✔  Wrote functions/index.js
✔  Wrote functions/.gitignore
? Do you want to install dependencies with npm now? Yes
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported

added 490 packages, and audited 491 packages in 16s

50 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


=== 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? Yes
? File dist/index.html already exists. Overwrite? No

? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) 
f60k/voice-sample-app


? Set up the workflow to run a build script before every deploy? Yes
? What script should be run before every deploy? npm run build
? Set up automatic deployment to your site's live channel when a PR is merged? Yes
? What is the name of the GitHub branch associated with your site's live channel? main


=== Storage Setup

? What file should be used for Storage Rules? storage.rules
✔  Wrote storage.rules
i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

dai@Mac-Studio voice-sample-app % git init
Reinitialized existing Git repository in /Projects/VoiceAITest/voice-sample-app/.git/
dai@Mac-Studio voice-sample-app % git remote add origin https://github.com/f60k/voice-sample-app.git
dai@Mac-Studio voice-sample-app % git remote -v
origin	https://github.com/f60k/voice-sample-app.git (fetch)
origin	https://github.com/f60k/voice-sample-app.git (push)
dai@Mac-Studio voice-sample-app % git branch -M main
dai@Mac-Studio voice-sample-app % git push -u origin main
Enumerating objects: 33, done.

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getFunctions } from "firebase/functions";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_API_KEY,
  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_APP_ID,
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore();
export const functions = getFunctions(app);
functions.region = "asia-northeast1";
export const storage = getStorage();
export default app;

VITE_API_KEY=AIzaSyCDJ****************PWy_8sHktM2Ew
VITE_AUTH_DOMAIN=voice-****************9.firebaseapp.com
VITE_PROJECT_ID=voice-****************
VITE_STORAGE_BUCKET=voice-****************.appspot.com
VITE_MESSAGING_SENDER_ID=620404****************
VITE_APP_ID=1:620404****************:web:459d9cd****************1761fad