Help us understand the problem. What is going on with this article?

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

idani
井谷(いだに)と申します。 前職では、cakePHPとjQueryとVue.jsを使って、メール配信、SMS配信、セミナー募集システム、かんたんな決済処理、アフィリエイトシステムなどを開発していました。 使える言語は、C、C++、Perl、C#、PHP、JSになります。 昔々、Gentoo Linuxの翻訳作業をしていました。
https://hirotae.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした