Nuxt.jsとFirebaseによるSPA × SSR × PWAでnode_modulesパッケージを追加する際の注意点

はじめに

この記事は最近話題になってたNuxt.jsとFirebaseでSPA × SSR × PWAを実装するという以下の記事を元に進めています

Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する

記事の通りに実装し、SPA × SSR × PWAをhello worldすることはできたのですが、その後Firebaseで認証やらを実装しようとしたときに恥ずかしながらハマってしまった点を書きます

行おうとしてたこと

• FirebaseのGoogle認証を実装する

ハマったこと

Google認証自体は以下のコードみたいに書けば非常に簡単に実装できます FirebaseのAuthすごい

詳しくは公式ドキュメント呼んでください

import firebase from 'firebase'
const config = {
  apiKey: "<API_KEY>",
  authDomain: "<PROJECT_ID>.firebaseapp.com",
  databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
  storageBucket: "<BUCKET>.appspot.com",
  messagingSenderId: "<SENDER_ID>",
}
firebase.initializeApp(config)

const provider = new firebase.auth.GoogleAuthProvider()
firebase.auth().signInWithRedirect(provider) // サインインする 実際はvuexのaction等で利用

しかし！Firebase上にデプロイしてみると500errorが。。。

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

原因

原因は/srcのpakcage.jsonにのみfirebaseパッケージを追加しており、/functionsには追加していなかったことでした。

つまりこんな感じにする必要があります

src/package.json

{
  ...
  "dependencies": {
    "ajv": "^6.0.0",
    "babel-plugin-module-resolver": "^2.7.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-stage-0": "^6.24.1",
    "firebase": "^5.0.1", // firebase追加
    "nuxt": "1.0.0-rc11",
    "vue": "2.4.4",
    "vuex": "^3.0.1",
  },
  ...
}

functions/package.json

{
  ...
  "dependencies": {
    "ajv": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.23.0",
    "clone": "^2.1.1",
    "debug": "^3.1.0",
    "es6-promise": "^4.1.1",
    "express": "^4.15.4",
    "firebase": "^5.0.1", // こっちにもfirebase追加！
    "firebase-admin": "5.10.0",
    "firebase-functions": "0.8.2",
    "lodash": "^4.17.5",
    "nuxt": "1.0.0-rc11",
    "vue": "2.4.4",
    "vue-meta": "^1.4.4",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1",
  },
  ...
}

今回のような場合ではパッケージを追加する際は、/srcのpackage.jsonに追加するだけでなく、/functionsのpackage.jsonにも追加する必要があります。
これは/functionsのコードがFirebaseのCloud Functions上のサーバーで実行され、最終的にSSRを行うのはFunctionsであるからです。

終わりに

ちゃんと元記事を読まなかったために/funtcionsの役割、つまりFirebaseのCloud functions上で動作するものということを理解せずに使用していたのが根本的な問題でした
はじめにとにかくコピーなりなんなりして動くものを作るのも大切ですが、その後ハマった部分を原因調査するために、改めてきちんとした構造理解をするというステップが学習の上で最も大切な気がしました。

きちんとドキュメント読み直します