Nuxt.js を Google Cloud Functions ベータ node 8で動かしてみた。

はじめに

用語として、node.js v8をnode8と言っています。
つまり、node.js v6はnode6とここでは書かせてもらっています。

試行錯誤の流れを垂れ流しています。

firebaseのプロジェクトを使いまわしている場合のFunctionsのnodeバージョンを変更する方法がキモだと考えています。最後の方に書いています。

2018/08/25追記
書いた後に気づきましたが、Google App Engine（GAE)でもNode 8 が動くようになりました。こちらでNuxt.jsを動かす方が現実的ですね。
その場合は、以下を参照されるとよいです！
Nuxt.js on Google App Engine（GAE)

はじめに v6の前提ありき

そもそもFirebaseを使いたいのだが、Cloud functionsが対応するNode.jsが「v6.11.5」だった。

nuxt.jsを使いたいんですけど、node 8からが正式対応なのです。
node 6で動作をさせるためには、

Nuxt 1.0.0-rc11

を使用する必要がありました。
参考文献１：https://inside.dmm.com/entry/2018/04/10/nuxt-firebase
参考文献２：https://qiita.com/potato4d/items/cfddeb8732fec63cb29c

node6 でNuxt.jsが動作するようになる！？

職場の開発環境はnode8なので、お試しでnode6に切り替えてということをしながら
いろいろと試行錯誤をしていました。

しかし、node6で職場のソースビルドしてエラーでたり、
node8でnuxt.jsをビルドしてエラーしたり面倒。

なんとかnodeのバージョンを統一できないかな？って考えていたら。。。。
参考文献2の@potato4dさんの素敵なコメントが！

※https://qiita.com/potato4d/items/cfddeb8732fec63cb29c#comment-a18b2178942c0ff9fb17

Nuxt.jsのv2（開発中）からは、node6の環境で実行されたら自動的に対応してくれるとか！

じゃ、そのレガシーモードが使える先っちょNuxt.jsはどうやって使うの？って探したら
「nuxt-edge」＋「babel-polyfill」だった！

参考文献３：https://github.com/nuxt/nuxt.js/issues/2954
※ちなみにnpxも知らなかったので、更にびっくりしたことは内緒

レガシーモードを使う場合のFunctionsのNuxt.jsのサンプルは、こちらをGit Cloneして使いました。
参考文献3.5：https://github.com/williamchong007/nuxt-ssr-firebase

ただ、ローカルではnode8で作って、実行環境がnode6なので、
サンプルから少しモジュールを足していくと、妙なエラーがでてきます汗

がんばって見ましたが、解決しづらそうで、悶々としていました。。。。

そしたら、Functionsの方がnode8に対応したよ！

参考文献４：https://cloud.google.com/functions/docs/release-notes#july_24_2018

どうやったらnode8が使えるんだよ？って探したら、ありました。

gcloud beta functions deploy NAME --runtime nodejs8 --trigger-http

参考文献５：https://cloud.google.com/functions/docs/concepts/nodejs-8-runtime

そして、サンプルコードも見つけました！！
仕事が早いぜ！　デビット様！！
参考文献６：https://github.com/davidroyer/nuxt-ssr-firebase

さっそく、Git Cloneして試してみました。

Functionsでnode8で動かす方法

ちなみに、node8を指定する方法は、functionsにデプロイするpackage.jsonでengines でnode 8を指定すればよいそうです。=> firebase-toolsのv4.0.0から対応しています。

参考文献6.5: https://github.com/firebase/firebase-tools/releases/tag/v4.0.0

デイビッド様のpackage.jsonの中身
＋参考文献７：https://howtofirebase.com/cloud-functions-migrating-to-node-8-9640731a8acc

{
  "name": "functions",
  "description":
    "Nuxt-SSR-Firebase: Nuxt.js with Firebase Functions Production Setup",
  "dependencies": {
    "express": "^4.15.3",
    "firebase-admin": "~5.13.1",
    "firebase-functions": "^2.0.0",
    "nuxt": "^1.0.0"
  },
  "engines": {
    "node": "8" <-これ！
  },
  "private": true
}

