2018-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

僕の場合はいつの間にか.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環境だとどの程度の動作まで耐えきれるのかが謎です。引き続き試していってみたいと思います。


dala00

Crieitの開発者です。 主にLAMPで開発しているSEです(在宅&常駐)。大体10年程。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, CakePHP3, Laravel5, JavaScript 趣味:Elixir, Phoenix, Node, Vue等色々

Crieitはαバージョンで開発中です。進捗は公式Twitterアカウントをフォローして確認してください。 興味がある方は是非記事の投稿もお願いします! どんな軽い内容でも嬉しいです。
関連記事

コメント