Jr. Championsハンズオン企画#1 「Amplify Gen 2でSNSを作ろう！」公開配布版

2025 Japan AWS Jr. Championsで主催した第1回ハンズオン企画の資料です。
口頭による補足や説明はございませんが、資料だけでもハンズオンを実施できるように努めております。
ぜひ、お手元でもAmplify Gen2でSNS（ソーシャル・ネットワーキング・サービス）を作ってみてください！

Transcript

1. 主催：株式会社Relic エンジニア 保 龍児（エイミ/amixedcolor） Jr. Championsハンズオン企画#1 「Amplify Gen 2でSNSを作ろう！」
2. 2 右上の表記について • それぞれの概念や機能が、Amplify特有のものなのか、それ以外 のフレームワークなどのものなのかを示します • Amplify特有の場合 それ以外の場合 Amplify それ以外
3. 3 運営メンバー紹介 株式会社Relic 保 龍児 エイミ/amixedcolor 日本アイ・ビー・エム システム ズ・エンジニアリング株式会社 熊田 真由子 株式会社サーバーワークス 圡井 一磨 株式会社エクサウィザーズ 佐藤 碧 株式会社セゾンテクノロジー 青木 菜摘 伊藤忠テクノソリューションズ 株式会社 須永 響 川崎 良 八木 宏瞭 富士ソフト株式会社 鈴木 紗世 主催 株式会社クレスコ 八雲 慎之助
4. 4 全体の流れ • サンプルアプリをデプロイ • サンプルアプリにローカルで変更を加えてみる練習 • ローカルで変更を加えた結果をデプロイ • SNS（ソーシャルネットワーキングサービス）を作ってみる
5. 5 はじめに
6. 6 Webアプリをデプロイしたい時、 こんな悩みに遭遇したことが あるのではないでしょうか？
7. 7 • ローカルではうまく動いているのにデプロイしたら動かない • DBや認証の環境を作るのが大変 デプロイにおける悩み
8. 8 • ローカルではうまく動いているのにデプロイしたら動かない • DBや認証の環境を作るのが大変 • ローカルとクラウド環境をシームレスに繋ぐ CI/CD・Cloud Sandbox • Amplify Gen 2に 事前統合された DB・認証・ストレージ Amplify Gen2による解決
9. 9 Amplify Gen 2を活用して、 「簡単に」 「リアルタイムにDBの変更が反映される Webアプリをデプロイ」 しよう！
10. 10 環境の確認
11. 11 • IAMユーザー作成・アクセスキー作成など、認可に関わる権限も 必要 AWSアカウント それ以外
12. 12 VSCode（エディター） • 他のエディターでも良いが、ハンズオンサポート対象外 • https://code.visualstudio.com/ それ以外
13. 13 VSCodeを開く • ターミナルを開く • メニューバー > ターミナル > 新しいターミナル それ以外
14. 14 Node.js • node --version で入っているか確認できます • https://nodejs.org/ja • バージョンが18以下の人はバージョンを20以上に上げましょう • 今のバージョンを保持したい人はnodebrewを使おう それ以外
15. 15 npm • npm --version で入っているか確認できます • https://www.npmjs.com/ それ以外
16. 16 Git • git --version で入っているか確認できます • https://git-scm.com/ それ以外
17. 17 • インストール • https://github.com/cli/cli#installation • gh --version で入っているか確認できます • ログインをする • https://docs.github.com/ja/github-cli/github-cli/quickstart • gh auth login GitHub CLI それ以外
18. 18 サンプルアプリをデプロイしてみる （前半）
19. 19 GitHubリポジトリをAmplify公式のテンプレから作成する • https://github.com/new?template_name=amplify-next- template&template_owner=aws-samples&name=amplify-next- template&description=My%20Amplify%20Gen%202%20starter %20application • リポジトリ名は「日付-苗字-名前」 • https://docs.github.com/ja/repositories/creating-and- managing-repositories/creating-a-repository-from-a-template • フォークではない、GitHubの「テンプレート」という機能を使う Amplify
20. 20 GitHubリポジトリをAmplify公式のテンプレから作成する ① ② ④ ③ それ以外
21. 21 リージョンをバージニア北部にする （ハンズオンでの今日の安定のため） それ以外
22. 22 作成されたリポジトリを元に、サンプルアプリをデプロイ する ① ② Amplify
23. 23 「アプリケーションをデプロイ」をクリック Amplify
24. 24 GitHubへのサインインを求められた場合はサインイン Amplify
25. 25 GitHubを選択して「次へ」 ① ② Amplify
26. 26 先ほど作成したリポジトリを選択 Amplify
27. 27 mainブランチのまま「次へ」 Amplify
28. 28 内容を変更せず「次へ」 Amplify
29. 29 内容を確認し「保存してデプロイ」 Amplify
30. 30 ブートストラップを待機（アカウントごとに1度のみ） Amplify
31. 31 デプロイを待つ Amplify
32. 32 Amplify Gen 2について
33. 33 Amplify Gen 2とは？（1/2） • AWSのサービスの1つ • https://docs.amplify.aws/ • 曰く「ウェブ・モバイルアプリを構築する上で必要な全て」 • > AWS Amplify is everything you need to build web and mobile apps. • 曰く「簡単に始められ、簡単にスケールできる」 • > Easy to start, easy to scale. • 要は、「とっても便利！」 Amplify
34. 34 Amplify Gen 2とは？（2/2） • Gen「2」？ • 元々無印の「AWS Amplify」というサービスがあり、大幅なアップデー トを経て「Amplify Gen 2」がリリースされました • 以来、無印は「Gen 1」と呼ばれています • 大幅なアップデート？ Amplify Gen 構築 構築方法 追跡可能性 カスタマイズ性 Gen 1 自動 CLI Gen 2 自動 CDK
35. 35 • バックエンド • いわゆるインフラのリソースのこと。バックエンドAPIではない • Amplify {{hogehoge}} • Amplfiy Gen 2 独自に事前統合されたバックエンドのこと • Amplify Auth • Cognitoを利用した認証の基盤 • Amplify Data • AppSync(GraphQL), DynamoDBを利用したデータ周りの基盤 • REST API似のAPIコール・リレーション・部分一致検索・認可が可能 • Amplify Storage • S3を利用したストレージ自体 + 認可の基盤 Amplify における用語 Amplify
36. 36 サンプルアプリをデプロイしてみる （後半）
37. 37 「デプロイ済み」となったmainブランチを押下 Amplify
38. 38 「ドメイン」からデプロイされたアプリに遷移 Amplify
39. 39 デプロイされたアプリでTodoを作成してみる Amplify ① ② ③
40. 40 作成したTodoがリアルタイムに反映されていることを 確認する Amplify
41. 41 コンソールに戻り、データ > データマネージャー を開く Amplify ① ②
42. 42 先ほど作成したTodoのデータが表示されていることを 確認する Amplify
43. 43 ローカルでアプリを開発できるように する
44. 44 「デプロイ」のタブに戻る Amplify
45. 45 ローカルからバックエンドにアクセスするための設定ファ イル「amplify_outputs.json」をダウンロードする ※認証情報が含まれるので取扱注意 Amplify ① ②
46. 46 GitHubリポジトリをクローンするためのURLを取得する それ以外 ① ②
47. 47 GitHubリポジトリをクローンするコマンドを実行する それ以外
48. 48 VSCodeを開き、ファイル > フォルダーを開く…を押下 Amplify ① ②
49. 49 先ほどクローンしたフォルダを選択 Amplify ① ②
50. 50 ダウンロードしたamplify_outputs.jsonを移動させる Amplify
51. 51 （ターミナルを閉じてしまった場合は）ターミナルを開く それ以外
52. 52 • install時のエラーでsudoコマンドの実行を求められた場合は実行 する • 脆弱性が検出されているのは今回は気にしない npm install をする それ以外
53. 53 app/page.tsxを開く それ以外
54. 54 データを削除する関数を実装する Amplify
55. 55 データを削除する関数を利用する（リストクリック時に呼 び出されるようにする） それ以外
56. 56 npm run dev を実行してローカルのアプリを立ち上げる それ以外
57. 57 立ち上げたアプリ http://localhost:3000 にアクセスする それ以外 • 今使っているamplify_outputs.jsonは本番環境のバックエンドに アクセスできる設定が書かれているので、先ほど本番環境で作成 したTodoが表示されている
58. 58 Todoをクリックすると削除されることを確認する それ以外
59. 59 今開いているターミナルとは別に、新しくターミナルを 開く それ以外
60. 60 Gitに変更をコミット・プッシュする それ以外 ① ②
61. 61 コンソールを開いてCI/CDが動いていることを確認する Amplify （Amplify上で、GitHubのmainブランチの変更を「自動ビルド」 する設定が有効になっています）
62. 62 Amplify Gen 2のデプロイについて • なんと、ダウンタイムが実質ゼロ！ • デプロイ中も直近のデプロイに成功したバージョンが動き続けま す Amplify
63. 63 削除されるようになっているか確認する Amplify
64. 64 改めてTodoを作成してみる Amplify ① ② ③
65. 65 Todoが作成されていることを確認する Amplify
66. 66 Todoをクリックすると削除されることを確認する それ以外
67. 67 ローカル用のバックエンドを作る
68. 68 • インストール手順 • https://docs.aws.amazon.com/cli/latest/userguide/getting-started- install.html • aws --version でインストールされたか確認する AWS CLIをインストールする それ以外
69. 69 IAMを検索し、右クリックをして「新しいタブで開く」 それ以外 ② ①
70. 70 アクセス管理 > ユーザー を選択 それ以外
71. 71 右上の「ユーザーの作成」を押下 それ以外
72. 72 ユーザー名を「日付-苗字-名前」にする それ以外 ① ②
73. 73 「ポリシーを直接アタッチする」を選択し、 「AdministratorAccess」を選択する それ以外 ① ②
74. 74 内容を確認して「ユーザーの作成」を押下 それ以外
75. 75 実際にIAMユーザーが作成されたことを確認する それ以外
76. 76 アクセスキーを作成するので、ユーザー名を押下 それ以外
77. 77 「セキュリティ認証情報」タブを選択
78. 78 下にスクロールして、「アクセスキーを作成」を押下
79. 79 「コマンドラインインターフェイス(CLI)」を選択
80. 80 レコメンデーション確認のチェックを入れて「次へ」 ① ②
81. 81 「アクセスキーを作成」を押下
82. 82 結果の画面を 開いたまま にしておく それ以外
83. 83 aws configure --profile handson-20250905 コマンド を実行して、ID・Keyをコピペ、Regionをus-east-1に する それ以外 • コピペでコマンドがうまくいかない人はコピペせずに手入力して ください（typo注意）
84. 84 • 2025-xx-xx xx:xx:xx amplify-aaaa-main-amplifyaaaa-aaaa • 2025-xx-xx xx:xx:xx cdk-hnb659fds-assets-111111111111-us- east-1 aws cliが使えるかaws s3 ls --profile handson- 20250905 で確認する それ以外
85. 85 Cloud Sandboxをデプロイする
86. 86 • 右のような表示で完了です • ターミナルは閉じずに維持してください • 閉じてしまった場合は再度同じコマンドを実行すれば良いです • 閉じないことで、リアルタイムにバックエンドの定義を反映できます npx ampx sandbox --profile handson-20250905 を実 行してCloud Sandboxをデプロイする Amplify
87. 87 • ローカル環境用の開発者ごとのプライベートなバックエンド • https://docs.amplify.aws/react/deploy-and-host/sandbox- environments/setup/ Cloud Sandboxとは？ Amplify
88. 88 バックエンドの定義はどこにある？ （amplify_outputs.jsonは環境構築の結果生成される） Amplify
89. 89 • みなさん手元で好きに動かしていただいてokです！ • 画面投影では説明ありで動かします Cloud Sandboxの作成するリソースを確認してみる Amplify ① ②
90. 90 Cloud Sandboxの作成するリソースを確認してみる Amplify ① ②
91. 91 Cloud Sandboxの作成するリソースを確認してみる Amplify ① ②
92. 92 Cloud Sandboxの作成が完了したか確認する Amplify
93. 93 今回作るアプリの要件を確認する
94. 94 どんなアプリ？ • 完全匿名・ユーザー名なしで投稿できるアプリ • リアルタイムで全員が投稿を確認できる
95. 95 完全匿名・ユーザー名なしで投稿できる アプリをつくる
96. 96 CSSを調整してスクロール表示できるようにする それ以外
97. 97 ソートで新しい順にする それ以外
98. 98 ソートで新しい順にする それ以外
99. 99 投稿メッセージだけでなく、投稿日時も表示されるように する それ以外
100. 100 自分の考えた最強のSNSの名前をつける それ以外
101. 101 （ターミナルを閉じてしまった人は）npm run dev を 再度実行してローカルのアプリを立ち上げて、 http://localhost:3000 で動作確認をする それ以外
102. 102 • HTMLにCSSを直書きする（インラインスタイル）をAIに上手い こと生成させると、それっぽくなるかも！ （オプション）localhostで動作を確認しつつ、投稿表示 のUIをいい感じにする それ以外
103. 103 コミット・プッシュして、デプロイする Amplify ① ②
104. 104 認証無しの完全匿名で投稿を確認できるようになっている かチェックする Amplify
105. 105 ハンズオンで作成したリソースの削除
106. 106 Amplify アプリを削除する ① ②
107. 107 Amplify アプリを削除する ① ②
108. 108 Cloud Sandboxを削除する
109. 109 IAMユーザーを削除する ① ②
110. 110 IAMユーザーを削除する
111. 111 IAMユーザーを削除する ① ②
112. 112 • vim ~/.aws/credentials などで編集 • 今回追加した部分を削除 AWS Credentialを削除する
113. 113 （CDKを利用しない人は）CDK用のS3バケットを消す ① ②
114. 大志ある挑戦を創造し、日本から世界へ 想いを持った挑戦者と共に走り、共に創る