【Nuxt.js v2】SSRアプリケーションをFirebaseにホスティングするために行ったこと

<前提条件>

・node.js：v10またはv12
(2021/1現在CloudFunctionsがサポートしている最新バージョン)
・Firebaseプロジェクトが従量課金プランになっていること
・CloudFunctionsに定義する関数名は”ssr”とする

Firebase CLIをインストール

npm install -g firebase-tools  

Firebaseアカウントにログイン

firebase login  

Allow Firebase to collect CLI usage and error reporting information?
→Y
ブラウザが開くので、GoogleアカウントでFirebaseにログイン

FIrebase初期化

cd <プロジェクトディレクトリ>  
firebase init  

Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.
→Cloud Functions, Hostingを選択

Please select an option
→Use an existing project
Firebaseのプロジェクトを選択

What language would you like to use to write Cloud Functions?
→javascript

Do you want to use ESLint to catch probable bugs and enforce style?
→No

Do you want to install dependencies with npm now?
→Yes

What do you want to use as your public directory?
→dist

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

Set up automatic builds and deploys with GitHub?
→No

プロジェクト直下のfirebase.jsonを編集

{  
  "functions": {  
    "functions": {  
      "source": "functions"  
    }  
  },  
  "hosting": {  
    "public": "static",  
    "ignore": [  
      "firebase.json",  
      "**/.*",  
      "**/node_modules/**"  
    ],  
    "rewrites": [  
      {  
        "source": "**",  
        "function": "ssr"  
      }  
    ]  
  }  
}  

※publicフォルダをstaticに指定することで画像などの静的ファイルがURL/ファイル名でアクセスできる
※staticフォルダ内にindex.htmlが存在していないこと
※rewritesのfunctionでCloudFunctionsの関数名を指定すると、HostingのURLから関数にアクセス可能になる

functions/package.jsonを編集

{  
 ・・・省略  
  
  "engines": {  
    "node": “10 or 12を入れる”(開発に使用しているNode.jsのバージョンを確認)  
  },  
 "dependencies": {  
   “○○○”: "^○.○.○”,  
   “○○○”: "^○.○.○”,  
   "firebase-admin": "^8.6.0",  
   "firebase-functions": "^3.○.○”,  
   "nuxt": "^2.○.○”  
 },  
 ・・・省略  
  
}  

※プロジェクト直下のpackage.jsonのdependenciesに記載されているライブラリはもれなく追加すること
※nuxtのバージョンも同じにすること

functionsに依存モジュールをインストール

cd <プロジェクトディレクトリ>/functions  
npm install  

functions/index.jsを編集

const functions = require('firebase-functions');  
const { Nuxt } = require('nuxt');  
const nuxt = new Nuxt({  
   buildDir: 'ssr',  
   dev: false  
});  
  
exports.ssr = functions.https.onRequest(async (req, res) => {  
   await nuxt.ready()  
   return nuxt.render(req, res)  
})  

※exports.メソッド名 = でssrモジュールを定義
※リクエストをNuxt.jsでルーティング、レンダリングしレスポンスを返す

・プロジェクト直下のpackage.jsonを編集

{  
 ・・・省略  
  
  "scripts": {  
    "build": "nuxt build && npm run build:copy:ssr",  
    "build:copy:ssr": "rimraf functions/ssr && mkdirp functions/ssr && cp -R .nuxt/dist functions/ssr/dist",    
  
 ・・・省略  
  
}  

※scriptsのbuildの変更と、build:copy:ssrを追加
※ビルド時に.nuxt/distのファイルが自動的にfunctions/ssr/distにコピーされる

Firebaseにデプロイ

npm run build  
firebase deploy