1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Keita-0025(keita)

Firebase Hosting初期化手順

Posted at

はじめに

デプロイサービスはたくさんあるのでどれを使えばよいか迷っている人もいるのではないでしょうか？
AWS？インフラ？って難しそうですよね？
選択肢の一つとして「Firebase」はどうでしょうか？ってことで
今回はすごく簡単にデプロイできるサービスのセットアップ方法についてまとめました！
それではどうぞ！！

この記事で分かること

この記事では、Firebase CLIを使用してFirebase Hostingの初期化を行った手順について説明します。

  • 実行内容: firebase initコマンドを使用してFirebase Hostingを設定
  • 設定内容:
    • Firebaseプロジェクトの選択（既存プロジェクトを使用）
    • パブリックディレクトリの設定（dist）
    • シングルページアプリ（SPA）の設定
    • GitHub自動デプロイの設定（手動デプロイを選択）
  • 生成されたファイル:
    • firebase.json: Firebase Hostingの設定ファイル
    • .firebaserc: プロジェクト情報ファイル
  • 実装例: Vite + ReactプロジェクトでのFirebase Hosting設定を例に、各ステップの選択内容を紹介

1. Firebase初期化の開始

実行コマンド

firebase init

初期化プロセスの流れ

Firebase CLIが対話形式で設定を進めます。各ステップで表示されるメッセージと選択内容を以下に記録します。

2. Firebase機能の選択

表示されたメッセージ

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices.
❯◯ Data Connect: Set up a Firebase Data Connect service
 ◯ Firestore: Configure security rules and indexes files for Firestore
 ◯ Genkit: Setup a new Genkit project with Firebase
 ◯ Functions: Configure a Cloud Functions directory and its files
 ◯ App Hosting: Set up deployments for full-stack web apps (supports server-side rendering)
 ◯ Hosting: Set up deployments for static web apps
 ◯ Storage: Configure a security rules file for Cloud Storage

? このディレクトリにどのFirebase機能を設定しますか？Spaceキーで機能を選択し、Enterキーで選択を確定してください。
❯◯ Data Connect: Firebase Data Connectサービスを設定する
◯ Firestore: Firestoreのセキュリティルールとインデックスファイルを設定する
◯ Genkit: Firebaseで新しいGenkitプロジェクトをセットアップする
◯ Functions: Cloud Functionsディレクトリとそのファイルを設定する
◯ App Hosting: フルスタックWebアプリのデプロイメントを設定する（サーバーサイドレンダリング対応）
◯ Hosting: 静的Webアプリのデプロイメントを設定する
◯ Storage: Cloud Storageのセキュリティルールファイルを設定する

選択内容

Hosting を選択。

選択理由:

  • Vite + Reactプロジェクトは静的Webアプリケーションのため、Hostingが適切
  • デプロイに必要最小限の機能
  • 他の機能（Firestore、Storageなど）は必要に応じて後から追加可能

操作方法

  1. ↑↓キーで「Hosting」に移動
  2. Spaceキーで選択（◯ → ◉）
  3. Enterキーで確定

3. Firebaseプロジェクトの選択

表示されたメッセージ

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 

? Please select an option:
❯ Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project

まず、このプロジェクトディレクトリをFirebaseプロジェクトに関連付けましょう。
firebase use --add を実行することで、複数のプロジェクトエイリアスを作成できます。

? オプションを選択してください：
❯ 既存のプロジェクトを使用する
新しいプロジェクトを作成する
既存のGoogle Cloud PlatformプロジェクトにFirebaseを追加する
デフォルトプロジェクトを設定しない

選択内容

今回は事前にGUI（firebaseコンソール）でプロダクトを作成済みなのでUse an existing project を選択。

プロジェクト一覧

✔ Please select an option: Use an existing project
? Select a default Firebase project for this directory:
❯ example-project-12345 (example-project)
  example-project-67890 (example-project )
  my-app-abc123 (my-app)

✔ オプションを選択しました: 既存のプロジェクトを使用する
? このディレクトリのデフォルトFirebaseプロジェクトを選択してください：
❯ example-project-12345 (example-project)
example-project-67890 (example-project )
my-app-abc123 (my-app)