※ https://github.com/davidroyer/nuxt-ssr-firebase/blob/master/prod/server/package.json

サンプルが動かない（汗）　その１

これはpackage.jsonのスクリプトがWindowsには対応していなかったから。
rmはrimrafで書いてくださったのに、mvとcpはそのままだったOrz.

さくっと書き換えて再実行。

{
  "name": "Nuxt-SSR-Firebase",
  "version": "0.1.0",
  "description": "Host Nuxt.js SSR app on Firebase Cloud Functions with Firebase Dynamic Hosting.",
  "license": "MIT",
  "author": "David Royer",
  "repository": "https://github.com/davidroyer/nuxt-ssr-firebase",
  "scripts": {
    "dev": "cd \"src\" && yarn dev",
    "build": "yarn build:nuxt && yarn clean && yarn copyassets",
    "serve": "firebase serve --only functions,hosting",
    "deploy": "firebase deploy",
    "predeploy": "yarn build",
    "setup": "yarn install && yarn setup:client && yarn setup:firebase && yarn setup:server",
    "setup:client": "cd \"src\" && yarn install",
    "setup:server": "cd \"prod/server\" && yarn install",
    "setup:firebase": "rename .setup-firebaserc .firebaserc",
    "copyassets": "yarn copydist && yarn copystatic",
    "copydist": "cpx prod/server/nuxt/dist/* prod/client/assets",
    "copystatic": "cpx src/static/* prod/client",
    "clean": "rimraf prod/client/assets/*",
    "build:nuxt": "cd \"src\" && yarn build"
  },
  "devDependencies": {
    "cpx": "^1.5.0",
    "cross-env": "^5.0.5",
    "rename": "^1.0.4",
    "rimraf": "^2.6.2"
  }
}

サンプルが動かない（汗）　その２

デプロイを開始したら、node8らしくないエラーで終了（汗）
firebaseのプロジェクトを使いまわしているからかもしれない。

あとは、先程の「engines + node8」というpackage.jsonの記述がガセネタだったのか？？？

PS D:\dev\nuxt\nuxt-ssr-firebasev8> yarn deploy
yarn run v1.9.4
$ yarn build
$ yarn build:nuxt && yarn clean && yarn copyassets
$ cd "src" && yarn build
warning package.json: No license field
$ nuxt build
  nuxt:build Building... +0ms
  nuxt:build App root: D:\dev\nuxt\nuxt-ssr-firebasev8\src +0ms
  nuxt:build Generating D:\dev\nuxt\nuxt-ssr-firebasev8\prod\server\nuxt files... +0ms
  nuxt:build Generating files... +33ms
  nuxt:build Generating routes... +21ms
  nuxt:build Building files... +79ms
  ████████████████████ 100%

Build completed in 15.586s



 DONE  Compiled successfully in 15593ms                                                                                                                                                     21:36:36
Hash: 0a5c69e01677d35d04e9
Version: webpack 3.12.0
Time: 15593ms
                                   Asset       Size  Chunks             Chunk Names
 layouts_default.64b16b028d04a5151d1d.js    3.75 kB       0  [emitted]  layouts_default
     pages_index.46738e106a2e79aaad58.js    3.22 kB       1  [emitted]  pages_index
     pages_page3.603df3e85c71be09a998.js     1.2 kB       2  [emitted]  pages_page3
     pages_page2.6e95c29c7a23bf34a35c.js     1.2 kB       3  [emitted]  pages_page2
          vendor.5a8a5463dbe86c3ce54c.js     262 kB       4  [emitted]  vendor
             app.fadc87ed5e629f67643f.js    28.5 kB       5  [emitted]  app
        manifest.0a5c69e01677d35d04e9.js    1.55 kB       6  [emitted]  manifest
