Amplifyで開発・運用している 個人開発アプリ紹介 NRIネットコム株式会社 髙橋　透 2024/04/30 Amplify Boost Up #05

自己紹介 髙橋　透 NRIネットコム株式会社 AWS Community Builder (2024/03~) よくやってること： ● Webアプリ開発・運用 ○ Java/SpringBoot(本業) ○ AWS Amplify(趣味) ● 居酒屋巡り 2

個人開発アプリを Amplifyで開発・運用している という話をします 3

● ごみ捨ての日をいつも忘れちゃうなあ・・・ ○ →ゴミの日の朝に通知してくれる LINE Botを作って自分のスマホにリマインド ● 結婚式の開催ってお金がかかるなあ・・・ ○ →結婚式招待状をWeb化してS3で静的サイトホスティング ● 家計簿つけるの面倒だなあ・・・ ○ →簡単な家計簿アプリを作ってホスティング ○ →自分と家族だけがアクセスできるよう制御 私はよく日常生活の課題をITの力で解決します 4

● ごみ捨ての日をいつも忘れちゃうなあ・・・ ○ →ゴミの日の朝に通知してくれる LINE Botを作って自分のスマホにリマインド ● 結婚式の開催ってお金がかかるなあ・・・ ○ →結婚式招待状をWeb化してS3で静的サイトホスティング ● 家計簿つけるの面倒だなあ・・・ ○ →簡単な家計簿アプリを作ってホスティング ○ →自分と家族だけがアクセスできるよう制御 私はよく日常生活の課題をITの力で解決します 本日お話しするトピック 本日お話ししませんが過去にこ のネタで登壇してます ↓ 結婚式WEB招待状をAWSリ ソースでサクッと自作した話 5

【課題】 家族間における立替精算の やりとりをなくしたい 6

【課題】家族間における立替精算のやりとりをなくしたい 妻 買い物行ってきたよ。立て替えたのでお金あとでちょうだい。 ありがとう。 そういえば昨日薬局でティッシュ買ったから、この分と相殺したいな。 あーでも明日スーパーも行きたいから、それも一緒に・・・ 妻 んあーーー 7

スプレッドシートで立替管理するか🤔 8

スプレッドシート家計簿 買ったもの・価格・支払者を入力 →関数で精算して最終の支払額を計算 一度関数を作ってしまえばあとは入力してい くだけ =SUMIF(D3:D21,"<>○",C3:C21)/2 9

数カ月後・・・ 10

見えてきた問題点 ● スマホからスプレッドシート入力するのが大変 ○ 画面が小さい・・・ ○ 入力が億劫になり、レシートがどんどん溜まっていく ● 表がいっぱいになったら行追加が必要。これもスマホからだと大変。 ○ 行が増えるとスクロールが必要になる ○ ぱっと見で自分に何円負債があるのかわからない ● 結果的にPCから入力することが多くなり、家で暇な時に一気に入力することが増え る →Webアプリ化して、全部解決しよう！！！ 11

アプリ作りました ● Next.jsでフロント/バックを構築 ● スマホファーストなUI (TailwindCSSを利用) ● 上段にサマリー表示して自身の負 債をわかりやすく ● プルダウン・デートピッカー・ラジオ ボタン等で手入力項目を極力排除 12

私と妻だけが使えるように Web公開＆権限制御しよう 13

それ、AWS Amplifyでできますよ？ ● 色々調べた結果、AWS Amplifyというサービスがよさそうに見える ○ Web公開・・・Amplify Hostingでホスティング ○ 権限制御・・・DynamoDBのスキーマ設定で制御（ Amplify Gen2のCDKより） ● 利用料金も安そう ○ ビルド・・・0.01 USD/1 分あたり ○ リクエスト・・・0.30 USD/1,000,000 req ○ 参考：AWS Amplify の料金 | ウェブとモバイルのフロントエンド | Amazon Web Services ● Gitのブランチベースで環境を分別可能 14

アーキテクチャ 15

Amplify Hostingとは ● アプリケーションのホスティングをお任せできる機能 ● 配信用のS3とCloudFrontをAmplifyが用意してくれ、開発者の負担が減る Amazon S3 Amazon CloudFront AWS Amplify Acess to https://~~~ Fetch HTML 16

CDKでリソースの権限制御 ● TypeScriptでDynamoDBのリソース設定 を記述できる ● 特定のグループに属するCognitoユー ザーだけがDBアクセスできるよう権限を 制御 ○ 赤枠の部分 ● ※Amplify Gen2での例です 17

Gitのブランチごとに環境を分離 開発環境 - devブランチ 本番環境 - mainブランチ Git Repo AWS Amplify 妻 AWS Amplify 18

Q：既存のアプリを使わず、自作したのはなぜ？ ● A：作ってみたかったからです！ ○ そのほうがたのしいやん？ ○ AWSの勉強にもなるし・・・ ● マ◯ーフォワード等の既存のアプリを使うのも全然あり ● 個人的理由としては、既存アプリは多機能すぎて使いこなせる自信がなかった。 ● あとアプリに課金したくなかった。それなら自作アプリにかかる AWS料金に課金したい。 19

実際にアプリ運用してみてどうだった？ 20

実際にアプリ運用してみてどうだった？ ● コストはとても安い ○ 100〜200円/月くらい ● TypeScriptでリソースを構築できるのが嬉しい ○ また、リソースの変更を localhostで即確認できる（Amplify Gen2） ● 環境をGitブランチ単位で分けられるのが便利 ○ 自分でイチから環境を何個も用意するのは地味に大変 21

ご清聴ありがとうございました 22