「サーバーレスアンチパターン今昔物語番外編」の SSR を試してみる #serverless_newworld

serverless-newworld.connpass.com

赤いドクロがトレードマークの西谷さんの「サーバーレスアンチパターン今昔物語番外編」で紹介された SSR を試してみたいと思います。
試す内容は、以下のブログの内容です。

www.keisuke69.net

はじめに

私は元々バックエンドエンジニアであり、その延長で AWS を触り始めました。
ゆえに、フロントエンドはめっぽう弱いので、あまり知見がないという前提での作業です。
とりあえず、AWS で動かすことを目指すので、正しいやり方かどうかは手探り状態です。

試してみる

環境構築

macOS 10.14 で作業しています。
まずは、リポジトリを取得。

$ git clone git@github.com:Keisuke69/serverless-newworld-20200909.git
$ cd serverless-newworld-20200909

Dockerfile があったので中身を見てみる。

$ head Dockerfile 
FROM node:12.18.3

node v12.18.3 が必要そうとわかったので、 ndenv で設定する。

$ ndenv install 12.18.3
Downloading node-v12.18.3-darwin-x64.tar.gz...
-> https://nodejs.org/dist/v12.18.3/node-v12.18.3-darwin-x64.tar.gz
Installing node-v12.18.3-darwin-x64...

$ ndenv local 12.18.3
$ node --version
v12.18.3

ServerlessFramework を使っているので、 serverless.yml を確認。

$ head serverless.yml 
service: nuxt-ssr
plugins: 
  - serverless-offline

frameworkVersion: '2'

provider:
  name: aws
  runtime: nodejs12.x

ServerlessFramework の v2 と serverless-offline のプラグインが必要そう。
手元の sls が v1 だったので、アップデートも兼ねてインストール。

$ npm install -g serverless
$ npm install -D serverless serverless-offline
$ sls version
Framework Core: 2.1.1
Plugin: 4.0.4
SDK: 2.3.2
Components: 3.1.3

これにて環境構築完了。

動作確認

おもむろにデプロイしてみる。

$ sls deploy
Serverless: Running "serverless" installed locally (in service node_modules)
...
.................................
Serverless: Stack update finished...
Service Information
service: nuxt-ssr
stage: dev
region: ap-northeast-1
stack: nuxt-ssr-dev
resources: 12
api keys:
  None
endpoints:
  ANY - https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/dev
  ANY - https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/dev/{proxy+}
functions:
  nuxt-ssr: nuxt-ssr-dev-nuxt-ssr
layers:
  None

デプロイはできたので、表示されたエンドポイントにアクセスしてみる...

// 20200924092440
// https://vxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/dev

{
  "message": "Internal server error"
}

内部エラーが発生してしまった。
CloudWatch Logs から該当のログを探してみてみる。
CloudWatch -> CloudWatch Logs -> Log groups -> /aws/lambda/nuxt-ssr-dev-nuxt-ssr

    "errorType": "Runtime.ImportModuleError",
    "errorMessage": "Error: Cannot find module 'nuxt'\nRequire stack:\n- /var/task/lambda.js\n- /var/runtime/UserFunction.js\n- /var/runtime/index.js",

ログを見ると nuxt なさそう。
このあたりフロントエンド全く知らない影響が出ている。
ということで、まずはローカルで動かすことを目指す。

ローカルでの動作確認

npm install をとりあえず...

$ npm install

したあとに、「 yarn のほうがいいんだっけ？」となって、 yarn で動作確認。

$ yarn install
$ yarn dev
...

   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt.js @ v2.14.6                   │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   server-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

無事に localhost:3000 で起動できた模様。
ブラウザでアクセスするとちゃんと表示されている。

f:id:omron:20200924174529p:plain

nuxt のセットアップとビルドができてないことがわかったので、ビルドして再デプロイ。

$ yarn build
$ sls deploy

API Gateway の URL に再アクセスすると、無事表示を確認。
ただし、トップページは表示されるが、各記事にアクセスするとステージ変数の /dev が抜けるため、正しく表示ができない。
これは、 API Gateway でカスタムドメイン設定をすることで、ステージ変数を省略した状態にできるのでこちらの設定をすれば解決できるとのこと。

f:id:omron:20200924175009p:plain

所感

フロントエンドエンジニアからすれば、当たり前と思える作業が省略されているため、まずはそこを調べながらの作業となってしまいましたが、とりあえず動かすことはできました。
次は、Nuxt.js を違うものに置き換えて、動かしながら理解することを目指したいと思います。

omuronの備忘録

個人的な備忘録