AWS re:Invent Mapについて
みなさんは、AWS re:Invent Mapというマップアプリケーションを知っていますでしょうか？
re:Invent Mapは、re:Invent参加者の助けに少しでもなればと思い構築したマップアプリケーションです。会場周辺のホテルや飲食店、セッション会場などの位置情報を可視化しています。
アプリケーションは、Amplify Hostingでデプロイしており、今回はそのホスティング方法からサブドメインの設定とWAFの設定まで紹介します。
実は、以前紹介した山岡家Map(非公式)やAWS Heroes MapもすべてAmplify Hostingでデプロイしています！
事前準備
事前に、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が作成されます。
Discussion