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

16eaadbd430e8622139d2c2ad273d0e9?s=47 potproject
December 23, 2019

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

2019/12/23 Roppongi.Vue #4

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

16eaadbd430e8622139d2c2ad273d0e9?s=128

potproject

December 23, 2019
Tweet

Transcript

  1. 2.

    自己紹介
 @potproject @potpro
 https://blog.potproject.net/
 • 仕事
 AWS / PHP /

    Golang / JavaScript(Vue.js)
 • 趣味
 Kubernetes / Golang / JavaScript(React) / SPA(温泉)

  2. 3.

    今日話す内容
 
 • Vue.js 1割
 • Nuxt.js 5割
 • サーバレスアーキテクチャ

    4割
 
 (Vue.jsのコアな話を期待していた方はゴメンナサイ)
 

  3. 5.

    採用した理由
 • Nuxt.js - Vue.jsを使ったWebアプリフレームワーク
 ◦ Vue.jsの知見があった
 ◦ 新規のWeb開発だったため、シンプルかつ素早く構築できるNuxt.jsを採用
 


    • サーバーレスアーキテクチャ
 ◦ 始まった瞬間や商品を切り替わる瞬間に大量アクセスが見込まれる
 ▪ 大量のアクセスでも対応できるアーキテクチャにしたい
 ◦ サーバを意識せず、工数もそこまで無いので開発に専念したい
 

  4. 7.
  5. 8.

    S3 と CloudFront を使用してAWS へデプロイするには? https://ja.nuxtjs.org/faq/deployment-aws-s3-cloudfront/
 nuxt generate コマンドで静的ページ(プリレンダリング)を生成
 ↓


    S3(AWSのファイルストレージサービス)にアップロード
 ↓
 CloudFront(AWSのCDN)設定でS3のファイルをWebサイトとして配信
 デプロイ時にはキャッシュを削除する

  6. 10.

    nuxt generateでの問題点
 nuxt generate コマンドで生成されるものは静的ファイル(html,js,image等)
 サーバサイドレンダリングは出来ない
 
 • SEO問題(静的なのでhtmlで生成できる物に限界がある)
 •

    動的な要素が入る可能性がある場合うまく動作しない可能性
 • ソーシャルでの流入も考えているため、OGPタグ等が動作する必要あり
 
 
 
 → SSR(サーバサイドレンダリング)が要件として必須に

  7. 12.

    API GatewayとLambdaを使用してサーバレスアプリ ケーションを構築
 AWS Lambda
 • AWSのFaaS
 • サーバを意識することなくNode.jsアプリケーションを動かすことが可能
 •

    大量に動作したときも自動でスケールする
 API Gateway
 • Lambda自体にWebサーバの機能がない
 • API GatewayはLambdaで処理したデータを返すエンドポイントとして使用できる
 

  8. 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

  9. 18.

    パフォーマンスチューニング
 • ブランド画像や商品画像など多くの画像があり、ほとんどの画像は遅延読み込み に変更(ファーストビューの向上)
 ◦ Vue-lazyload ライブラリを使用すれば簡単に実装可能 
 
 •

    Nuxtで生成されるアセットはCDN(Cloudfront)を活用してキャッシュする
 ◦ _nuxtディレクトリに生成されるファイルは本番用であればファイルのハッシュを含む名前になってい るため、ファイルキャッシュ時間を無限に設定しても問題ない 
 ◦ 静的ファイルはCDNから配信することで負荷を減らせる 

  10. 19.