AWS re:Invent Mapについて
みなさんは、AWS re:Invent Mapというマップアプリケーションを知っていますでしょうか？
https://x.com/dayjournal_nori/status/1988022263317492123
re:Invent Mapは、re:Invent参加者の助けに少しでもなればと思い構築したマップアプリケーションです。会場周辺のホテルや飲食店、セッション会場などの位置情報を可視化しています。
アプリケーションは、Amplify Hostingでデプロイしており、今回はそのホスティング方法からサブドメインの設定とWAFの設定まで紹介します。
実は、以前紹介した山岡家Map(非公式)やAWS Heroes MapもすべてAmplify Hostingでデプロイしています！
https://x.com/dayjournal_nori/status/2001426052279869865
https://x.com/dayjournal_nori/status/1993092273698226233
事前準備
事前に、GitHubでリポジトリ作成とコードを反映します。今回はre:Invent Mapのリポジトリを利用します。
GitHubを利用した公開
Amplify ConsoleでGitHubを利用した公開をする方法です。
AWS Amplify → 「新しいアプリを作成」をクリックします。
「GitHub」をクリック → 「次へ」をクリックします。
re:Invent Mapのリポジトリとブランチを選択 → 「次へ」をクリックします。
アプリケーション名 → 「次へ」をクリックします。
「保存してデプロイ」をクリックします。
デプロイ完了後「デプロイされたURLにアクセス」をクリックします。
デプロイしたre:Invent Mapが表示されます。
独自サブドメインを設定
次に、Cloudflareに登録している独自ドメインのサブドメインをAmplifyに設定します。
Route 53 → 「ホストゾーンの作成」をクリックします。
サブドメイン名 → パブリックホストゾーン → 「ホストゾーンの作成」をクリックします。
作成された4つのNSレコードをコピー。
Cloudflareのコンソール → DNSレコード → 「レコードの追加」をクリックします。
各NSレコードを追加 → 「保存」をクリックします。
NSレコード4つを追加。
AWS Amplify → カスタムドメイン → 「ドメイン追加」をクリックします。
サブドメインを選択 → 「ドメインを設定」をクリックします。
ブランチと証明書を選択 → 「ドメインを追加」をクリックします。
SSLの作成中。
しばらくすると登録が完了します。
Route 53 → ホストゾーン → サブドメイン → 登録が反映されています。
独自ドメイン設定後「https://reinvent.dayjournal.dev」にアクセス。
独自ドメインで配信されているre:Invent Mapが表示されます。
WAFの設定
最後に、WAFを設定します。
「ファイアウォールを有効化」をクリックします。
「新規作成」 → 「ファイアウォール保護機能を有効化」 → 「ファイアウォールを追加」をクリックします。
ステータスがAssociating → EnabledになるとWAFが作成されます。
AWS Amplify Conference 2026 開催
2026年1月20日(火)に「AWS Amplify Conference 2026」を目黒セントラルスクエア21Fで開催します！
Amplify Japan User Groupが主催する年に一度のカンファレンスで、「新規事業を加速させるAmplifyの魅力を探る」をテーマに、午前は初心者向けハンズオン、午後は各企業の活用事例セッションをおこないます。懇親会もありますので、ぜひご参加ください！
他にも記事を書いています。よろしければぜひ。
AWS Amplify にコントリビュートしてみよう
AWS Amplifyとの出会いと5年間の活動をまとめてみた
tags - AWS Amplify
tags - Try
- 参考文献
AWS Amplify