Amplify だから出来た！ 会員限定サイトを鉄壁にする 5 つの小技

Amplify だから出来た！ 会員限定サイトを鉄壁にする 5 つの小技 2025年6月7日 JAWS-UG 大分 LT Misuzu Sugiyama

01 自己紹介 杉山 美鈴 @sugimisu 株式会社クローバーソフト代表。WEBエンジニア コミュニティ活動大好き。 所属コミュニティ JAWS-UG佐賀 コアメンバー CoderDojo 久留米 チャンピオン 福岡 Tech Women Community AWS community builders Front-End Web & Mobile 3年目

02 Challenge - 写真のプライバシーをちょっとアップデート CoderDojoの子供たちの活動内容の写真をFacebook アルバムで手軽に 共有していたけれど、このままでいいかしら？ 1. Facebookで全公開は見るのにはお手軽だけど 2. 盗用リスク 3. 会員制サイトへ移行を決断 見せたい人にだけ見せる仕組みに切り替えて、 保護者も子どもも安心&ワクワク！ WEBサイトを作り、会員だけがみれる 写真コーナーを作ろう。 会員限定サイト × Amplify

03 Amplifyって クイックスタートでの導入 1 利用する フレームワークや 言語を選択 2 テンプレートから リポジトリを作成 3 スターターアプリ のデプロイ 6 クラウドサンド ボックスの デプロイ 5 ローカル開発環境 の構築 4 デプロイ済み アプリの確認 バックエンド開発の効率化 IaC で AWS リソースを 自動プロビジョニング データモデル AWS リソース AWS Amplify Gen 2 TypeScript でデータモデルなどを宣言的に定義すると、 AWS CDK が仲介し、必要な AWS リソース(DynamoDB テーブル、Appsync API、Cognito、Lambda 関数など) が 自動でプロビジョニングされる https://aws.amazon.com/jp/builders-flash/202411/awsgeek-aws-amplify-gen2/

04 開発失敗談 - .env の情報 迷子事件 GIT .env NO Git履歴にのこってしまって 面倒でアプリ全削除したw 概要 ホスティング アクセスコントロール ビルドの通知 ビルドの設定 カスタムドメイン カスタムヘッダーとキャッシュ 環境変数 ファイアウォール 新規 プレビュー リライトとリダイレクト シークレット モニタリング アプリケーションの設定 シークレットがカタカナで 頭にはいってこなかった

05 AWS 責任共有モデル お客様 クラウド内のセキュリティ に対する責任 お客様のデータ プラットフォーム、アプリケーション、IDとアクセス管理 オペレーティングシステム、ネットワーク、ファイアウォール構成 クライアント側のデータ 暗号化とデータ整合性 認証 サーバー側の暗号化 (ファイルシステムやデータ) ネットワークトラフィック 保護(暗号化、整合性、アイ デンティティ) ソフトウェア AWS クラウドのセキュリティに 対する責任 コンピュート ストレージ データベース ネットワーキング ハードウェア/AWS グローバルインフラストラクチャー リージョン アベイラビリティ ゾーン エッジロケーション わたしたちが 責任をもつ アプリ層 今日の 5 つは " わたしたちゾーン" をラクに防御するワザ

06 小技 #1 - 会員サイトを数行でつくる
amplify/backend.ts
import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource.js';
import { storage } from './storage/resource.js';
defineBackend({
auth,
storage,
});
amplify/auth/resource.ts
amplify > auth > TS resource.ts > [@] auth > loginWith
1 import { defineAuth } from '@aws-amplify/backend';
2
3 /**
4 * Define and configure your auth resource
5 * @see https://docs.amplify.aws/gen2/build-a-backend/auth
6 */
7 export const auth = defineAuth({
8 loginWith: {
9 email: true, // Eメール+パスワード
10 },
11 mfa: {
12 mode: "OPTIONAL", // マルチファクタ認証をオプションにする
13 totp: true, // Time-based One-Time Password (Google Authenticatorなど)
14 sms: true, // SMS認証(デフォルトでは有効)
15 },
16 });
<Authenticator />タグ でログイン画面を作成

