Amplifyで開発・運用している 個人開発アプリ紹介

Amplify Boost Up #05　配信アーカイブ↓
https://www.youtube.com/live/cbSvEzom_A8?si=0GmS-jz98djVEeJx&t=4429

Transcript

1. Amplifyで開発・運用している 個人開発アプリ紹介 NRIネットコム株式会社 髙橋　透 2024/04/30 Amplify Boost Up #05
2. 自己紹介 髙橋　透 NRIネットコム株式会社 AWS Community Builder (2024/03~) よくやってること： • Webアプリ開発・運用 ◦ Java/SpringBoot(本業) ◦ AWS Amplify(趣味) • 居酒屋巡り 2
3. 個人開発アプリを Amplifyで開発・運用している という話をします 3
4. • ごみ捨ての日をいつも忘れちゃうなあ・・・ ◦ →ゴミの日の朝に通知してくれる LINE Botを作って自分のスマホにリマインド • 結婚式の開催ってお金がかかるなあ・・・ ◦ →結婚式招待状をWeb化してS3で静的サイトホスティング • 家計簿つけるの面倒だなあ・・・ ◦ →簡単な家計簿アプリを作ってホスティング ◦ →自分と家族だけがアクセスできるよう制御 私はよく日常生活の課題をITの力で解決します 4
5. • ごみ捨ての日をいつも忘れちゃうなあ・・・ ◦ →ゴミの日の朝に通知してくれる LINE Botを作って自分のスマホにリマインド • 結婚式の開催ってお金がかかるなあ・・・ ◦ →結婚式招待状をWeb化してS3で静的サイトホスティング • 家計簿つけるの面倒だなあ・・・ ◦ →簡単な家計簿アプリを作ってホスティング ◦ →自分と家族だけがアクセスできるよう制御 私はよく日常生活の課題をITの力で解決します 本日お話しするトピック 本日お話ししませんが過去にこ のネタで登壇してます ↓ 結婚式WEB招待状をAWSリ ソースでサクッと自作した話 5
6. 【課題】 家族間における立替精算の やりとりをなくしたい 6
7. 【課題】家族間における立替精算のやりとりをなくしたい 妻 買い物行ってきたよ。立て替えたのでお金あとでちょうだい。 ありがとう。 そういえば昨日薬局でティッシュ買ったから、この分と相殺したいな。 あーでも明日スーパーも行きたいから、それも一緒に・・・ 妻 んあーーー 7
8. スプレッドシートで立替管理するか🤔 8
9. スプレッドシート家計簿 買ったもの・価格・支払者を入力 →関数で精算して最終の支払額を計算 一度関数を作ってしまえばあとは入力してい くだけ =SUMIF(D3:D21,"<>◦",C3:C21)/2 9
10. 数カ月後・・・ 10
11. 見えてきた問題点 • スマホからスプレッドシート入力するのが大変 ◦ 画面が小さい・・・ ◦ 入力が億劫になり、レシートがどんどん溜まっていく • 表がいっぱいになったら行追加が必要。これもスマホからだと大変。 ◦ 行が増えるとスクロールが必要になる ◦ ぱっと見で自分に何円負債があるのかわからない • 結果的にPCから入力することが多くなり、家で暇な時に一気に入力することが増え る →Webアプリ化して、全部解決しよう！！！ 11
12. アプリ作りました • Next.jsでフロント/バックを構築 • スマホファーストなUI (TailwindCSSを利用) • 上段にサマリー表示して自身の負 債をわかりやすく • プルダウン・デートピッカー・ラジオ ボタン等で手入力項目を極力排除 12
13. 私と妻だけが使えるように Web公開＆権限制御しよう 13
14. それ、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. アーキテクチャ 15
16. Amplify Hostingとは • アプリケーションのホスティングをお任せできる機能 • 配信用のS3とCloudFrontをAmplifyが用意してくれ、開発者の負担が減る Amazon S3 Amazon CloudFront AWS Amplify Acess to https://~~~ Fetch HTML 16
17. CDKでリソースの権限制御 • TypeScriptでDynamoDBのリソース設定 を記述できる • 特定のグループに属するCognitoユー ザーだけがDBアクセスできるよう権限を 制御 ◦ 赤枠の部分 • ※Amplify Gen2での例です 17
18. Gitのブランチごとに環境を分離 開発環境 - devブランチ 本番環境 - mainブランチ Git Repo AWS Amplify 妻 AWS Amplify 18
19. Q：既存のアプリを使わず、自作したのはなぜ？ • A：作ってみたかったからです！ ◦ そのほうがたのしいやん？ ◦ AWSの勉強にもなるし・・・ • マ◯ーフォワード等の既存のアプリを使うのも全然あり • 個人的理由としては、既存アプリは多機能すぎて使いこなせる自信がなかった。 • あとアプリに課金したくなかった。それなら自作アプリにかかる AWS料金に課金したい。 19
20. 実際にアプリ運用してみてどうだった？ 20
21. 実際にアプリ運用してみてどうだった？ • コストはとても安い ◦ 100〜200円/月くらい • TypeScriptでリソースを構築できるのが嬉しい ◦ また、リソースの変更を localhostで即確認できる（Amplify Gen2） • 環境をGitブランチ単位で分けられるのが便利 ◦ 自分でイチから環境を何個も用意するのは地味に大変 21
22. ご清聴ありがとうございました 22