WEBエンジニア勉強会#14で発表した資料です。 サーバレス、簡単ではないよねって言う戒めでした。

1. 失敗から知るAWSサーバレス
~ API Gateway Lambda編 ~
@WEBエンジニア勉強会#WEM14
江口 悠
アシアル株式会社

2. アシアル株式会社

3. アシアル株式会社
受託開発チーム所属
江口 悠
PMとかSEとかPGとか人事とか...
※未だに会社プロフに画像載せていないので
あまり使っていないFacebookの画像でもw

4. LaravelJPConference2020
2020/03/21(土) 開催!!
https://conference2020.laravel.jp

5. ● はじめに
● サンプル構成
● サーバレス失敗談
● まとめ
AGENDA

6. はじめに
AWS使ってますか？
サーバレス開発やってますか？？

7. クライアントからの要件・・・
はじめに
写真を共有できるSNSアプリを作りたい。
AWS使って、サーバレスで構築してよ

8. はじめに
クライアントから直接
アーキテクチャにサーバレス
前提でお話を頂くこともあれば・・・

9. 「サーバレス」・・・
はじめに
社内管理システムを
構築して欲しい
開発部門
発注元部門
当然サーバレスで
作るでしょ！！

10. クライアント企業の開発部門が
サーバレスで作ってくれないかと
アーキテクチャの相談を頂くことも多い
はじめに

11. 「サーバレス」が前提のシステム構築で
失敗した話をサンプルを通して紹介。
サーバレスアーキテクチャ採用時の
参考になれば幸いです。
はじめに

12. 今回のお話はAWSに焦点を当てています。
また、「サーバレス」について議論はしたくないので、
今回は「AWSでかつ、EC2を自分で管理しないシステム」を総称
してます。
はじめに - 注) サーバレスについて -

13. 図解
サンプル構成
LambdaFunction・・・node v8.10
※SAMでlocal AWS開発
Vue・・・Nuxt2
SAM

14. ・画像を選択
・Base64にencode
・APIにBase64をupload
サンプル構成

15. Payload上限で死んだ話
Part1

16. クライアントからの要件・・・
Payload上限で死んだ話
写真を共有できるSNSアプリを作りたい。
AWS使って、サーバレスで構築してよ

17. 開発が始まる...
Payload上限で死んだ話
サーバレスで画像upload
システムを作って行こー

18. 開発は始まり...
ある程度メイン機能の開発が済み...
実戦を想定したテストが始まると...
Payload上限で死んだ話
upload機能
実装完了
テストしていきますねー

19. APIが500
エラー...???
Payload上限で死んだ話
ス
マ
ホ
スマホカメラで撮った
画像がuploadできない！

20. API GatewayのPayloadは10MB制限
Payload上限で死んだ話

21. Amazon API Gateway の制限事項と重要な注意点
Payload上限で死んだ話
ペイロードサイズ 10MB 引き上げ不可

22. Payload上限で死んだ話

23. Payload上限で死んだ話
10MBに収まる画像なら
いけるってことか！！

24. .
Payload上限で死んだ話
AGの制約です。
プログラムでは制御
できないです。。。
なるほど...
では一旦10MB以内で
再テストしよか

25. APIが500
エラー...???
Payload上限で死んだ話
ス
マ
ホ
10MB以下でも
画像がuploadできない！

26. Payload上限で死んだ話

27. Payload上限で死んだ話
ダメでした😇

28. API Gatewayの後ろに控えている
LambdaにもPayload制限がある
Payload上限で死んだ話

29. Payload上限で死んだ話
ペイロードサイズ 6MB 同期6MB(RequestResponse)
非同期128KB(event)
AWS Lambda の制限

30. APIGatewayのpayloadを超えないようにしても、
後ろに控えているLambdaが6MB上限なので、
6MB以下のpayloadに収めないといけない
Payload上限で死んだ話

31. サイズを超えた場合、500Error
キャッチアップ不可能
Payload上限で死んだ話

32. ▼回避策1
● APIの制約を理解した上で、フロントでsize判定を入れる
○ 圧縮するか、uploadさせないかなど
■ ex) canvas
▼回避策2
● APIGatewayではなく、フロントがS3に直接uploadする
○ APIでは署名URLのみを先に返却
■ 受け取った署名URLに対して、フロントがS3にupload
Payload上限で死んだ話

33. Timeout制約で死んだ話
Part2

34. Lambdaがタイムア
ウト...???
Timeout制約で死んだ話
ス
マ
ホ
プロフィール更新したの
に反映されない...？!

35. Timeout制約で死んだ話

36. Timeout制約で死んだ話
ここで
Timeout
Error

37. Timeout制約で死んだ話

38. Timeout制約で死んだ話
Lambdaのタイムアウトは最大15分まで伸ばせる！！
(2019/08/30 現在)

39. API Gatewayがタイ
ムアウト...???
Timeout制約で死んだ話
ス
マ
ホ
プロフィール更新したの
に反映されない...？!

40. Timeout制約で死んだ話
Lambdaのタイムアウトに対策しても、
APIGatewayのタイムアウト制約で
「Endpoint request timed out」が発生

41. Timeout制約で死んだ話
ここで
Timeout
Error

42. Timeout制約で死んだ話

43. ● LambdaのタイムアウトをOverして500エラー
● Lambdaのタイムアウトは15分まで伸ばせる！！
● APIGatewayは最大で29秒！！
つまるところ、29秒以内に応答を返さないといけない
Timeout制約で死んだ話

44. ▼回避策1
● Queueに退避させて、APIとしては処理終了
○ SQSなど
▼回避策2
● LambdaからLambdaを呼び出す
▼回避策3
● StepFunctionsを使う
Timeout制約で死んだ話

45. 考えなきゃいけないことが山ほどある
Timeout制約で死んだ話

46. サンプル作成時に
ハマったことw
おまけ

47. ● LAMBDA_PROXYが文字列で渡る
○ “{name: test, uploadImage: %03mmkkdk….”
とか
○ “name=test&uploadImage=%03mmkkdk….”
■ 久々の生nodeで気づかなかった...。JSON.parse()とか自前で処理。
● S3:ListBucketとS3:*ObjectでPoliciesの書き方が若干異なる
○ S3:ListBucket
■ Resource: "arn:aws:s3:::[バケット名]"
○ S3*Object
■ Resource: "arn:aws:s3:::[バケット名]/*"
※それぞれ入れ替えるとAccessDenied...
プチ ハマったこと

48. ● SAMのCORS定義でハマった
○ APIエンドポイントに個別で定義できない
○ Globals設定のApi: Corsで設定可能
プチ ハマったこと

49. プチ ハマったこと
● SAMのCORS定義でハマった

50. まとめ

51. サーバレス = 簡単な(安い)訳ではではない
※手軽ではあり、開発に集中できる利点は大きいけれども

52. そのサービス、コンポーネントに
精通していないと、
予想外な工数が発生する

53. 目的が
「サーバレスを使うこと」
になっていないか?
※そのシステム、本当にサーバレスが必要？?

54. 公式ドキュメントには一通り目を通そう
よくあるQAや、制限に目を通しておく
※見つけにくい情報も確かにあるよね

55. SAM便利！！
CFn便利！！
Infrastructure as Code！！

56. ● [AWS公式]macOSにAWS SAM CLIをインストールする
● [AWS公式]チュートリアル：Hello Worldアプリケーションのデプロイ
● [AWS公式]AWS Lambdaの制限
● [AWS公式]Amazon API Gateway の制限事項と重要な注意点
● Nuxt公式
参考・出典