どうも。エンジニアです。
エンジニアたるもの、ブログをやるにしてもエンジニアっぽいことができたら面白いなと思い、日々の運動の記録公開を自動化してみようと思い立ちました。
以前の記事「運動習慣の付け方を考えてみた」でも言及はしているんですが、
習慣化をする上で、他人に宣言することは非常に重要なので、毎運動後にこのフォームを入力することで手軽に他人の目に付かせることができます（誰が見るのかは知らんけど、みんなが見てると思い込みながらやることで副次的なナルシズム的効果もありそう）。
さっそく、内容に入っていきましょう。
どういうシステム？
簡単にいうと、フォームを入力したら、そのデータと過去に蓄積したデータをもとにグラフを作って、フォームに入力された運動記録とグラフをWordPressにぶち込んで固定ページを更新する、という感じです。
↓↓実際のページは↓↓
これ、実際に固定ページを作ったときはタイトルの記録のみで、作成後は一切WordPressの管理画面から編集を加えていません。
フォームはこんな感じ。
こういうのでランニングの記録・筋トレの記録をLambdaに送ります。
ほんでLambdaでDynamoDBに記録しつつ、別のLambda関数を叩いてそのLambdaでメインの処理（グラフ作成、固定ページ更新）
フォーム送信だけで、さっきの固定ページができます。
文章とかグラフの注釈とかはAIに作らせてるので手直しはしたいな〜と思ってるんですが、個人用という名目が大きいので一旦今のままで。
突然グラフで表示するものが変わったりすると思います。
あくまで自分のためなので、しっかりちゃっかりしなくてもいいという気の楽さが結構ありますね。
以下、技術的なことにも触れておこうと思うので気になる方は読んでください。
ざっくりとした概要
AWSはやっぱり便利。
フロント：S3+ CloudFrontのサーバレスフロントエンドあるある。
バックエンド：Lambda + 関数URLでお手軽サーバレスバックエンドあるある。
以上です。
もう少し踏み込む
流石に概要だけでは味気ないですね。
フロントエンド周り
S3バケットに置く静的ファイルは、react, Next.jsでビルドしています。
別にHTMLとCSSで同じようなものはもちろん作れるんだけど、Next.jsは今の業務では触ってない（そもそも僕はバックエンドエンジニアだし）ので、触ってみたいな〜という気持ちでNextを選びました。
TypeScriptはある程度慣れているし、特にこれといった不都合はなく実装できた。
あまり語ることもないかなという感じです。
S3に配置するのはビルドされた静的ファイルのディレクトリ配下全部。
パブリックアクセスは全部切って、CloudFrontのオリジンからのアクセスを行うポリシーをアタッチするだけ。
CloudFront側でindex.htmlへアクセスさせることを忘れずに。
S3とCloudFrontの気をつけるところもこんな感じだと思います。
いっぱい記事あるんで、誰でもできるはず。
バックエンド周り
これは若干紆余曲折あったかも。
まず、バックエンドはGoを使う予定だった（理由はNextと同じで、仕事で使ってないから）。
けど、コンソールからだとGoが選べない。
いや〜ServerlessとかSAMとか今回の小規模さでやるのか〜とちょっと腰が引け、結局Pythonに。
最近AtCoderで競技プログラミングを初めたのもあって、PythonもTypeScriptほどではないけど結構かけるようになってきたし。
DynamoDBを使うのも初めてだったので、「え、どうやってカラム追加すんのこれ」みたいな、いかにもアホ丸出しみたいな状態からスタートしました。
とりあえずLambda関数の処理実装と関数URLの実装は問題なくいけたんですが、
DynamoDBへの格納と取得・グラフの生成で結構時間が溶けました。
まずfloat型じゃなくてDecimal型を使う必要があることに気づくまでに時間がかかってしまった。
エラーの確認についても、横着してフロントからAPI叩いてやってたのでデバッグにとても時間がかかりました。
自分のための開発ではあるけど、（テスト駆動とか）やっぱり各所で提唱されて、実践されてる概念は重要なのだなと思った次第です。
それでは。
今回のシステム構築に役立った知識の下地↓（もちろん実務によって得た知識もある）
コメント