サーバレスアーキテクチャとNuxtで特設サイトを作った話
by
potproject
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
サーバレスアーキテクチャとNuxtで 特設サイトを作った話 Roppongi.Vue #4 @potproject
Slide 2
Slide 2 text
自己紹介 @potproject @potpro https://blog.potproject.net/ ● 仕事 AWS / PHP / Golang / JavaScript(Vue.js) ● 趣味 Kubernetes / Golang / JavaScript(React) / SPA(温泉)
Slide 3
Slide 3 text
今日話す内容 ● Vue.js 1割 ● Nuxt.js 5割 ● サーバレスアーキテクチャ 4割 (Vue.jsのコアな話を期待していた方はゴメンナサイ)
Slide 4
Slide 4 text
特設サイトの概要 ECの特設(LP)サイト 特別な商品や売れてる商品などを表示 ● インフラはAWS ● サーバーレスアーキテクチャを採用 ● Nuxt.js ● BFFのためのAPIも共存していました
Slide 5
Slide 5 text
採用した理由 ● Nuxt.js - Vue.jsを使ったWebアプリフレームワーク ○ Vue.jsの知見があった ○ 新規のWeb開発だったため、シンプルかつ素早く構築できるNuxt.jsを採用 ● サーバーレスアーキテクチャ ○ 始まった瞬間や商品を切り替わる瞬間に大量アクセスが見込まれる ■ 大量のアクセスでも対応できるアーキテクチャにしたい ○ サーバを意識せず、工数もそこまで無いので開発に専念したい
Slide 6
Slide 6 text
サーバーレス(AWS) + Nuxt.js を実現するには?
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
S3 と CloudFront を使用してAWS へデプロイするには? https://ja.nuxtjs.org/faq/deployment-aws-s3-cloudfront/ nuxt generate コマンドで静的ページ(プリレンダリング)を生成 ↓ S3(AWSのファイルストレージサービス)にアップロード ↓ CloudFront(AWSのCDN)設定でS3のファイルをWebサイトとして配信 デプロイ時にはキャッシュを削除する
Slide 9
Slide 9 text
しかし問題点
Slide 10
Slide 10 text
nuxt generateでの問題点 nuxt generate コマンドで生成されるものは静的ファイル(html,js,image等) サーバサイドレンダリングは出来ない ● SEO問題(静的なのでhtmlで生成できる物に限界がある) ● 動的な要素が入る可能性がある場合うまく動作しない可能性 ● ソーシャルでの流入も考えているため、OGPタグ等が動作する必要あり → SSR(サーバサイドレンダリング)が要件として必須に
Slide 11
Slide 11 text
サーバーレス(AWS) + Nuxt.js でSSRを実現するには?
Slide 12
Slide 12 text
API GatewayとLambdaを使用してサーバレスアプリ ケーションを構築 AWS Lambda ● AWSのFaaS ● サーバを意識することなくNode.jsアプリケーションを動かすことが可能 ● 大量に動作したときも自動でスケールする API Gateway ● Lambda自体にWebサーバの機能がない ● API GatewayはLambdaで処理したデータを返すエンドポイントとして使用できる
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
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が可能にな る仕組み
Slide 15
Slide 15 text
AWS Lambda上でNuxtを動かす(app.js)
Slide 16
Slide 16 text
そのほかリリースのためにやったこと
Slide 17
Slide 17 text
Serverless Framework https://serverless.com/ 今回の特設サイトを「開発に注力できるようにした」強力な武器 サーバレスアプリケーションの構成管理やデプロイのためのツール(OSS) 設定はymlファイルにS3/Lambda/API Gateway等の構成を書くだけ sls deploy コマンド1つだけで自動的に環境が作られ、デプロイできる npmから導入できるので今回の構成とも非常に相性が良い ※今回はテーマから外れるのでここで割愛
Slide 18
Slide 18 text
パフォーマンスチューニング ● ブランド画像や商品画像など多くの画像があり、ほとんどの画像は遅延読み込み に変更(ファーストビューの向上) ○ Vue-lazyload ライブラリを使用すれば簡単に実装可能 ● Nuxtで生成されるアセットはCDN(Cloudfront)を活用してキャッシュする ○ _nuxtディレクトリに生成されるファイルは本番用であればファイルのハッシュを含む名前になってい るため、ファイルキャッシュ時間を無限に設定しても問題ない ○ 静的ファイルはCDNから配信することで負荷を減らせる
Slide 19
Slide 19 text
当日
Slide 20
Slide 20 text
当日の様子 開始直後にアクセス数が20倍に跳ね上がった 応答時間はほぼ変わらず、問題なくSSR部分に関しては表示できていた (事前に負荷テストはしていたのですが、よかった)
Slide 21
Slide 21 text
終わってみて
Slide 22
Slide 22 text
まとめ ● 環境が整っていたおかげでかなりスムーズに開発に専念出来た ○ 当日にいきなりの修正依頼にも柔軟に対応 ● Nuxt.js自体も使いやすく、コンポーネントごとに分割できていたので改修も やりやすかった ● しかし、やはりサーバレスアーキテクチャは「サーバの知識が無くて動かせ る」わけではない
Slide 23
Slide 23 text
でも実は・・・ Nuxtとサーバーレスアーキテクチャはいいぞという話でしたが、苦労や障害が全然無 かったわけではなく・・・ Nuxt以外の部分(BFF)にて、設計上の大きな問題があって特設サイト用のデータベース を数十倍にスケールアウトしたりキャッシュを消したりいろいろありはしました
Slide 24
Slide 24 text
ご清聴ありがとうございました!