Zenn
🔥

Next.js × Firebase Hosting でサイトを公開する【静的サイト編】

2024/11/23に公開
Firebase
Next.js
React
Firebase Hosting
tech

Reactを使ってWebアプリを公開してみたい！　というモチベーションでFirebase Hoistingを使ってデプロイまで行いました。

ネットで調べながらデプロイ作業を行いましたが、一部情報が古かったりしてうまくいかなかったので、公開までのプロセスを記録に残しておこうと思います。

特にApp routerを使った動的パスの公開についての情報が見つからなかったので苦労しました……。
……が、長くなったので動的サイト特有のプロセスはこちらの記事で解説します↓
https://zenn.dev/tonokokko/articles/37c48a5b049f56

ちなみに作成したWebアプリはこちらです↓
https://bubblepopper.click/

前提

  • Windows環境での解説です。
  • firebase-tools：13.24.1
  • Node.js：v20.17.0
  • Node.js の導入などは完了しており、Next.js開発に必要な環境は整っている所からのスタートです。
    環境構築がまだの場合は以下のサイトを参考になります。
参考サイト

Next.jsのプロジェクトを作成する

まだプロジェクトを作成していない場合は、Next.jsのプロジェクトを作成します。

npx create-next-app@latest my-next-app

色々聞かれますが、よくわからない場合は全てデフォルトでいいと思います。
自分の実行時の選択肢はこんな感じでした↓

Next.jsのプロジェクト作成がうまくいかない場合

基本的にはエラーの内容をGoogle検索するのがベストだと思います。
一応次のことを確認するといいかも。

  • Node.jsがインストールされているか確認
  • npxがインストールされているか確認
    インストールされていない場合は、次のコマンドでインストール
npm i -g npx

Firebaseのプロジェクトを作成する

  1. Firebase公式サイトからコンソールページに移動します。
    もしログインしていない場合は、Googleアカウントでログインします。
公式サイトURL

https://firebase.google.com/?hl=ja

  1. 「プロジェクトを作成」から新しいFirebaseプロジェクトを作成します。
  1. プロジェクト名を入力して「続行」します。

プロジェクト名はあとから変更できます。
左下に小さく表示される「プロジェクトID」がユニークキーになっており、変更不可です。

Google Analyticsの設定が出るかもしれませんが、任意なのでどちらでも大丈夫です。

  1. 左の「構築」タブから「Hosting」を選択します。
  1. Hostingのページに移動したら「始める」を選択します。
  1. 画面の指示通りにHostingの設定を実行します。

すごく丁寧に解説されているので、その通りに実行すれば問題なはず！

一応次節で解説します。

Firebase Hostingの設定

FirebaseのWebサイト側は準備万端なので、コマンドプロンプトやターミナルでFirebaseの設定を行っていきます。

  1. Firebase CLI（コマンドライン ツール）をインストールします。
    Firebase Hostingに使用するツールです。
    既にインストール済みの場合は省略できます。
npm install -g firebase-tools
  1. プロジェクトフォルダに移動します。
    パスは例です。
cd my-next-app
  1. Firebaseのアカウントにログインします。
    つまり、Googleアカウントですね。
firebase login

「Allow Firebase to collect CLI and Emulator Suite usage and error reporting information?」と聞かれますが、よくあるエラーレポートの送信です。
YesでもNoでも問題ありません！

コマンド入力後、提示されるURLからFirebaseのプロジェクトを作成したGoogleアカウントでログインします。

  1. Firebaseプロジェクトのセットアップ
    Next.jsのプロジェクトのルートディレクトリで、次のコマンドを実行します。
firebase init hosting

コマンド実行後の質問事項を順に見ていきます。

? Are you ready to proceed? (Y/n)

→ 始めていいですか？なのでYes

? Please select an option: (Use arrow keys)
> 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 an existing project」を選択して「エンター」を押します。

? Select a default Firebase project for this directory:
  sample-00000 (sample)
> sample2-00000 (sample2)

→ 使用するFirebaseのプロジェクトを選択します。
右側のかっこの中が、プロジェクト作成時に入力したプロジェクト名です。

? 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)

→ single-pageアプリの構成にするかと聞かれています。いわゆる「SPA」です。
一旦デフォルトの「No」にします。

? Set up automatic builds and deploys with GitHub? (y/N)

→ GitHubと自動デプロイの設定をするかを選べるようです。
どちらでもいいですが、一旦デフォルトのNoでいきます。

デプロイ

やっとここまでたどり着きました！！
次のコマンドでデプロイしてみましょう。

firebase deploy

デフォルトでは次のように２つのURLが使用できます。
どちらかにアクセスしてみましょう。

Project Console: https://console.firebase.google.com/project/sample-00000/overview
Hosting URL: https://sample-00000.web.app

Firebase Hostingのデフォルトページが表示されればデプロイ成功です！

Next.jsで作成したページを公開する

この段階では、Firebaseの初期設定で自動的に作成されたindex.htmlが公開されています。

最後にNext.jsで作成したページを公開していきます。

今回はサーバーサイドレンダリングはせずに、Firebaseには静的なファイルのみをアップロードして、ブラウザ(クライアント)側だけで動くサイトを公開する前提です。

  1. next.config.jsにexportを追加
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  output: 'export',// ←ここ
};

export default nextConfig;
  1. ビルド
npm run build

コマンドを実行すると、ビルド結果が「out」フォルダに作成されます。
このフォルダを公開していきます。

  1. firebase.json を修正
    デフォルト設定の場合「public:"public"」になっているので、ビルド結果が保存される"out"フォルダに変更します。
{
  "hosting": {
    "public": "out",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}
  1. デプロイ
    設定が完了したら再度デプロイします。
firebase deploy

Next.jsで作成したページが表示されていれば成功です！

終わりに

Firebase Hostingは初めて使いましたが、けっこうお手軽にデプロイできますね。

ホスティングサービスはいくつかあるので、機会があれば他のも使ってみたいし、使っている人の感想も聞いてみたいです。

Discussion