Edited at

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

More than 1 year has passed since last update.


はじめに

用語として、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」だった。

2018-05-27_11h13_06.png

nuxt.jsを使いたいんですけど、node 8からが正式対応なのです。

node 6で動作をさせるためには、

Nuxt 1.0.0-rc11

を使用する必要がありました。

参考文献1:https://inside.dmm.com/entry/2018/04/10/nuxt-firebase

参考文献2:https://qiita.com/potato4d/items/cfddeb8732fec63cb29c


node6 でNuxt.jsが動作するようになる!?

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

いろいろと試行錯誤をしていました。

しかし、node6で職場のソースビルドしてエラーでたり、

node8でnuxt.jsをビルドしてエラーしたり面倒。

なんとかnodeのバージョンを統一できないかな?って考えていたら。。。。

参考文献2の@potato4dさんの素敵なコメントが!

2018-08-12_22h19_49.png

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

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

じゃ、そのレガシーモードが使える先っちょNuxt.jsはどうやって使うの?って探したら

「nuxt-edge」+「babel-polyfill」だった!

参考文献3: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に対応したよ!

2018-08-12_22h36_48.png

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

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

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

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

そして、サンプルコードも見つけました!!

仕事が早いぜ! デビット様!!

参考文献6: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の中身

+参考文献7: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


サンプルが動かない(汗) その1

これは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"
}
}


サンプルが動かない(汗) その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の実行環境を6と8で切り替えられるみたい。

参考文献8: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」でした。

2018-08-12_23h06_16.png

名前にカーソルを持っていくとクリックができて、詳細画面に行きます。

※右端の縦●3つのポップアップメニューに詳細がないのが残念;;

詳細画面で、編集をクリックすると以下の写真の画面に変わります。

ランタイムをクリックして、「Node.js 8(ベータ版)」に切り替えて

「保存」をクリックします。

2018-08-12_23h10_44.png

この状態で変更が完了するまで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>

2018-08-12_23h20_35.png