PWA を Nuxt.js + Serverlessで 本番投入して得たノウハウとハマりポイント

PWA を Nuxt.js + Serverlessで 本番投入して得たノウハウとハマりポイント

3cc4f0debcce413ded3a2ab737f79fa7?s=128

Yuichiro Matsuda

July 17, 2019
Tweet

Transcript

  1. PWA を Nuxt.js + Serverlessで 本番投入して得たノウハウとハマりポイント

  2. Growing Experience 今日のテーマ

  3. Growing Experience 今日のテーマ • 技術選定 ◦ PWA導入の検討 ◦ プロトタイピング •

    ハマりポイント ◦ Lambdaのコールドスタート ◦ S3, Lambdaの容量制限
  4. Growing Experience 自己紹介

  5. Growing Experience 松田 裕一郎 リードエンジニア 得意領域はフロントエンド。CSSが好きです。 海馬沢 大 エンジニアリングマネージャー 得意領域はバックエンド・インフラ。日本酒が好きなおじさん。

    自己紹介
  6. Growing Experience 技術書典

  7. Growing Experience 技術書典6 PWA導入本を頒布 500円 56/100冊 会社としては初のサークル参加。 表紙デザインはデザイナーさんに依頼。 2人とも個人での出展もしていたため、 かなりハードな執筆でした。。。

  8. Growing Experience PWAとして作ったアプリ

  9. Growing Experience 収益物件.com 不動産投資初心者向けアプリ ポータルサイトとしての物件閲覧 スコアリングシステムなどを提供 https://syueki-bukken.com/ 不動産投資家向け マッチングポータル

  10. Growing Experience Client API Gateway Lambda Nuxt.js アプリケーション構成図

  11. Growing Experience PWAとは?

  12. Growing Experience PWAとは • Progressive Web Apps • インストール可能(Google Play)

    • プッシュ通知 • オフライン対応 • バックグラウンド同期
  13. Growing Experience PWA採用のきっかけ

  14. Growing Experience iOSアプリからスタートし、Android/Webへの展開 iOS App Android Web &

  15. Growing Experience Android, Webそれぞれでの開発 iOS App Android Web &

  16. Growing Experience 技術選定

  17. Growing Experience 技術選定 • Nuxt.js vs Next.js • Serverless Framework

    • プロトタイピング
  18. Growing Experience Nuxt.js Vue.jsのフレームワーク Nuxt Communityが管理しているOSS Next.js React.jsのフレームワーク ZEIT社が管理しているOSS Nuxt.js

    vs Next.js
  19. Growing Experience Nuxt.js(21k Stars) 日本コミュニティが活発 モジュールやテンプレートが公式で用意されている Next.js(31k Stars) 日本以外ではNext.jsが多い モジュールやテンプレートは有志が開発したものを利用

    特徴
  20. Growing Experience Nuxt.js

  21. Growing Experience Next.js

  22. Growing Experience • Vue.jsが既存のWeb開発から移行しやすい ◦ template, script, styleタグは既存の概念のまま • Vue.jsの経験者が社内にいた

    ◦ リリーススケジュールとの兼ね合い、属人化の緩和 • 新しいチャレンジ ◦ React.js + Redux vs Vue.js + Vuex 最終的にNuxt.jsに決めたポイント
  23. Growing Experience Serverless環境構築を容易にするフレームワーク AWS, GCP, Azureなどの環境をサポート serverless.ymlを使ってデプロイ設定を行う AWSの場合は、CloudFormationを使って デプロイを自動化している Serverless

    Framework Serverless
  24. Growing Experience serverless.yml

  25. Growing Experience server/handler.js

  26. Growing Experience server/index.js

  27. Growing Experience デプロイ • serverless-domain-managerでRoute53にドメイン作成 • デプロイコマンドの実行 • 参考 ◦

    Serverless Framework - AWS Deploying ◦ How to set up a custom domain name for Lambda & API Gateway with Serverless
  28. Growing Experience serverless.yml

  29. Growing Experience デプロイコマンド

  30. Growing Experience • 物件一覧、物件詳細、ログインまでを確認 • staging環境にデプロイできることを確認 プロトタイピング

  31. Growing Experience ハマりポイント

  32. Growing Experience ハマりポイント • Lambdaのコールドスタート • S3, Lambdaの容量制限 • 手動でAPI

    GWなどの設定を消すとコマンドがエラーになる • 画像が表示されない • メディアクエリが効かない • CORS • 初期表示が遅い(APIが遅い) • ログが見づらい
  33. Growing Experience • 問題 ◦ Lambdaの起動が遅い(数十秒) ◦ タイムアウトしてしまう • 対策

    ◦ https://serverless.com/blog/keep-your-lambdas-warm/ ◦ serverless-plugin-warmupを導入 Lambdaのコールドスタート
  34. Growing Experience • 問題 ◦ Lambdaの起動が遅い(数十秒) ◦ タイムアウトしてしまう • 対策

    ◦ https://serverless.com/blog/keep-your-lambdas-warm/ ◦ serverless-plugin-warmupを導入 serverless.yml
  35. Growing Experience S3, Lambdaの容量制限 • 問題 ◦ S3でアップロードできる容量に制限がある ◦ Lambdaは75GBまでしか保存できない

    ▪ 過去のバージョンが残ってしまっている • 対策 ◦ S3 => 不要なファイルをアップロードしない ◦ Lambda => serverless-prune-pluginを導入
  36. Growing Experience • 問題 ◦ Lambdaの起動が遅い(数十秒) ◦ タイムアウトしてしまう • 対策

    ◦ https://serverless.com/blog/keep-your-lambdas-warm/ ◦ serverless-plugin-warmupを導入 serverless.yml
  37. Growing Experience 今日のテーマ • 技術選定 ◦ PWA導入の検討 ◦ プロトタイピング •

    ハマりポイント ◦ Lambdaのコールドスタート ◦ S3, Lambdaの容量制限