July 10, 2020

NextJS で Firebase にデプロイする

プログラミング

Firebase

NextJS

next.js で実装したアプリケーションを、Firebase にのせたいという場合、Cloud Functions, Hosting を使って実現できます。

next.js 公式リポジトリの examples にもあるので、そのとおりにすれば良いでしょう。

今回は、後から Firebase を使用するように切り替える場合の作業ログを残します。

最初から Firebase で運用することが決まっているなら

npx create-next-app --example with-firebase-hosting with-firebase-hosting-app するなりして、この example の雛形から始めるのが早い。

https://github.com/vercel/next.js/blob/canary/examples/with-firebase/

vercel/next.js

The goal is to host the Next.js app on Firebase Cloud Functions with Firebase Hosting rewrite rules so our app is served from our Firebase Hosting URL. Each individual page bundle is served in a new call to the Cloud Function which performs the initial server render.

https://github.com/vercel/next.js/blob/canary/examples/with-firebase-hosting/README.md

デプロイする

この場合は、npm run deploy するだけ。

この example を使うと、npm run deploy でデプロイする様になっている。firebase deploy ではないので注意

既存の NextJS アプリを Firebase にデプロイしたい

with-firebase-hosting の内容から差分を適用するのが良い。

package.json

https://github.com/vercel/next.js/blob/canary/examples/with-firebase-hosting/package.json

を参考に、deploy に関する部分を移植

functions の設定項目として engines, main を追加。

...
"engines": {
  "node": "10"
},
"main": "firebaseFunctions.js",
...

scripts に serve, shell, deploy, logs を追加。

"scripts": {
	...
	"serve": "npm run build && firebase emulators:start --only functions,hosting",
	"shell": "npm run build && firebase functions:shell",
	"deploy": "firebase deploy --only functions,hosting",
	"logs": "firebase functions:log"
}

dependencies, devDependencies に firebase 関連のものがなければ追加

"dependencies": {
	"firebase-admin": "^8.9.0",
	"firebase-functions": "^3.3.0",
	...
},
"devDependencies": {
  "firebase-functions-test": "^0.1.6",
  "firebase-tools": "^8.0.1"
	...
  }
}