数クリックで簡単Webサイト公開！ AWS Amplifyホスティング

2025-01-31 AWSランチセッション 第2回 数クリックで簡単Webサイト公開！ ― AWS Amplify ホスティング ― 山崎 拓也

山崎 拓也 所属: SIer 仕事: • システム開発など • アプリとAWSインフラ両方 好き: 低レイヤ、SF、AWS AWS関連: • 2024 Japan AWS Top Engineer • 2022～2024 Japan AWS All Certifications Engineer

Webサイト公開と言えばS3静的ウェブサイトホスティングですが… • 様々な設定が必要 • ブロックパブリックアクセスの無効化 • バケットポリシーの変更 • HTTPS対応やカスタムドメイン対応にはCloudFrontやALBなど他のサービスが必要 https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/getting-started-cloudfront-overview.html

• https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html
• https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/getting-started-cloudfront-overview.html

Webサイト公開と言えばS3静的ウェブサイトホスティングですが… • 様々な設定が必要 • ブロックパブリックアクセスの無効化 • バケットポリシーの変更 AWS Amplify ホスティングならもっと簡単！ • HTTPS対応やカスタムドメイン対応にはCloudFrontやALBなど他のサービスが必要

AWSからもAmplify ホスティングがお勧めされている • S3のドキュメントに注記として記載 https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteHosting.html

• https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteHosting.html

S3のコンソールにもAmplify ホスティングのボタンができてる

3ステップでWebサイト公開できる ❶ S3にリソースをアップロード ❷ 1クリックでアプリ作成 ❸ 1クリックでデプロイ 公開完了！

❶ S3にリソースをアップロード

❷ S3コンソールからAmplify アプリを作成

❸ Amplifyコンソールが開くので、アプリをデプロイ • 設定項目は全てデフォルトで埋まってる • 「保存してデプロイ」を押すだけ

直ぐにデプロイが完了し、URLが表示される

料金はS3+CloudFrontと同じくらい • 概算比較（東京リージョン） • それぞれ無料利用枠がある Amplify S3 + CloudFront ストレージ 0.023 USD/GB （5GB 無料） 0.025 USD/GB （5GB 無料） データ転送 (OUT) 0.15 USD/GB （15GB 無料） 0.114 USD/GB （1TB 無料） HTTPSリクエスト - 0.0090 USD/1万件 （1,000万件 無料） https://aws.amazon.com/jp/amplify/pricing/ https://aws.amazon.com/jp/s3/pricing/ https://aws.amazon.com/jp/cloudfront/pricing/

• https://aws.amazon.com/jp/amplify/pricing/
• https://aws.amazon.com/jp/s3/pricing/
• https://aws.amazon.com/jp/cloudfront/pricing/

カスタムドメイン対応も簡単 • 登録済みドメインならワンクリック設定が使える

（補足）未登録のドメインは購入ボタンが出る

リダイレクトの設定も可能 • SPAアプリのHistory APIによるページリロードにはこれで対応 SPAの場合はこの正規表現 ドキュメントにさまざまなパターンの設定サンプルあり https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/redirect-rewriteexamples.html

• https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/redirect-rewrite-examples.html

ベーシック認証も設定可能 • 新しい機能を公開する前のテストに便利 • バージョンごとに認証を設定できる

WAFとの統合も簡単に設定可能

（補足）CloudFrontのWeb ACLが作成される • レート制限などのルールは個別に追加可能

まとめ • Amplifyホスティングなら2クリックでWebサイトを公開できる • カスタムドメイン設定やWAF統合など便利な機能も充実 • ぜひAWS Amplify ホスティングを検討してみてください！

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