Cloud RunでNuxt.js動かす時のハマりポイントと解決策[GCP+ Nuxt+Docker-compose]

2020/06/21

web

「Vue.jsのフレームワークNuxt.jsを使ってみたい」
「無料で使えるGoogle Cloud Run 環境にデプロイして使いたい」

この記事はそんな方に向けて書いています。

どうもー。GCP 大好きガッチ（@gatchsite）です。

今回は、Vue.jsのフレームワークであるNuxt.jsを使っていた際にハマった内容をまとめています。

単純にLocalで実行するだけでは、ハマる方少ないと思います。自分もNux.js 公式サイトのドキュメント読んでバッチリできました！

ただ、Dockerを使ったり、Cloud Runで動作させようと思ったら、なぜかハマったので、同じような方がいたら参考にしてもらえたらと思っています。

記事の内容はこちら

想定している環境

以下のような環境を想定しています。

開発環境
docker-compose
Nuxt.js

production環境
Google Cloud Run
docker-compose
Nuxt.js

開発環境は、docker-composeを使用してコンテナー内で実行させ、host側は汚したくない。

production環境は、Google Cloud Runを使用して、無料で動作させたいと考えてます。

マイクロサービスにも向いているので、Google Cloud Runを使用しておくとあとあと便利です。

docker環境がハマりの元凶

localde動かすことと、dockerで動かすこと、サーバーで動かすことはそれぞれ違いがあります。

なので、Nux.js 公式サイトのドキュメントの通りでは、動かなかったりするんですよね。。。

自分がハマったポイントが４つありましたので、参考にどうぞ。

Nuxt.js ハマりポイント① npx create-nuxt-app

Nuxt.jsのインストールですぐにハマりましたw悲しい。

npx create-nuxt-app [プロジェクト名] でインストールが完了と書いてあります。

ただ、コンテナー内では、インストールできないことがありました。

コンテナー内実行すると以下のエラーが発生し、一向にプロジェクトを作成してくれません。

internal/modules/cjs/loader.js:979
  throw err;
  ^

Error: Cannot find module '/root/.npm/_npx/7/lib/node_modules/create-nuxt-app/node_modules/ejs/postinstall.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:976:15)
    at Function.Module._load (internal/modules/cjs/loader.js:859:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

いろいろ調べてみると、create-nuxt-app がインストールされていないことが原因のようでした。

そこで、dockerfileに以下を追加し実行。

RUN apt-get update \
  npm i create-nuxt-app

これでも、実はダメで。。。話すと長いので、以下まとめです。

最終的には、以下の方法で落ち着きました。

Nuxt.jsのインストール自体は、host側で１度行う。
hostに作成されたnode_modules/以下は削除してしまう。
package.jsonが作成されるので、dockerfile内でnpm iし、コンテナー内でインストールする。

この流れで行うことで、host側を汚すことなくNux.jsをインストールできました。

※最初の１度だけ行う内容は、忘れがち。。。プロジェクトのREADMEに書いておくと忘れた時にも役立って便利です。

Nuxt.js ハマりポイント② npm run build

開発環境で使用する分には、npm run devで実行できてしまうので、気にせず使っていました。

いざCloud Runへデプロイするとなった時になぜか動かず。。。ハマりましたねw

productionとし実行するには、npm run build → npm run start でstartの前にbuildコマンドが必要らしいです。

公式サイトに書いてありましたね。ちゃんと読みましょうw

【公式サイト】プロダクションのデプロイ

Nuxt.js ハマりポイント③ npm run start

npm run startを実行すると、

Are you interested in participation? (Y/n)

こんな表示が出て選択しないとサーバーが立ち上がってくれません。

localでは選択できるので問題ないのですが、サーバーで実行させる際は、選択できないためサーバー起動してくれないんじゃないかと思っています。

そのため、nuxt.config.jsonに、以下を追加することで解消させます。

  telemetry: false,

ちなみに、nuxt-telemetry にて設定について記載があったので気になる方は読んでみてください。

コマンド実行時にこんな表示もありました。

NuxtJS collects completely anonymous data about usage. 
This will help us improving Nuxt developer experience over the time.
Read more on https://git.io/nuxt-telemetry

Nuxt.js ハマりポイント④ nuxt.configno設定

最後に、nuxt.config.jsonの設定ですね。

Cloud Runで実行させるには、Nuxt.jsのデフォルト設定を変更してあげる必要があります。

設定しない場合、Cloud Run上でコンテナを動作させても、外部からのアクセスができないためエラーとなってしまします。

設定は簡単で、以下を追加してください。

  server: {
    port: 8080,
    host: '0.0.0.0',
  }

Cloud Runのpost問題については、こちらの記事で書いているので気になる方は読んでみてください。

hostの設定の変更も必要なのは注意ですね。

expressを使用するときは特に問題なく動作していたので、Nux.js独自の問題なのかもしれないですね。

まとめ

Cloud Run + Nuxt.js + docker-composeでの開発環境、production環境の設定について紹介しました。

インフラの設定は調べていくと、設定ファイルの１行が足りないだけ。ってよくあるのでちょっと悲しくなりますがw

開発環境、production環境をしっかり整備しておくと必ず後から楽になりますので、使ってもらえたら嬉しいです。

少しでも良いなと思ってもらえたら嬉しいです^^その際はシェアもお願いします。

ではでは、ガッチ（@gatchsite）でした。

人気記事【node.js】Cloud FunctionsをローカルのDocker環境で実行して開発する方法

人気記事静的サイトは無料で爆速にできるらしい#Hugo[wordpress辞めよ]