はじめに
React × TypeScript（Vite）を使って、新規プロジェクトを作成 -> Firebase Hosting へデプロイする手順をまとめます。
前提
- 既に Vite で React+TS のプロジェクトを作成済み
- Node.js / npm が入っている
まだプロジェクトを作っていない場合は、以下の手順で作成してください。
npm create vite@latest my-app -- --template react-ts
cd my-app
npm i
my-appはプロジェクト名です。任意の名称にしてください。
Node.jsとnpmをインストール済みであることを確認するコマンド
node -v
npm -v
Firebase Hosting にデプロイする手順
1. プロジェクト直下でFirebase CLI をインストール
npm install -g firebase-tools
2. Firebase プロジェクトを作成
- Firebase Console にアクセス
- Firebase プロジェクトを作成する
- プロジェクト名を入力
- (Google アナリティクスは任意)
- プロジェクトの設定 > プロジェクトID をメモしておく（一応）
3. Firebase CLI でログイン & 初期化
firebase login
firebase init
対話式で設定：
-
? Which Firebase features do you want to set up for this directory?
└->Hosting: Configure files for Firebase Hosting...を選択 -
? Please select an option:
└->Use an existing projectを選択 -
? Select a default Firebase project for this directory: (Use arrow keys)
└-> 今回デプロイしたいプロジェクトを選択（プロジェクトが1つだったら出ないかも） -
What do you want to use as your public directory?
└->distと入力 -
Configure as a single-page app (rewrite all urls to /index.html)?
└->Yと入力 -
Set up automatic builds and deploys with GitHub?
└->No（後で設定可能）
いざ
最後に、以下を実行すれば公開されます。
npm run build
firebase deploy
完了後に表示されるhttps://<project-id>.web.appでアクセスできます。
おわりに
以上で Firebase デプロイが完了です。
URL さえ分かれば、誰でもアクセスできる状態です。
なんかワクワクしますねo(^-^)o
毎回npm run buildとfirebase deployを実行するのが面倒だと感じる怠惰さんは、Make fileの作成をおすすめします。