サーバレスなWebアプリ作りました

背景

• 自分の手で一度Webアプリを作って少しでも実績を積みたい
  • 簡単な入出力アプリの作り方も漠然としか分からない
  • Webアプリを作ったことがない
• ついでに時間かかっても色々最近のトレンドをキャッチアップしたい
  • クラウド（AWS）
  • サーバレスアーキテクチャ（API Gateway、Lambda、S3、 ... etc.）
  • AltJS（TypeScript）
  • CSS Framework

成果物

https://www.tkm-webapp.ml/

構成

構成図

AWS構成図

drow.ioで書きました。

説明

• バックエンド（AWS）
  • S3のホスティング機能で静的コンテンツを表示
  • Freenomでドメイン取得してRoute53でDNS登録
  • SSL/TLS通信をACMとCloudFrontを使って実現
  • バックエンド処理をLambdaで実現
  • API Gatewayを用いてRESTコントローラを実現
• フロントエンド（HTML、TypeScript、CSS）
  • TypeScript + WebPacでビルド
  • CSSフレームワークはBootstrapは使ったことあったのでMaterialize CSSを利用

所感

• コストはRoute53が一番高い
  • 無料枠がどれもあるので50円ぐらいしかかからない
• CloudFrontのせいでデバッグしたあとの修正版デプロイが面倒臭い
  • キャッシュしちゃうのでそれを削除する操作が必要
  • これも規定回数以内は無料
• API Gatewayのエンドポイントを間違えていたけどエラーが分かりづらい
  • preflightが通らないとか、認証できないとかそんなエラーが出る
  • 色々調べて改めて見返したらエンドポイントのURIを間違えていた
  • こう言う作業が知識を深めるのに役立つけど中々辛かった
• Lambdaのデバッグって思ってたより簡単だった
  • CloudWatchでログが確認できる
  • Pythonで作ったがprintメソッドで簡単に出せる
• だらだらやり過ぎた
  • いくら素人でも1年はかけ過ぎた

今後の展望

特にないです。なんかアイディアあったらコメントください。 んー、勉強的な意味ならDBとか認証・認可の仕組みとかかなぁ。

最後に

GitHubに今回のコードあげてます。とても暇ならご覧ください。

github.com