app.cf5dd8ccbe9fdbf73a03c079fd3fb3de.css    2.78 kB       5  [emitted]  app
                                LICENSES  996 bytes          [emitted]
 + 3 hidden assets
Hash: 32451ea5962f77e28905
Version: webpack 3.12.0
Time: 517ms
             Asset    Size  Chunks             Chunk Names
server-bundle.json  144 kB          [emitted]
  nuxt:build Building done +19s
$ rimraf prod/client/assets/*
$ yarn copydist && yarn copystatic
$ cpx prod/server/nuxt/dist/* prod/client/assets
$ cpx src/static/* prod/client
$ firebase deploy

=== Deploying to 'nuxt-firebase-xxxxx'...

i  deploying functions, hosting
i  functions: ensuring necessary APIs are enabled...
+  functions: all necessary APIs are enabled
i  functions: preparing prod/server directory for uploading...
i  functions: packaged prod/server (262.97 KB) for uploading
+  functions: prod/server folder uploaded successfully
i  hosting: preparing prod/client directory for upload...
!  Warning: Public directory does not contain index.html
+  hosting: 14 files uploaded successfully
i  functions: creating function nuxtssr...
i  functions: deleting function ssrapp...
+  functions[ssrapp]: Successful delete operation.
!  functions[nuxtssr]: Deployment error.
Function load error: Code in file index.js can't be loaded.
Is there a syntax error in your code?
Detailed stack trace: /user_code/node_modules/nuxt/lib/core/module.js:14
  async ready() {
        ^^^^^

SyntaxError: Unexpected identifier
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:549:28)
    at Object.Module._extensions..js (module.js:586:10)
    at Module.load (module.js:494:32)
    at tryModuleLoad (module.js:453:12)
    at Function.Module._load (module.js:445:3)
    at Module.require (module.js:504:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/user_code/node_modules/nuxt/lib/core/index.js:2:16)


Functions deploy had errors. To continue deploying other features (such as database), run:
    firebase deploy --except functions

Error: Functions did not deploy properly.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
PS D:\dev\nuxt\nuxt-ssr-firebasev8>

調べていくと、「Cloud Functions Console editor」という部分でnodeの実行環境を６と８で切り替えられるみたい。
参考文献８：https://stackoverflow.com/questions/47712018/google-cloud-functions-node-js-8-9-x-lts-and-koa-library

「Cloud Functions Console editor」がどこやねん？って調べてみると、
GCP コンソールの「Cloud Functions」のところでした。

ここにデプロイしているFunctionsが見れました。
今は、修正済みですが、ランタイムが「Node.js 6」でした。

名前にカーソルを持っていくとクリックができて、詳細画面に行きます。
※右端の縦●３つのポップアップメニューに詳細がないのが残念；；

詳細画面で、編集をクリックすると以下の写真の画面に変わります。
ランタイムをクリックして、「Node.js　8（ベータ版）」に切り替えて
「保存」をクリックします。

この状態で変更が完了するまで3分ぐらい待ちました。
裏でサーバを作り変えているのかもしれません。。。。

ついに動く！

念の為、再デプロイを実行したら完了しました！

PS D:\dev\nuxt\nuxt-ssr-firebasev8> firebase deploy

=== Deploying to 'nuxt-firebase-xxxxx'...

i  deploying functions, hosting
i  functions: ensuring necessary APIs are enabled...
+  functions: all necessary APIs are enabled
i  functions: preparing prod/server directory for uploading...
i  functions: packaged prod/server (262.97 KB) for uploading
+  functions: prod/server folder uploaded successfully
i  hosting: preparing prod/client directory for upload...
!  Warning: Public directory does not contain index.html
+  hosting: 14 files uploaded successfully
i  functions: updating function nuxtssr...
+  functions[nuxtssr]: Successful update operation.

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/nuxt-firebase-xxx/overview
Hosting URL: https://nuxt-firebase-xxxxx.firebaseapp.com
PS D:\dev\nuxt\nuxt-ssr-firebasev8>