サーバレスなWebサービスをいい感じに作りたい、 JavaScript が好きな方向けのお話

1. 株式会社コードナインス
高倉大幸
サーバレスなWebサービスを
いい感じに作りたい、
JavaScript が好きな方向けのお話

2. 高倉大幸
株式会社コードナインス 代表 / エンジニア
受託開発と並行して、音楽をプログラミングするJavaScriptライブラリ「Ongaq JS」を用いた
教育系サービスなど自社サービスを開発中です。
自己紹介

3. 概要
• フロントエンドは静的ファイルを公開するだけ、バックエンドはサーバレスな
APIがいるだけといった環境で動くWebサービスを作る１つのパターンをご紹介
します。
• AWSならではの要素がありますが、大枠の考え方は他のプラットフォームでも
通用するかと思います。

4. 利用する主なもの
【フロントエンド】
S3
Cloudfront
React, Vue など
任意のライブラリ
【バックエンド】
Lambda
API Gateway
Dynamo DB
Express
@vendia/serverless-express *
（旧 aws-serverless-express）
AWS
その他
【その他】
Route 53

5. サーバレスなAPIを作る
（１）Express で Web サーバを作ります。 （２）serverless-express をミドルウェア的に
使い、Lambda 関数として定義します。
[ app.js ]
[ lambda.js ]

6. サーバレスなAPIを作る
（３）AWSへのデプロイ方法を定義する
YAML を更新します。
（４）package.json のパラメータを更新します。
[ template.yaml ] [ package.json ]

7. サーバレスなAPIを作る
（５）npm コマンドでデプロイします。成功すると
https://aaaaaaaaa.execute-api.ap-northeast-1.amazonaws.com
のようなURLでAPIサーバにアクセスできるようになります。
API Gateway は次のようにリクエストのメソッドによらず
Lambda 関数に渡すような設定になります。

8. 所感いろいろ
・開発中 Webサーバを再起動するだけで動作確認でき、ログも簡単に見られるのがメリットです。
・もし「やっぱり EC2 でインスタンスを立てて Web サーバを動かそう」と思ったときも
引っ越しが簡単にできま（るはずで）す。
・Lambda 関数ごとのメモリ割り当てを調整するなど、
チューニングをどうしても細かくしたくなった場合はリファクタリングが必要かもしれません。
・インスタンスが常駐する場合と比較すると、相当コストがリーズナブルです。
・フロントエンド、バックエンド、ツール類など全て同一リポジトリで管理することを推奨します。

9. 【Twitter】
【音楽 プログラミング学習】Ongaq JS Web School
@ongaqJSws
【メール】
takakura@codeninth.com
ありがとうございました 😃
Just In
🇺🇦 ウクライナへメッセージカードを作るジェネレータを作りました
https://message4ukraine.com/