サーバレスアーキテクチャとNuxtで特設サイトを作った話

2019/12/23 Roppongi.Vue #4

以前書いた記事(スライドはNuxt.jsメインで書いていますが、こちらはサーバーレスメインで書いています)
https://blog.potproject.net/2019/10/03/nuxt-serverless-tips

Transcript

1. サーバレスアーキテクチャとNuxtで 特設サイトを作った話
 Roppongi.Vue #4
 @potproject

2. 自己紹介
 @potproject @potpro
 https://blog.potproject.net/
 • 仕事
 AWS / PHP / Golang / JavaScript(Vue.js)
 • 趣味
 Kubernetes / Golang / JavaScript(React) / SPA(温泉)

3. 今日話す内容
 
 • Vue.js 1割
 • Nuxt.js 5割
 • サーバレスアーキテクチャ 4割
 
 (Vue.jsのコアな話を期待していた方はゴメンナサイ)
 

4. 特設サイトの概要
 ECの特設(LP)サイト
 特別な商品や売れてる商品などを表示
 • インフラはAWS
 • サーバーレスアーキテクチャを採用
 • Nuxt.js
 • BFFのためのAPIも共存していました

5. 採用した理由
 • Nuxt.js - Vue.jsを使ったWebアプリフレームワーク
 ◦ Vue.jsの知見があった
 ◦ 新規のWeb開発だったため、シンプルかつ素早く構築できるNuxt.jsを採用
 
 • サーバーレスアーキテクチャ
 ◦ 始まった瞬間や商品を切り替わる瞬間に大量アクセスが見込まれる
 ▪ 大量のアクセスでも対応できるアーキテクチャにしたい
 ◦ サーバを意識せず、工数もそこまで無いので開発に専念したい
 

6. サーバーレス(AWS) + Nuxt.js
 を実現するには？

8. S3 と CloudFront を使用してAWS へデプロイするには？ https://ja.nuxtjs.org/faq/deployment-aws-s3-cloudfront/
 nuxt generate コマンドで静的ページ(プリレンダリング)を生成
 ↓
 S3(AWSのファイルストレージサービス)にアップロード
 ↓
 CloudFront(AWSのCDN)設定でS3のファイルをWebサイトとして配信
 デプロイ時にはキャッシュを削除する

9. しかし問題点

10. nuxt generateでの問題点
 nuxt generate コマンドで生成されるものは静的ファイル(html,js,image等)
 サーバサイドレンダリングは出来ない
 
 • SEO問題(静的なのでhtmlで生成できる物に限界がある)
 • 動的な要素が入る可能性がある場合うまく動作しない可能性
 • ソーシャルでの流入も考えているため、OGPタグ等が動作する必要あり
 
 
 
 → SSR(サーバサイドレンダリング)が要件として必須に

11. サーバーレス(AWS) + Nuxt.js
 でSSRを実現するには？
12. API GatewayとLambdaを使用してサーバレスアプリ ケーションを構築
 AWS Lambda
 • AWSのFaaS
 • サーバを意識することなくNode.jsアプリケーションを動かすことが可能
 • 大量に動作したときも自動でスケールする
 API Gateway
 • Lambda自体にWebサーバの機能がない
 • API GatewayはLambdaで処理したデータを返すエンドポイントとして使用できる
 

13. AWS Lambda上でNuxtを動かす
 • Nuxtでの設定をmode: 'universal'にする
 
 • ExpressのミドルウェアとしてNuxtを動かす必要がある
 Express : Node.js用のWebアプリケーションフレームワーク 
 • ExpressはそのままLambda上で動かない
 AWSが公開しているライブラリ aws-serverless-express を使用
 Expressの上にラップする形で動作するようになる
 https://github.com/awslabs/aws-serverless-express

14. AWS Lambda上でNuxtを動かす(index.js)
 index.jsではaws-serverless-expressライブラリを使ってLambdaからの値をproxy
 app.jsではExpressのミドルウェアとしてNuxtを動かす
 Nuxtはv2.5よりnuxt.ready関数で待ち、readyになればnuxt.render関数でSSRが可能にな る仕組み
 

15. AWS Lambda上でNuxtを動かす(app.js)

16. そのほかリリースのためにやったこと
17. Serverless Framework
 https://serverless.com/
 今回の特設サイトを「開発に注力できるようにした」強力な武器
 サーバレスアプリケーションの構成管理やデプロイのためのツール(OSS)
 設定はymlファイルにS3/Lambda/API Gateway等の構成を書くだけ
 sls deploy コマンド1つだけで自動的に環境が作られ、デプロイできる
 
 npmから導入できるので今回の構成とも非常に相性が良い
 ※今回はテーマから外れるのでここで割愛

18. パフォーマンスチューニング
 • ブランド画像や商品画像など多くの画像があり、ほとんどの画像は遅延読み込み に変更(ファーストビューの向上)
 ◦ Vue-lazyload ライブラリを使用すれば簡単に実装可能 
 
 • Nuxtで生成されるアセットはCDN(Cloudfront)を活用してキャッシュする
 ◦ _nuxtディレクトリに生成されるファイルは本番用であればファイルのハッシュを含む名前になってい るため、ファイルキャッシュ時間を無限に設定しても問題ない 
 ◦ 静的ファイルはCDNから配信することで負荷を減らせる 

19. 当日
20. 当日の様子
 開始直後にアクセス数が20倍に跳ね上がった
 
 
 
 
 応答時間はほぼ変わらず、問題なくSSR部分に関しては表示できていた
 (事前に負荷テストはしていたのですが、よかった)
 

21. 終わってみて
22. まとめ
 • 環境が整っていたおかげでかなりスムーズに開発に専念出来た
 ◦ 当日にいきなりの修正依頼にも柔軟に対応
 
 • Nuxt.js自体も使いやすく、コンポーネントごとに分割できていたので改修も やりやすかった
 
 • しかし、やはりサーバレスアーキテクチャは「サーバの知識が無くて動かせ る」わけではない
 

23. でも実は・・・
 Nuxtとサーバーレスアーキテクチャはいいぞという話でしたが、苦労や障害が全然無 かったわけではなく・・・
 
 Nuxt以外の部分(BFF)にて、設計上の大きな問題があって特設サイト用のデータベース を数十倍にスケールアウトしたりキャッシュを消したりいろいろありはしました

24. ご清聴ありがとうございました！