はじめに
用語として、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
を使用する必要がありました。
参考文献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さんの素敵なコメントが!
※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に対応したよ!
参考文献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」でした。
名前にカーソルを持っていくとクリックができて、詳細画面に行きます。
※右端の縦●3つのポップアップメニューに詳細がないのが残念;;
詳細画面で、編集をクリックすると以下の写真の画面に変わります。
ランタイムをクリックして、「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>