クラウド道場

簡単!GAE/SE Node.jsでNuxt.jsをUniversalモードで動かしてみた

Author
Lv:1 Exp:644

VTuberとアニメとゲームをこよなく愛するエンジニア。
プログラミング言語はTypeScript・Golang・Kotlin、音楽はHR/HMとゲーム音楽が好きです。

突然ですが、皆さんは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をフル活用してモダンなアプリケーションを作りたいエンジニアを募集しています!
ご興味のある方はよろしければ是非弊社採用ページをご覧ください!

次の記事を読み込んでいます
次の記事を読み込んでいます
次の記事を読み込んでいます
次の記事を読み込んでいます
次の記事を読み込んでいます