突然ですが、皆さんはGAE/SEでNode.jsが使用できるようになったことをご存知でしょうか？
これによって、フルマネージドなのでアプリケーション開発者がコードの実装のみに集中できるというGAE/SEのメリットを、Node.js上で動くアプリケーションにおいても享受できるようになり、
更に今まではNode.jsに対応していなかったためにGAE/SE環境では動かすことのできなかった、SSR(サーバーサイドレンダリング)で動くアプリケーションも簡単・気軽にデプロイできるようになりました。
本記事では、フロントエンドフレームワークであるNuxt.jsを、GAE/SE Node.js環境でUniversalモード、つまりSSR(本記事では、フロントエンドとサーバーサイドで同じJavaScriptを実行し、最初のレンダリングをサーバーサイドのNode.jsで行うことを指します)で動作させる方法を皆様にお伝えいたします。
この記事を読んでわかること
この記事を読むことで、GAE/SE Node.js環境にNuxt.jsアプリケーションをUniversalモードでデプロイする方法を理解することができます。
Nuxt.jsアプリケーションの作成
まずNuxt.jsのアプリケーションを作成します。
GAE/SE Node.jsで動かすとはいっても、GAE/SE用に特別な設定などをする必要はとくにありません。
他のインフラで動かすのと同じ手順で作成していきます。
今回、私が使用したnodeとnpmのバージョンは以下の通りです。
なお、GAE/SE Node.jsは現在Node.js 10まで対応しています。
$ node -v
v10.15.3
$ npm -v
6.4.1
Nuxt.jsのアプリケーションを作成する方法はいくつかありますが、
現在主流なのはcreate-nuxt-appを使用する方法なので、今回はこの方法で作成しましょう。
$ npx create-nuxt-app gae-node-nuxt-ssr-example
上記コマンドを実行すると、対話式でNuxt.jsプロジェクトの作成をすることができます。
今回は以下の設定でプロジェクトを作成しました。
本記事はNuxt.jsの詳細を説明する記事ではないので、詳細は割愛します。
基本的にはどんな設定にしても大丈夫ですが、一点だけ気をつけなければならないことがございます。
今回のアプリケーションはSSR(サーバーサイドレンダリング)で動かしますので、
Choose rendering modeは必ずUniversalにしてください。
ここで Single Page Appを選んでしまうと後で設定ファイルの変更が必要になり、二度手間になってしまいます。
? Project name gae-node-nuxt-ssr-example
? Project description Nuxt.js(Universal Mode) on GAE/SE Node.js
? Use a custom server framework none
? Choose features to install (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Use a custom UI framework none
? Use a custom test framework none
? Choose rendering mode Universal
? Author name h-tachikawa
? Choose a package manager npm
上記設定を終えてしばらくすると、Nuxt.jsプロジェクトが作成されます。
作成されたらローカル環境で動作確認をしてみましょう。
$ cd gae-node-nuxt-ssr-example/
~/gae-node-nuxt-ssr-example (master|…) $ npm run dev
> gae-node-nuxt-ssr-example@1.0.0 dev /Users/tachikawa/gae-node-nuxt-ssr-example
> nuxt
╭─────────────────────────────────────────────╮
│ │
│ Nuxt.js v2.6.3 │
│ Running in development mode (universal) │
│ │
│ Listening on: http://localhost:3000/ │
│ │
╰─────────────────────────────────────────────╯
Preparing project for development 14:13:32
Initial build may take a while 14:13:32
Builder initialized 14:13:32
Nuxt files generated 14:13:32
Client
Compiled successfully in 3.73s
Server
Compiled successfully in 3.36s
Waiting for file changes 14:13:38
Memory usage: 122 MB (RSS: 239 MB)
このように表示されていれば、ローカル環境でUniversalモードでNuxt.jsアプリケーションが起動していますので、 http://localhost:3000 へアクセスしてみましょう。
上のような画面が表示されれば、ローカル環境で正常にアプリケーションが起動しています。
GAE/SE Node.jsへデプロイ
さて、Nuxt.jsのアプリケーションをSSRで動かすためのアプリケーション側の準備ができたので、ここからは実際にGAE/SE Node.jsへデプロイしていきます。
GAEへのデプロイを行うためにはGCPプロジェクトの作成及びCloud SDKが必要となりますので、準備がお済みでない方は以下記事をご参照ください。
【apps-gcp】初心者のためのGCPプロジェクト始め方入門
【apps-gcp】Cloud SDKコンポーネント、gcloudコマンドの使い方を解説！！
app.yaml作成
Nuxt.jsプロジェクト直下に以下の内容のapp.yamlファイルを作成します。
runtime: nodejs10
handlers:
- url: /_nuxt
static_dir: .nuxt/dist/client
- url: /.*
script: auto
env_variables:
NUXT_HOST: '0.0.0.0'
NUXT_PORT: '8080'
ここで重要なポイントは env_variables です。
GAE/SE Node.jsではホスト0.0.0.0:8080でリクエストを待ち受けます。
こちらにリクエストが来た際にNuxt.jsアプリケーションが起動する必要があるため、この記述を行っています。
デプロイ・動作確認
これで準備が完了したので、GAE/SE Node.jsにデプロイしてみましょう。
デプロイする前にNuxt.jsのソースのビルドを忘れないように気をつけましょう。
~/gae-node-nuxt-ssr-example (master|●1✚1…) $ npm run build
~/gae-node-nuxt-ssr-example (master|●1✚1…) [130] $ gcloud app deploy
Services to deploy:
descriptor: [/Users/tachikawa/gae-node-nuxt-ssr-example/app.yaml]
source: [/Users/tachikawa/gae-node-nuxt-ssr-example]
target project: [gae-node-nuxt-ssr-example]
target service: [default]
target version: [20190509t150253]
target url: [https://gae-node-nuxt-ssr-example.appspot.com]
Do you want to continue (Y/n)? Y
Beginning deployment of service [default]...
╔════════════════════════════════════════════════════════════╗
╠═ Uploading 55 files to Google Cloud Storage ═╣
╚════════════════════════════════════════════════════════════╝
File upload done.
Updating service [default]...done.
Setting traffic split for service [default]...done.
Deployed service [default] to [https://gae-node-nuxt-ssr-example.appspot.com]
You can stream logs from the command line by running:
$ gcloud app logs tail -s default
To view your application in the web browser run:
$ gcloud app browse
このような表示になればデプロイ成功です。
実際に https://gae-node-nuxt-ssr-example.appspot.com へアクセスしてみましょう。
お疲れ様でした。
これでGAE/SE Node.jsへNuxt.js(Unicersal Mode)のWebアプリケーションのデプロイが完了しました！
まとめ
本記事では、GAE/SE Node.jsでNuxt.jsをUniversalモードで動かす一連の流れを紹介いたしました。
タイトル通り簡単にSSRで動くアプリケーションをデプロイすることがお分かりいただけたかと思います。
最近はクローラーが賢くなってきていて、SEOの観点からのみ見ればSPAでも事足りる場面が増えてきてはいますが、ファーストビューが早くなったりとSSRをうまく使えばUXが向上することもまだまだあるのは間違いないので、弊社でも使うべき場面では積極的に採用していきたいと思っています。
ぜひ皆様もお試しください！
最後になりますが、クラウドエース株式会社ではGAEに限らずGCPをフル活用してモダンなアプリケーションを作りたいエンジニアを募集しています！
ご興味のある方はよろしければ是非弊社採用ページをご覧ください！