[36歳から始めるシステム開発]Firebaseホスティングでシステム公開：簡単ステップ
今回の記事では、Webサイトを公開する方法を紹介します。
以下の記事から作成している財務分析システムを公開するかもしないので、その勉強のためにホスティングを私自身で実施してみました。
今回はFirebaseホスティングのやり方を紹介します。
私自身、初めてFirebaseを使ってウェブサイトを公開しました。
ホスティングの手順は意外とシンプルで、必要なコマンドを順に実行していくだけです。
ホスティングとは？
ホスティングとはWebサイトをインターネット上に公開するサービスのことです。
私のようにウェブを前提としたアプリケーションを公開することも可能で、誰でもそのウェブサイトにアクセスできるようになります。
Firebaseホスティングは、Googleが提供するサービスの一部で、シンプルな操作で「無料」でウェブサイトを公開できるのが特徴です。
Firebaseホスティングを始める準備
まず、Firebaseホスティングを利用するための準備をします。
ここではFirebaseコンソールでプロジェクトを作っておくことが前提としています。
Firebase CLIのインストール
最初にFirebaseツールをインストールします。
コマンドラインから、自分のプロジェクトのフォルダ配下で以下のコマンドを実行します。
npm install -g firebase-toolsFirebaseへのログイン
以下のコマンドでFirebaseにログインします。
firebase loginこれでFirebaseと連携する準備が整います。
Firebaseホスティングの手順
ここからが実際にFirebaseでホスティングする手順です。
プロジェクトの初期化
Firebaseプロジェクトを初期化するには、以下のコマンドを使います。
firebase initコマンドライン上にいくつか選択をする箇所がありますので、以下を選択します。
「ホスティング」 のオプションを選択します。
「既存のFirebaseプロジェクト」を使用オプションを選び、あらかじめFirebaseコンソールで作成したプロジェクトを選択します。
プロジェクトの公開ディレクトリを指定します。next.jsやreact.jsであればビルド後のディレクトリ（outまたは.next）です。
もしビルド後のディレクトリがわからなければ、仮で指定しておき、後ほど「firebase.json」のファイルを編集することで変更が可能です。
{
"hosting": {
"public": "out", // ビルド後のディレクトリに変更
}
}ビルドとエクスポート
自分で作成したウェブサイトをビルドします。
ここでは私が使用したNext.jsでの手順を記載します。
Next.jsアプリケーションを以下のコマンドでビルドします。
npm run buildFirebase Hostingでは静的ファイルが必要になるため、Next.jsのエクスポート機能を使う場合は、以下のコマンドも使用します。
npm run export上記のコマンドでoutフォルダに静的ファイルが出力されます。
このファイルをfirebaseにデプロイできます。
デプロイ
以下のコマンドでFirebaseにデプロイします。
firebase deployデプロイが成功すると、ホスティングされたアプリケーションのURLがターミナルに表示されます。
例：https://sample.web.app上記のURLにアクセスすれば自分が作成したWebサイトが表示されます。
まとめ
今回は、Firebaseホスティングを使ってウェブサイトを公開する手順を紹介しました。
自分が作成したサイトをdeployしたら、ログイン操作までちゃんと動きました。（ちょっと嬉しかったです）
上記の後のapiを使った動的な挙動をさせるには、別の操作が必要なようです。
ちなみにローカル環境だとどのように動くか気になる方は以下の記事を参照ください。
とはいえ、レンタルサーバーを借りずとも自分でWebサイトを公開できるなんて便利な時代に生きているなと思います。