選択内容

my-app-abc123 (my-app) を選択。

選択理由:

  • プロジェクト名が「my-app」と一致しているため

4. Hosting設定

パブリックディレクトリの設定

表示されたメッセージ

=== 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? (public)

=== Hosting設定

パブリックディレクトリは、firebase deployでアップロードされるHostingアセットを含むフォルダ（プロジェクトディレクトリからの相対パス）です。
アセットにビルドプロセスがある場合は、ビルドの出力ディレクトリを使用してください。

? パブリックディレクトリとして何を使用しますか？ (public)

選択内容

dist を入力。

選択理由:

  • Viteプロジェクトのビルド出力ディレクトリはdistであるため
  • npm run buildを実行するとdistフォルダにビルド成果物が生成される

シングルページアプリ（SPA）の設定

表示されたメッセージ

✔ What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? (Y/n)

✔ パブリックディレクトリとして何を使用しますか？ dist
? シングルページアプリとして設定しますか（すべてのURLを/index.htmlに書き換えますか）？ (Y/n)

選択内容

Y を選択。

選択理由:

  • Reactアプリケーションはシングルページアプリ（SPA）であるため
  • React Routerなどでルーティングを使用する場合、すべてのパスを/index.htmlにリライトする必要がある
  • これにより、直接URLアクセスやリロード時にも正しく動作する

GitHub自動デプロイの設定

表示されたメッセージ

? Set up automatic builds and deploys with GitHub? (Y/n)

? GitHubで自動ビルドとデプロイを設定しますか？ (Y/n)

選択内容

n を選択。

選択理由:

  • 初回設定では手動デプロイで動作確認したいため
  • 設定をシンプルに保ちたいため
  • 必要に応じて後からGitHub連携を追加可能なため

5. 初期化完了

完了メッセージ

 Wrote dist/index.html

✔  Wrote configuration info to firebase.json
✔  Wrote project information to .firebaserc

✔  Firebase initialization complete!

dist/index.htmlを書き込みました

✔ 設定情報をfirebase.jsonに書き込みました
✔ プロジェクト情報を.firebasercに書き込みました

✔ Firebase初期化が完了しました！

6. 生成された設定ファイル

firebase.json

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

設定内容:

  • public: デプロイするディレクトリ（dist）
  • ignore: デプロイから除外するファイルやディレクトリ
  • rewrites: すべてのURLを/index.htmlにリライト（SPA設定）

.firebaserc

{
  "projects": {
    "default": "my-app-abc123"
  }
}

設定内容:

  • default: デフォルトで使用するFirebaseプロジェクトID

7. デプロイ手順

ビルドとデプロイ

初期化が完了したら、以下の手順でデプロイできます：

# 1. アプリをビルド
npm run build

# 2. Firebaseにデプロイ
firebase deploy

デプロイ確認

デプロイが成功すると、Firebase HostingのURLが表示されます。このURLにアクセスすることで、デプロイされたアプリを確認できます。

まとめ

  • ✅ Firebase Hostingを選択して静的Webアプリのデプロイ設定を完了
  • ✅ 既存のFirebaseプロジェクト（my-app-abc123）を関連付け
  • ✅ パブリックディレクトリをdistに設定（Viteのビルド出力ディレクトリ）
  • ✅ シングルページアプリ（SPA）として設定（すべてのURLを/index.htmlにリライト）
  • ✅ GitHub自動デプロイは設定せず、手動デプロイを選択
  • ✅ firebase.jsonと.firebasercが生成され、設定が完了

この設定により、npm run buildでビルドした成果物をfirebase deployでFirebase Hostingにデプロイできるようになりました。

さいごに

サービス作るのって大変ですよね？
言語の選択、デプロイ先、データベース、SPAかMPAかいろいろ選択肢あって戸惑いますし、嫌になりますｗ
僕の持論ですけど、ここの領域はAIに代替されないところなのでしっかり勉強すべきだと思います！！
以上！！またね〜〜

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?