ジーズの課題でFirebaseのRealtime Databaseを使ったのですが、Webに公開するにあたりFirebase Hostingを使用したいと思い、試行錯誤したので、対応した内容をまとめました。
やりたいこと
今回やりたいことは、
Readtime Databaseを使って実装したアプリケーション（Chatアプリ）をFirebase Hostingへデプロイする
です。
｢Hostingを始める｣で早速つまずく
Firebaseは親切なので、左のメニューの「構築」からHostingを選んで、「始める」をクリックすると、ガイダンスに沿って設定できるようになっています。
↓ Hostingを選んだ状態
↓ 「始める」をクリックしたあとのガイド
なので、これ通りにやれば良いかと思いきや、見慣れない npm という文字
ここまでジーズの授業内や課題の中ではnpmを使用していませんでした。
Firebaseプロジェクト追加後に行う「ウェブアプリにFirebaseを追加」の際に「npmを使用する」を選べるのですが、授業でも「<script> タグを使用する」の方を使用していました。
ここに来て選択肢がnpmしかなさそうということが判明し、まずはnpmについて調べてみることにしました。
npmとは
Wikipediaにも解説がありましたが、下記の記事が分かりやすかったです。
npm とはNode.jsのパッケージを管理するシステム、所謂パッケージ管理システムです。
https://zenn.dev/antez/articles/a9d9d12178b7b2
Node.js？？？まだ学習してないところやん！と思いましたが、記事によると
npmは、Node.jsをインストールすると同時にインストールされます。
https://zenn.dev/antez/articles/a9d9d12178b7b2
とのことなので、インストールをすることにしました。
Step1：Node.jsインストール
インストールにあたってはこの記事の通りには行わず（nvmの理解が追いつかなかったともいう）
改めて「Node.js インストール」で検索をしたところ、Progateの下記のページがとても分かりやすかったのでそちらに沿って実施しました。（が、続きがあります）
なのですが、macについては、後述するfirebaseのインストールの際に権限エラーが出るため、私は別の方法で対処しましたが、下記を参考にコマンドをを実行しながらインストールをしたほうが良いかもしれません。試せてないので参考情報です。
Step2：Firebase CLIインストール
npm（Node.js）がインストール出来たので、再度ガイドに従ってFirebase CLIのインストールを行いました。
ところが、エラーが発生。下の方を読むと権限エラーのようです。
ググってみるとmacで同様のケースが発生しているようでした。
Firebaseのガイドの下の方に「npmへのアクセス権」のリンクがあり、そこでは「ノードバージョンマネージャーを使用してnpmを再インストールします」が推奨されていました。
If you see an
EACCESerror when you try to install a package globally, you can either:
- Reinstall npm with a node version manager (recommended),or
- Manually change npm’s default directory
This is the best way to avoid permissions issues. To reinstall npm with a node version manager, follow the steps in “Downloading and installing Node.js and npm“.
https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally
先ほど、Node.jsインストールの項で記載した、コマンドをを実行しながらインストールをしたほうが良いかも、というのはここの点に絡んでいます。（リンクも上記の”Downloading and installing Node.js and npm“と同じ）
ただ、私は管理者権限でインストールをする（＝頭にsudoをつけてインストールする）、というやり方を行いました。
ぐぐってみると割とのこの方法で乗り切っている方が多かったので、今回はまずそれに沿うことにしました。
sudo npm install -g firebase-toolsこれで無事インストールが成功しました！
Step3：Firebaseログイン・初期化
インストールが終わったので、次のガイドに進みます。
ログインの前に「ウェブアプリのルート ディレクトリに移動するか、ルート ディレクトリを作成します」とあるので、ルートディレクトリを用意します。ここ大事。
ターミナル上で、cdを使って、ルートディレクトリに移動してから、まずはガイドの通りにログインします。
（ログイン自体はどこでやってもよさそうですが、後続作業があるのでルートディレクトリにて実施）
firebase login次にプロジェクトの開始のコマンドをやるのですが、ここのコードが公式のスタートガイドと若干違ったんですよね。
ガイダンス画面は「firebase init」、公式のスタートガイドは「firebase init hosting」
結論としては、「firebase init hosting」が良かったです。
firebase init hosting理由は「firebase init」で実行するとfirebaseのどの機能で初期設定するか聞かれてしまうのですが、
「firebase init hosting」だと、その質問なくHostingの初期設定で話が進んでいきます。
どの機能か聞かれる（Hostingも複数あって少し迷子）
そのままProjectとHostingの質問に入る
インストールではいくつか質問がされますが、公式ドキュメントに解説もあるので参考にしてみてください
もし悩む場合は、デフォルト値が灰色で表示されていたり（上記のpublic）、Yes / Noもおすすめの方が大文字になっているようなのでそれで決めてもいいかもしれないです。
質問を全て回答して初期化が完了すると、先ほど用意したルートディレクトリ上にファイルやディレクトリ（フォルダ）が増えています。おそらく「firebase.json」ファイルと、「public」フォルダがあり、publicフォルダの方はfirebaseの初期のhtmlファイルが入っているかと思います。（今後仕様は変わるかもなので2024/7時点の話です）
Step4：デプロイ
ここまでで設定は終わったので、最後はデプロイです。以降、修正とかで再デプロイする際もここからでOKです。
事前準備
先ほどの初期設定で生成された「public」フォルダが公開用のディレクトリになります。
なので、アップロードしたいhtml・css・jsファイルなどをpublicフォルダに格納します。index.htmlはfirebaseの初期のものが格納されていますが、上書きして問題ないです。
デプロイ作業
publicフォルダへのファイルの格納が終わったらデプロイを実行します。
ガイドにある通りデプロイのコマンド実行はルートディレクトリから行います。publicフォルダからではありません。
問題なくデプロイ出来ているかを確認して、デプロイ完了です！
URLは、ガイドに記載のあるURL（デプロイ後、アプリを〜の部分）、もしくは、プロジェクトの画面の左側のHostingをクリックした際に、右側に表示される内容の中にもURLの記載があります。（下記の赤枠部分）
以上、Firebase Hostingの設定〜デプロイについてでした。私もまとめるなかで改めて知識の整理ができました。
どなたかの参考になってますと幸いです。