概要

JS フレームワークの Nuxt で作成した Web アプリ・サイトを Firebase Hosting に Deploy する手法を紹介します。

Nuxt.js 導入

公式リファレンスを参考に行いましょう。

プロジェクトの作成

npx create-nuxt-app <project-name>

色々聞かれるのでお好みの設定で。 それぞれ何を聞かれているかは公式の方に記載されています。

インストール & 起動

cd <project-name>
npm install
npm run dev

問題なくローカルで確認できれば OK

Firebase の導入

事前準備

Firebaseのサイトにてログインし、 『 プロジェクトを追加 』を選び任意の名前でプロジェクトを作成しておく。

パッケージのインストール

npm install -g firebase-tools

Firebase にログイン

firebase login

Web ページを開いて良いか聞かれるので

Firebase の初期設定

firebase init

① 接続するプロジェクトを聞かれるので、既存のプロジェクトの先ほど作成したプロジェクトを指定しましょう。 ② 公開ルートディレクトリを聞かれるので、Nuxt の仕様に合わせ

これらも詳細は公式で確認してください。

Deploy を行う

まず deploy 用に dist ファイルを作成する

npm run build
npm run generate

deploy する！

firebase deploy

deploy が完了すると公開 URL が表示されるので、そこに飛ぶと公開された実物が見れるはずです！