07 小技 #2 - パスワード保護ブランチ アクセスコントロールを管理 ユーザー名およびパスワードを使用して、ブランチへのアクセスを制限します。詳細はこちら ブランチ Access setting ユーザーネーム パスワード dev 制限 - パスワードが必須です main パブリックに表示可能 - 1 ページあたりの行数 15 アクセス設定 制限 - パスワードが必須です アクセス設定 パブリックに表示可能 マネコンからでも数クリックで操作可能。（ソースでも操作できる） ブランチ選択 パスワード保護（ユーザーとパスワードでBasic認証がすぐに適応） カスタムドメインでサブドメイン割当 （AmplifyマネージドでSSL証明書も自動で）

08 小技 #3 - S3 バケット 認証されたユーザーのみアクセス可能
コード数行で 認証されたユーザーのみ閲覧可能な
写真専用バケット”を用意
amplify > storage > TS resource.ts > ...
1 import { defineStorage } from '@aws-amplify/backend';
2
3 export const storage = defineStorage({
4 name: 'cdkurumebacket', // keep existing bucket name
5 access: (allow) => ({
6 'photos/*': [
7 allow.authenticated.to(['read', 'write', 'delete'])
8 ],
9 'albums/*': [
10 allow.authenticated.to(['read', 'write', 'delete'])
11 ]
12 })
13 });
1.署名付きURL - 認証されたアクセスのみ
2.有効期限つき - URL漏洩時のリスク軽減
3.一時的セキュリティトークン - 追加のセキュリティ層
4.S3直アクセスではない - 署名検証が必要
今回はこれでOK

10 小技 #4 - WAF をつける “Amplify 推奨ファイアウォール保護”をオンにする だけで、代表的な攻撃を自動ブロック！ ファイアウォールの設定を編集 Amplify は AWS Web Application Firewall (WAF) サービスを利用して、ファイアウォール保護をお客様に提供します。詳細はこちら この WAF に加えられた変更はすべて保存され、それを使用する他のウェブアプリケーションに影響を与える可能性があります。 Amplify が推奨するファイアウォール保護を有効化 ・ウェブアプリケーションによく見られる脆弱性から保護 ・悪意のある攻撃者によるアプリケーションの脆弱性発見から保護 ・Amazon の内部脅威インテリジェンスに基づき潜在的な IP アドレスをブロック amplifyapp.com へのアクセスを制限 IP アドレス このアプリへのアクセスをブロックまたは許可する IP アドレスを指定します。「ブロック」を選択すると、リストにない IP アドレスはブロックされます。「許可」を選択 すると、リストにない IP アドレスにもアクセスが付与されます。 IP アドレスの保護を有効にする 国 このアプリへのアクセスをブロックまたは許可する国を指定します。「ブロック」を選択すると、リストにない国はブロックされます。「許可」を選択 すると、リストにない国にもアクセスが付与されます。 国の保護を有効にする 料金説明 Amplify ファイアウォールには追加コストがかかります WAF 料金は毎月の推定で $8 (時間単位で日割り計算) + 毎月 100 万リクエストで $1.40 になります WAF に加えて、Amplify では 1 か月あたり $15 が課金されます (時間単位で按分) Amplify ファイアウォールの料金

11 小技 #5 - Amplify × Secrets で .env とさよなら！ “.env 迷子事件”から卒業！Git に置かず/ヒトにも見せずにキーを管理 シークレットの管理 アプリケーションのシークレットを管理します。詳細はこちら ブランチ 変数 値 Rows per page 15 コマンド：npx ampx sandbox delete

12 AWS 責任共有モデル お客様 クラウド内のセキュリティ に対する責任 お客様のデータ プラットフォーム、アプリケーション、IDとアクセス管理 オペレーティングシステム、ネットワーク、ファイアウォール構成 クライアント側のデータ 暗号化とデータ整合性 認証 サーバー側の暗号化 (ファイルシステムやデータ) ネットワークトラフィック 保護(暗号化、整合性、アイ デンティティ) ソフトウェア AWS クラウドのセキュリティに 対する責任 コンピュート ストレージ データベース ネットワーキング ハードウェア/AWS グローバルインフラストラクチャー リージョン アベイラビリティ ゾーン エッジロケーション わたしたちが 責任をもつ アプリ層 セキュリティを担保するには手間もお金もかかるから どの情報をどれだけ守りたいか考えてやってみる

小ネタ Storage Browser for Amazon S3 を動かす 写真データをS3に直接手軽にアップする時便利