DEV Community

dala00
dala00

Posted on • Originally published at crieit.net

App Engineの標準環境でNuxtを使って無料SSR

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
Enter fullscreen mode Exit fullscreen mode

とりあえずこれで動くかざっと確認しておきます。

yarn run dev
Enter fullscreen mode Exit fullscreen mode

http://localhost:3000にアクセスして動いていればOKです。

GAEにはビルド済みのものをデプロイするため、予めNuxtプロジェクトのビルドまで行っておきます。

yarn run build
Enter fullscreen mode Exit fullscreen mode

Google App Engine用の設定

Nuxt.js on Google App Engine(GAE)

上記のページを参考にし、package.jsonのstartスクリプトにポートとホストの設定を行っておきます。(ポートは不要とコメントには書かれているようです)

"start": "HOST=0.0.0.0 PORT=8080 nuxt start",
Enter fullscreen mode Exit fullscreen mode

app.yamlも作っておきます。handlersを設定して静的ファイルをキャッシュするようにしないとメモリ不足で止まってしまうらしいです。

runtime: nodejs8
env: standard
handlers:
- url: /_nuxt
  static_dir: .nuxt/dist
- url: /.*
  script: auto
Enter fullscreen mode Exit fullscreen mode

僕の場合はいつの間にか.gcloudignoreファイルがあったので、そちらにデプロイしないファイルを設定しておきました。ない場合は作っておきましょう。.gitnode_modulesをデプロイしてしまうとうまくデプロイできないらしいです。

あとはGAEにデプロイします。

gcloud app deploy
Enter fullscreen mode Exit fullscreen mode

ただ、僕の場合エラーになりました。下記を参考にし、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
Enter fullscreen mode Exit fullscreen mode

まとめ

あとはGAEへのデプロイが完了したらメッセージに表示されているようにコマンドやURL直接アクセスで動作確認することができます。問題なくNuxtが動作している画面が表示されていれば完成です。

ソースを見てみるとVueコンポーネント内の文字列などが表示されていると思います。

ただ、Google App EngineのStandard Environmentはデフォルトで128MBのメモリしか無いようです。無料枠だとそれを使うしかないのですが、Nuxtを利用したNode環境だとどの程度の動作まで耐えきれるのかが謎です。引き続き試していってみたいと思います。

Top comments (0)