Nuxt.js のプロジェクトをFirebase にホスティングする

前提条件

事前にNuxt.jsのプロジェクトを作成しておく必要がある。*1

まずは Firebase をインストールする

npm install firebase --save

Firebase CLI をインストールする

npm install -g firebase-tools

上記コマンドを使用し、Firebase CLI をインストールする。

Firebase にログインする

firebase login

上記コマンドを実行する。

ブラウザが起動しGoogleログイン画面が表示される。

なお、本環境で実行した時、下記エラーが表示された。

firebase : このシステムではスクリプトの実行が無効になっているため、ファイル C:\example\firebase.ps1 を読み込むことができません。
詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参照してください。
発生場所 行:1 文字:1
+ firebase login
+ ~~~~~~~~
    + CategoryInfo          : セキュリティ エラー: (: ) []、PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

下記、コードで無事解決。

PowerShell -ExecutionPolicy RemoteSigned firebase login

【解決方法】PowerShell スクリプトを実行するとエラーが発生する

上記リンク先を参考にさせていただきました。

以降エラーが出るようであれば、すべてPowerShell -ExecutionPolicy RemoteSigned をコマンドの文頭に つけるとうまくいく。

ログイン時、Googleアカウントのアクセスを許可する必要がある。

許可をすると下記のような陽気な文言がブラウザに表示され、Firebase CLI にログイン完了。

Woohoo!
Firebase CLI Login Successful
You are logged in to the Firebase Command-Line interface. You can immediately close this window and continue using the CLI.

Firebase にホスティングする

firebase init hosting

上記コマンドを実行する。

いくつか質問されるので順に回答していく。

Are you ready to proceed? (Y/n)

このディレクトリをFirebaseプロジェクトとして初期化するけど準備はいいかと問われるのでY を選択する。

? 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プロジェクトに関連付けるか聞かれるので自分の環境に合わせる

? Select a default Firebase project for this directory: 
> *************    

既存のプロジェクトを選択したので、Firebaseにある既存プロジェクトが選択肢に表示される。

? What do you want to use as your public directory? (public)

デプロイするディレクトリについて聞かれる。

Nuxt.js の公開ディレクトリは dist なのでdist と記入する。

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) 

シングルページアプリケーションかどうかについて問われるので、制作環境に合わせて選択する。

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

GitHubと連携するかを問われるので、好みに合わせて選択する

+  Wrote dist/404.html
+  Wrote dist/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

+  Firebase initialization complete!

上記が出力されれば初期化完了！

firebase serve

Firebase プロジェクトをローカルで実行してテストする。*2

firebase deploy

問題なければ最後にFirebase にデプロイする。

Hosting URL: https://{{project_id}}.web.app

ホスティングURLが表示されるので、無事ページが表示できているかを確認する。

ちなみにサーバーの停止は下記コマンド。

firebase hosting:disable

コマンド完了後、下記質問にY でエンター。

This will immediately make your site inaccessible! Yes

停止後にアクセスするとNot Foundが表示される。

*1: https://blog-progblog-web.hatenablog.com/entry/2021/01/02/233850

*2:この1つ前の作業でビルドをする「npm run generate」