この記事は先日初めてWEBアプリを作った時の備忘録です。
アプリの内容はさして重要じゃないので割愛します。
1.はじめに
今回作ったWEBアプリは以下技術スタックで構成されています。
開発言語：TypeScript
フレームワーク：Node.js
UIライブラリ：React
スタイリング：Tailwind CSS / lucide-react
グラフ描画：Chart.js
データベース：Firebase Firestore
デプロイ：Firebase hosting
外部API連携：OpenAI API
本記事ではFirebase hostingを使う為の環境構築について記述します。
※他項目は過去記事を参照下さい。
https://qiita.com/tera_code/items/b59ad4a88b5b8e5810fa
https://qiita.com/tera_code/items/f1b6dbce2154542f3126
2.前提環境(2025年7月時点)
OS：Windows10 Home
ブラウザ：Google Chrome
エディタ：VScode
3.Firebase CLIのインストール
まずターミナルを起動して、
プロジェクトのルートパスに移動し、以下コマンドを実行します。
cd project-dir
npm install -g firebase-tools
※ project-dirはプロジェクトのルートパス
インストールが完了したかどうかは、以下コマンドを実行して
バージョンが表示されれば成功しています。
firebase --version
4.Firebase CLIでのログイン
インストール完了後、以下コマンドを実行します。
firebase login
実行をすると細かいオプションをどうするか質問されますが、
ここはお好みでいいと思います。
私は全部n(NO)にしました。
? Enable Gemini in Firebase features?(y/n)
意味：Firebaseの新しい機能（Gemini）を使うか？
? Allow Firebase to collect CLI and Emulator Suite usage and error reporting information?(y/n)
意味：Firebase CLI と Emulator Suite の使用状況やエラー情報を Firebase に送信してもいいか
5.Hostingの初期化
プロジェクトでHostingの初期化をしていきます。
ターミナルで以下のコマンドを実行します。
firebase init hosting
また色々質問されますが、以下を参考に入力してください。
| 質問内容 | 内容説明 | 選択肢 | 備考 |
|---|---|---|---|
| Enable Gemini in Firebase features? | Firebaseの新機能「Gemini」を使うか？ | No | 今は使わなくてOK。あとで設定可能。 |
| Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? | Firebase CLIやエミュレータの利用状況を匿名送信するか？ | Y / n | どちらでもOK。改善に役立つがプライバシー気にするなら「n」でもよい。 |
| Which Firebase CLI features do you want to set up for this folder? | どのFirebase機能をセットアップするか？ | Hosting | SpaceキーでHostingを選択してEnter。 |
| Select a default Firebase project for this directory: | 既存のFirebaseプロジェクトを使うか新規作成か選ぶ | Use existing project | 既に作成済みなら「Use existing project」 |
| What do you want to use as your public directory? | 公開したいファイルがあるフォルダ名を入力 | build | Reactのビルド成果物フォルダ名は「build」 |
| Configure as a single-page app (rewrite all urls to /index.html)? | SPAなので全URLをindex.htmlにリダイレクトするか？ | Yes | Reactアプリは必須。 |
| Set up automatic builds and deploys with GitHub? | GitHub連携で自動デプロイを設定するか？ | No | 今回は手動デプロイのため「No」でOK |
| Are you ready to proceed? | デプロイ準備できているかの確認 | Y | 「Y」で進める |
上記が終わると、プロジェクトのフォルダ内に
firebase.json や .firebaserc ファイルが作成されます。
6.Firebase Hostingにビルド&デプロイ
ターミナルで以下コマンドを実行します。
npm run build
成功すると、以下のようなメッセージが表示されます。
Compiled successfully.
File sizes after gzip:
36.32 KB build/static/js/main.xxxxx.chunk.js
1.67 KB build/static/css/main.xxxxx.chunk.css
The build folder is ready to be deployed.
次に以下コマンドでデプロイを実行します。
firebase deploy
デプロイに成功すると以下のようなメッセージが表示されます。
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/test-app-id
Hosting URL: https://test-api-id.web.app
ソースコードを書き換えたら都度、ビルド&デプロイを実行すれば
内容が反映されます。
7.おわりに
備忘録を書く事で自身の理解を深められて大変助かります。
次回は環境構築編の最後になる予定です。
引き続き時間を見つけて記事を書いていきたいと思います。