More than 1 year has passed since last update.

Firebase上にReactアプリを公開【2024年版】

Posted at 2024-05-09

記事概要

firebaseを使い、Reactアプリを無料で公開するまでの手順を細かく記載。
実際に利用したサービスは「firebase hosting」のみとなっている。
パッケージ管理にはnpmを利用する前提での記載となっている。

前提作業

Reactの新規プロジェクトを事前に作成している前提で内容を記載
（当記事ではReact + Viteで作成した新規プロジェクトを公開する）

  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  }

大まかな流れ

Reactアプリにfirebaseへ接続するための各種ツールを導入
firebase上にプロジェクトを作成
項番2で作成したプロジェクトにアプリ情報の登録
デプロイ先であるホスティング環境構築
アプリのデプロイ

手順

[App]前提モジュール・ツールを導入

firebaseモジュールをプロジェクトに追加
アプリ上からfirebaseの各サービスを接続するために必要なモジュールを追加する

npm install firebase

firebaseを操作するためのCLIツールを追加
コマンドラインでFirebaseプロジェクトの管理、表示、デプロイをするCLIツール。
このツールを使いアプリをFirebase上にログインやアプリデプロイしたりできるようになる模様。

npm install -g firebase-tools
firebase --version

[firebase]利用するGoogleアカウントの設定

firebaseにログイン
　初回の場合は使用状況やエラーの報告収集の許諾確認が表示される

firebase login
i  Firebase optionally collects CLI and Emulator Suite usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.
? Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? (Y/n)

firebaseに利用するGoogleアカウントを選択する
アカウントのリクエストを許可する
ログインに成功！Woohoo！

npm install -gとは？
グローバルインストール。
通常実行するコマンドと違いどのディレクトリからでも実行できるようにする。
どのプロジェクトでも使用し且つ全てのプロジェクトで同一のバージョンを使用する場合に利用する。

[firebase]firebaseのプロジェクトを作成

firebaseプロジェクトとは？
作成するリソースの管理単位をプロジェクトと呼称している模様。

プロジェクトを作成
プロジェクト名をつけて作成
今回は「sample-chat」という名前のプロジェクトを作成
Googleアナリティクスを無効にしてプロジェクトを作成する
（必ず無効にする必要はない。必要であれば有効にしても問題ないと思われる。）
作成されるまで待ち、作成完了後に完了ボタンを押す
プロジェクトのダッシュボードが表示されればプロジェクト作成成功

[firebase]アプリの作成

プロジェクトのダッシュボードから >(web)マークのボタンを押下する
アプリの名前を入力して、「アプリを登録」ボタンを押下する
「このアプリの Firebase Hosting も設定します。」にもチェックをする。
アプリ -> Firebaseの接続情報が表示されるが、ここでは特に何もせず次へ
Firebase-CLIのインストールが表示されるが、既に前の章で実施済みなのでそのまま次へ
Firebaseへのデプロイ方法が表示されるが、まだアプリが用意できてないのでそのまま次へ

[App]アプリのデプロイ

firebaseへアプリをデプロイし、アクセスする。

firebase hostingへの接続設定追加

アプリのルートディレクトリで下記コマンドを実行

firebase init

すると、下記のように対話式でオプションの内容を聞かれるのでそれぞれの
用途に沿って内容を選択する。下記は「firebase hosting」で公開するための選択内容となる。
（一部やらなくても公開はできる設定も混じっている気はする）
実際に選択した内容と簡単に意訳を記載している。

? Are you ready to proceed? (Y/n)
意訳)Firebaseプロジェクトとして初期化しようとしてけど準備はいい？
選択)Yes

? 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)
意訳)このディレクトリにどのFirebase機能を設定しますか？
意訳)Spaceを押して機能を選択し、Enterを押して選択を確定します。

<複数ある選択肢のうち関係あるものを抜粋>
 ( ) Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
意訳)ホスティング： Firebase Hosting用のファイルを設定し、（オプションで）GitHub Actionのデプロイを設定する。
 ( ) Hosting: Set up GitHub Action deploys
意訳)ホスティング： GitHub Actionのデプロイの設定をする。

選択)Firebase Hosting用のファイルを設定 + GitHub Actionのデプロイ を選択

? Please select an option: (Use arrow keys)
意訳) オプションを選択してください（このディレクトリに紐づけるFirebaseプロジェクトを選択）
選択) Use an existing project（既にあるFirebaseプロジェクトを利用）

? Select a default Firebase project for this directory: (Use arrow keys)
意訳)どのプロジェクトを使う？
選択)利用するプロジェクトIDを選択（今回はsample-chat）

? What do you want to use as your public directory? (public)
意訳)パブリック・ディレクトリとして何を使用しますか？（デプロイする対象パスを選択）
選択)デフォルトのpublicを選択する

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
意訳)シングルページアプリとして構成する（すべてのURLを/index.htmlに書き換える）？
選択)ReactプロジェクトなのでYes

? Set up automatic builds and deploys with GitHub? (y/N)
意訳)GitHubを使って自動ビルドとデプロイを設定する？
選択)Yes

? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository)
意訳)GitHub Actionsを設定するGitHubレポジトリはどれ？
選択)githubアカウント名/対象リポジトリ名の形式で利用するリポジトリを入力

? Set up the workflow to run a build script before every deploy? (y/N)
意訳)Hostingにデプロイする前にビルドスクリプトを動かすか
選択)Reactなので事前にビルドスクリプトを実行する必要がある yes

? What script should be run before every deploy? (npm ci && npm run build)
意訳)Hostingにデプロイする前に動かすビルドスプリクトを入力する
選択)デフォルトのまま(npm ci && npm run build)

? Set up automatic deployment to your site's live channel when a PR is merged? (Y/n)
意訳)プルリクエストがマージされたときに本番サイトにマージするか
選択)No

firebase hostingへデプロイ

下記コマンドを叩いてアプリをデプロイ

firebase deploy

デプロイが成功すると、ホスティングURLが表示されるはずなのでそちらへアクセス。
正常にアクセスできたら成功！FirebaseHostingのデフォルトページが表示されるはず。

続いて自分のReactアプリをデプロイするため、アプリのビルドを実行する
(各環境の設定によってビルドコマンドは異なるはずなので下記は参考程度に）

npm run build

その後、firebase init時に設定したデプロイ対象のディレクトリをpublicからdistへ変更する
アプリディレクトリの中にあるfirebase.jsonの中にある下記を修正する

{
  "hosting": {
    "public": "dist", // public から dist へ修正
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

その後、最後下記コマンドを実行してアクセスする
自分のアプリが表示されれば成功！

firebase deploy

公開後は必要がなければ停止したほうがよいらしい
下記コマンドで停止

firebase hosting:disable

終わりに

今回は、フロントエンドのみの設定となる。
次回はDBやサーバサイドを利用する場合の構築方法もまとめたい。

参考

https://qiita.com/murasuke/items/72942bbfde858fe6879b
https://reffect.co.jp/react/react-crud-firebase-9
https://zenn.dev/tentel/articles/488dd8765fb059#firebase%E3%81%AE%E8%A8%AD%E5%AE%9A
https://blog.katsubemakito.net/firebase/firebase-make-newproject
https://qiita.com/junara/items/74801923ca108b328b26
https://qiita.com/yasupeke/items/c27abd951e216bf48f4f
https://zenn.dev/kazhack/articles/21ea0ba46f3fce
https://qiita.com/koji0705/items/79905e296adf4f262e82
https://qiita.com/hiroki-harada/items/ca22ac177db68e3c3796
https://zenn.dev/watarukun/articles/8f3e318bacf97cabf879

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up