Google App Engine（GAE）のStandard EnvironmentにNode.jsが追加されているようです。元々Node.jsは有料のFlexible環境でしか使えなかったため、無料で使えるようになったのは非常に嬉しいです。
元々Firebase HostingやNetlifyで無料でNuxtを動かす事はできるのですが、それらは静的ホスティングサービスのためSSR（サーバーサイドレンダリング）ができません。（Functionsを使ったり等で可能ではあるようですが、アクセスが増えると費用がかさむようになると思います）
GAEであればサーバー上でNodeが動くためSSRも問題なく可能でSEO的にも良さそうです。ということでとりあえずGoogle App Engine上でNuxtを動かしてSSRできるところまで試してみました。
Windows SubsystemのUbuntu上で動かしました。
ローカルでNuxtプロジェクトの初期化
まずはローカルでNuxtプロジェクトを作成し、動作するようにします。
vue init nuxt-community/starter-template nuxtproject
cd nuxtproject
yarn
とりあえずこれで動くかざっと確認しておきます。
yarn run dev
http://localhost:3000にアクセスして動いていればOKです。
GAEにはビルド済みのものをデプロイするため、予めNuxtプロジェクトのビルドまで行っておきます。
yarn run build
Google App Engine用の設定
Nuxt.js on Google App Engine（GAE)
上記のページを参考にし、package.jsonのstartスクリプトにポートとホストの設定を行っておきます。（ポートは不要とコメントには書かれているようです）
"start": "HOST=0.0.0.0 PORT=8080 nuxt start",
app.yamlも作っておきます。handlersを設定して静的ファイルをキャッシュするようにしないとメモリ不足で止まってしまうらしいです。
runtime: nodejs8
env: standard
handlers:
- url: /_nuxt
static_dir: .nuxt/dist
- url: /.*
script: auto
僕の場合はいつの間にか.gcloudignoreファイルがあったので、そちらにデプロイしないファイルを設定しておきました。ない場合は作っておきましょう。.gitやnode_modulesをデプロイしてしまうとうまくデプロイできないらしいです。
あとはGAEにデプロイします。
gcloud app deploy
ただ、僕の場合エラーになりました。下記を参考にし、sqlite3のライブラリをインストールします。その後Pythonもインストールし直しが必要のようです。僕はpyenvを使っていたためアンインストールとインストールし直しが楽だったので助かりました。
【ubuntu】ImportError: No module named '_sqlite3'とでたときの対処法【Python】
sudo apt-get install libsqlite3-dev libbz2-dev libncurses5-dev libgdbm-dev liblzma-dev libssl-dev tcl-dev tk-dev libreadline-dev
まとめ
あとはGAEへのデプロイが完了したらメッセージに表示されているようにコマンドやURL直接アクセスで動作確認することができます。問題なくNuxtが動作している画面が表示されていれば完成です。
ソースを見てみるとVueコンポーネント内の文字列などが表示されていると思います。
ただ、Google App EngineのStandard Environmentはデフォルトで128MBのメモリしか無いようです。無料枠だとそれを使うしかないのですが、Nuxtを利用したNode環境だとどの程度の動作まで耐えきれるのかが謎です。引き続き試していってみたいと思います。
Top comments (0)