Amplifyを使ったWebサイト構築 〜 Nstockの事例を添えて 〜

2024/11/24 [東北][青森][JAWS-UG 青森]勉強会【弘前初開催！】にて登壇してきました

Transcript

1. Amplifyを使ったWebサイト構築 [東北][青森][JAWS-UG 青森]勉強会 2024/11/23 福井 烈 〜 Nstockの事例を添えて 〜
2. Agenda " Nstockでどう活用しているか 4" Amplifyとは B" Webサイトを作る P" まとめ
3. 福井 烈 (@fukuiretu) SIerやゲーム会社、スタートアップを経 て、2024年8月にNstockへ入社。青森県 在住でフルリモート勤務中。 ポメラニアンと揚げだし豆腐をこよなく愛 しています。楽しく働きながら、気づけば 世界が良くなっているフリーレンのような 世界観を実現したいです。 最近注目してみているのは、 「KABU&」です
4. Agenda " Nstockでどう活用しているか 4" Amplifyとは B" Webサイトを作る P" まとめ
5. Amplify フルスタック開発フレームワーク フロントエンド、バックエンド、認証、ストレージなど、アプ リ開発に必要な機能を提供 開発の効率化 認証、API、ストレージ、アナリティクスなどの機能を簡単に実 装でき、開発時間を大幅に短縮できます AWSサービスとの統合 Amazon Cognito、AWS AppSync、Amazon DynamoDB、 Amazon S3などのAWSサービスと簡単に連携できます CI/CDとホスティングの簡素化 Amplify Hostingを使用することで、継続的デプロイメントとホ スティングのプロセスを統合し、簡素化できます
6. Agenda " Nstockでどう活用しているか 4" Amplifyとは B" Webサイトを作る P" まとめ
7. Our Mission スタートアップエコシステムをブーストし 日本からGoogle級の会社を生み出す ミッション
8. 現在 将来 セカンダリー事業 Secondary スタートアップへの 再投資事業 Reinvestment in startups 株式報酬 SaaS事業 Stock Compensation SaaS ス タ ー ト ア ッ プ エ コ シ ス テ ム の 進 化 ス タ ー ト ア ッ プ エ コ シ ス テ ム の 進 化 Nstockの事業構成
9. 株式報酬のポテンシャルを 引き出すSaaS https://nstock.com 行使申請が2件あります 想定キャピタルゲイン 13,750,000 円 SO個数 150個 株式数 1,500株 持株比率 0.025 % 須磨栄子 プロダクト開発部 SO一覧 第7回 新株予約権 第6回 新株予約権 第5回 新株予約権 下書き 確定 確定 株式報酬SaaS Nstock
10. 株式報酬SaaS Nstock 株式報酬のポテンシャルを 引き出すSaaS https://nstock.com
11. 46 株式報酬SaaS事業 技術スタック Front-end Language TypeScript 5.5 Framework React / Next.js 14 Styling Tailwind CSS UI smarthr-ui Back-end Language Java 21 Framework Spring Boot 3 DB PostgreSQL 15 Schema OpenAPI PaaS / IaaS Infra AWS IaC Terraform Emailing SendGrid Monitoring Datadog BI Amazon QuickSight Dev environment IDE VS Code (Dev Containers) Assistant GitHub Copilot Container Docker CI/CD GitHub Actions Dependency updater Renovate etc
13. https://zenn.dev/nstock/articles/4fb227b7660fb7
14. Agenda " Nstockでどう活用しているか 4" Amplifyとは B" Webサイトを作る P" まとめ
15. Webサイトを作るにはどういった知識が必要か フロントエンド s 言b s HTMe s CSW s JavaScript / TypeScripD s ライブラリ / フレームワーY s Next.j1 s Nuxt.j1 s Vue.j1 s React.j1 s AnulaH s etc... バックエンド s 言b s Node.j1 s Pythoƒ s Rub€ s PHx s Jav’ s etc..‡ s ライブラリ / フレームワーY s Express.j1 s Djangk s Ruby on Rail1 s Larave… s etc..‡ s データベー s PostgreSQe s MySQe s etc... インフラ s ホスティン s クラウド / オンプ° s デプロ¡ s データスト¬ s RD£ s KVW s 検索エンジ² s et s 認— s ロ s モニタリン s バックアッ¨ s セキュリテ¸ s etc...
16. 1) 事業（プロダクト）の特性 2) 組織（チーム）のケイパビリティ 5) 金銭的コスト 6) セキュリティ 3) 開発生産性 7) 他社での導入事例実績 4) 保守運用性 8) リクルーティング... これらを統合的に判断し、選定 何を基準に選定するか
17. 全部覚えないと Webサイトの構築はできない...??
18. ここまでの話は あくまで業務としての話...
19. AIの力を借りれば知識が薄くても （とりあえず）構築できます！！
20. Agenda " Nstockでどう活用しているか 4" Amplifyとは B" Webサイトを作る P" まとめ
21. Webサイト構築のアプローチ #" Webサイト実装 V0を活用して作成します D" Webサイト構築 作ったWebサイトをAmplify上に アップロードします v" 確認 Amplify上にアップロードした Webサイトをブラウザから閲覧し ます
22. Webサイト構築のアプローチ #" Webサイト実装 V0を活用して作成します D" Webサイト構築 作ったWebサイトをAmplify上に アップロードします v" 確認 Amplify上にアップロードした Webサイトをブラウザから閲覧し ます
23. v0 by Vercel 自然言語からのUI生成 • テキスト指示だけで、直感的にUIコンポーネントを生成 • 専門知識がなくても、誰でも簡単にデザイン可能 コード生成 • 生成されたデザインに対応するReactコードを自動的に出力 • スタイリングはTailwind CSSとshadcn/uiを基盤とする 柔軟なカスタマイズ 生成されたUIは細かな修正や調整が可能
24. v0の利用例 https://v0.dev/chat/qN6jGDB1wKh?b=b_Vt0CoOS6oB1
25. 今回作ったもの
26. 作り始め ここからチャットでやり取りをして 煮詰めていきました
27. Webサイト構築のアプローチ #" Webサイト実装 V0を活用して作成します D" Webサイト構築 作ったWebサイトをAmplify上に アップロードします v" 確認 Amplify上にアップロードした Webサイトをブラウザから閲覧し ます
28. コードを出力し、 ローカルで動かせる ようにする このコマンドを実行する
29. 詳細は→の記事を https://note.com/moz_ai_tech/n/n9c2494baec2b
30. Amplify上にアップロード 手順はChatGPTに教えてもらいました
31. 無事アップロード完了
32. Webサイト構築のアプローチ #" Webサイト実装 V0を活用して作成します D" Webサイト構築 作ったWebサイトをAmplify上に アップロードします v" 確認 Amplify上にアップロードした Webサイトをブラウザから閲覧し ます
34. https://bit.ly/495JZ3U https://main.dm86mjqfww5mt.amplifyapp.com/ https://main.dm86mjqfww5mt.amplifyapp.com/
35. Agenda " Nstockでどう活用しているか 4" Amplifyとは B" Webサイトを作る P" まとめ
36. まとめ Webサイト構築には幅広い知識が必要 Q フロントエンド、バックエンド、インフラの理解が求めらP Q 開発環境やツールの選定も重要 AI(LLM)を活用して効率的に Q V0は自然言語でUIを生成し、Reactのコードを自動生— Q 知識が浅くてもWebサイトを迅速に作成可能 Amplifyいいぞ！ Q フロントエンドからバックエンドまで統合的にサポー‡ Q AWSサービスとの連携が簡単で、効率的な開発が可’ Q CI/CDやホスティングもGUIで直感的に操作できる
37. ありがとうございました