nuxtプロジェクト(SSR)をFirebaseでデプロイする。

Webサイト構築の勉強としてvue.jsとFirebaseを使ってみたので、その時の個人用メモ。

流れ

1. Firebaseアカウントを作成する。
2. Firebaseプロジェクトを作成する。
3. 作成したFirebaseプロジェクトにアプリを作成する。
4. nuxtプロジェクト(SSR)を作成する。
5. nuxt.config.jsを更新する。
6. nuxtプロジェクト上にfirebaseをインストールする。
7. デプロイする。

前提

・nuxtプロジェクトはSSR（サーバーサイドレンダリング）

Firebaseアカウントを作成する。

Firebase(公式)

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

手順①　Firebaseログイン後のトップ画面にある「プロジェクトを追加」ボタンをクリック。
手順②　表示される手順に従ってプロジェクトを作成。

作成したFirebaseプロジェクトにアプリを作成する。

手順①　作成したプロジェクトページを開き、「プロジェクトの概要」の歯車ボタンをクリックして、「プロジェクトの設定」をクリック。

手順②　「マイアプリ」フォームの「アプリの追加」ボタンをクリックし、「</>」マークボタンをクリック

手順③　表示される手順に従ってアプリを作成。

nuxtプロジェクト(SSR)を作成する。

プロジェクト名や初期設定などは以下。

nuxt.config.jsを更新する

手順①　Firebaseの「マイアプリ」フォームの「SDK の設定と構成」のラジオボタンを「npm」にする。
手順②　「SDK の設定と構成」に以下の様な記載があることを確認する。

SDK の設定と構成(npm)_一部抜粋

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "xxxxx",
  authDomain: "xxxx.firebaseapp.com",
  projectId: "xxxx",
  storageBucket: "xxxx.appspot.com",
  messagingSenderId: "xxxxxxx",
  appId: "xxxxxxx",
  measurementId: "xxxxxxx"
};

手順③　「nuxt.config.js」のmodulesに'@nuxtjs/firebase'を追加する。

nuxt.config.js

  modules: [
+   '@nuxtjs/firebase',
  ],

手順④　「nuxt.config.js」にfirebaseを追加する。
　　※configには上で確認したconst firebaseConfigの情報を記載。
　　※servicesは一旦適当にauthだけ記載。

nuxt.config.js

  modules: [
    '@nuxtjs/firebase',
  ],
+ firebase: {
+   config: {
+     apiKey: "xxxxx",
+     authDomain: "xxxx.firebaseapp.com",
+     projectId: "xxxx",
+     storageBucket: "xxxx.appspot.com",
+     messagingSenderId: "xxxxxxx",
+     appId: "xxxxxxx",
+     measurementId: "xxxxxxx"
+   },
+   services: {
+     auth: true // Just as example. Can be any other service.
+   }
+ },

手順⑤　「nuxt.config.js」にgenerateを追加し、dir:(出力先フォルダ名)を記載する。
　　※npm run generate：nuxtプロジェクトをNetlify / Vercel / Firebase などのホスティングサービスにデプロイするときに使うコマンド。nuxt.config.json上でtarget:'static'と設定されている時にnpm run generateコマンドを実行すると、プロジェクト直下にdistフォルダ（デフォルトの出力先)を作成する。Firebaseではデフォルトのデプロイフォルダがpublicフォルダなので、出力先を変更する。

nuxt.config.js

{
  ...,
  build: {},
+ generate: {
+   dir: 'public'
+ }
}

nuxtプロジェクト上にfirebaseをインストールする。

手順①　FirebaseCLIをインストールしていなければ、npm install -g firebase-toolsコマンドを実行する。
手順②　firebase loginコマンドを実行して、Firebaseアカウントにログインする。
手順③　firebase initコマンドを実行。
手順④　npm install @nuxtjs/firebaseコマンドを実行する。
手順⑤　「package.json」に@nuxtjs/firebaseが追加されていたらOK。

デプロイする。

手順①　npm run generateコマンドを実行する。
手順②　firebase deployコマンドを実行する。