2019-08-19に更新

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

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

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

Nuxt.js2の場合はstatic_dirが .nuxt/dist/client でした。

費用節約のためにmax_idle_instancesを設定したりも必要になると思います。下記のページが詳しいです。

Google App Engineを無料で運用する方法(2018年版) - koni blog

僕の場合はいつの間にか.gcloudignoreファイルがあったので、そちらにデプロイしないファイルを設定しておきました。ない場合は作っておきましょう。.gitnode_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環境だとどの程度の動作まで耐えきれるのかが謎です。引き続き試していってみたいと思います。

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, React, Flutter, Vue.js, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント