はじめに
AWS Amplify は、フロントエンドアプリを素早くデプロイできる便利なホスティングサービスです。
今回は、Amplify でデプロイしたアプリ（簡単なHello World！）に対して、カスタムドメインを追加する方法についてまとめます。
参考文献
個人のまとめ記事となっておりますが、温かい目で見守っていただければ幸いです。
書こうと思ったきっかけ
個人的にずっと使ってみたいと思っていたサービスだったのですが、実際には触れたことがなかったため、休みの日を利用して手を動かしながらキャッチアップしてみました。
前回の記事で簡単にデプロイすることができたので、今回はその長いURLを独自ドメインに紐付けてブラウザからアクセスすることをゴールとしています。
前回の記事の続きになります！
以下の URL を、お名前.com で購入した独自ドメインに紐付けていきます。
実際にやってみた
前提条件
- Amplify でアプリをすでにデプロイしていること
- Route 53 または他の DNS サービスで管理しているドメインを持っていること
ドメインの設定方法はこちら
手順
1. Amplify コンソールを開く
- AWS マネジメントコンソールにログイン
- 「Amplify」サービスを開く
- 対象のアプリをクリック
2. [カスタムドメインを追加] を選択
- 本番環境に移行から「カスタムドメインを追加（ドメイン管理）」をクリック
- 「Add domain（ドメインを追加）」をクリック
3. カスタムドメインを入力
- 例：example.com
- 入力後、「ドメインを設定」をクリック
4. サブドメインの設定（今回は、設定しませんでした）
- www.example.com などを入力（必要に応じて example.com も追加可能）
- 必要に応じてリダイレクト設定も可能（例：example.com → www.example.com）
私の環境では、こんな感じで削除しています
5. 証明書の作成（自動で処理）
- AWS Certificate Manager（ACM）かAmplify マネージド証明書を使って HTTPS 対応が自動で行われる
- ドメイン認証に数分～1時間ほどかかることも
※今回は、Amplify マネージド証明書を使いました。
6. 状態が「Available（利用可能）」になるまで待機
- ドメインが使えるようになるまで、しばらく時間がかかる場合があります
こんな感じです
- DNSが正しく設定されていれば、自動で HTTPS が有効になります
こんな感じでステータスが「使用可能」となっています
ブラウザでアクセス確認してみた
- ブラウザで
https://example.comやhttps://www.example.comにアクセス - アプリのトップページが表示されることを確認
- アドレスバーに「🔒 鍵マーク（SSL証明書あり）」が表示されているか確認
404エラーが出る場合は、ルートディレクトリ設定や DNS の伝播状況を再確認してみてください！
まとめ
最後まで読んでいただき、ありがとうございました！
Amplify にカスタムドメインを追加することで、本番デプロイまでとてもスムーズに進められることを実感しました。
特に Route 53 を使っている場合は、設定がさらに簡単になるので、ぜひ一度試してみてください。この週末は、Amplify に感動しながら触れていて、とても充実した時間を過ごせました…！