React × Firebase でアプリをデプロイする

前提条件

1. Reactでアプリケーションを作成している。
2. Firebaseに登録し、プロジェクトを作成している。

※viteを使用していたためビルドの際に上手くできませんでした。5番で解決策を記述しています。

全体の流れ

1. firebaseCLIを使うためにfirebase-toolsをインストールする
2. firebaseと接続する
3. firebaseを初期化する
4. ビルドする
5. ちゃんとビルドされているか確認する
6. デプロイする

1. firebaseCLIを使うためにfirebase-toolsをインストールする

以下のコマンドでインストールします。

npm install -g firebase-tools

2. firebaset接続する

以下のコマンドを実行し、firebaseと接続します。

firebase login

3. firebaseを初期化する

以下コマンドを実行し、firebaseを初期化します。

firebase init

質問に答えていきます。
１つ目：スペースキーで選択しエンターを押します。

２つ目：buildと入力します。

３,４,５,６つ目：Noと入力します。そうすると初期化が完了します。

4. ビルドする

以下のコマンドを実行しビルドします。

npm run build

5. ちゃんとビルドされているか確認する

以下のコマンドを実行し、表示されたURL(http://localhost~)にアクセスし確認します。

firebase serve

ここでアクセスした時にindex.htmlに記述したものが表示されていればビルド成功です。
以下のページが出たら失敗しています。

viteを使用している場合はビルドに失敗する場合があります。
その場合はvite.configのbuildの中身を一部書き換えます。（15行目）

vite.config

import path from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  root: '.',
  plugins: [react()],
  resolve: {
    alias: {
      '~': path.resolve(__dirname, 'src'),
    },
  },
  build: {
    outDir: 'dist',
  },
})

6. デプロイする

以下コマンドを実行します。

firebase deploy

デプロイしたら、Firebaseの画面で確認しましょう。
お疲れ様でした。