AWS Amplify：カスタムドメインを設定して「Hello World!」を表示できたので、手順を整理してみた

## はじめに

AWS Amplify は、フロントエンドアプリを素早くデプロイできる便利なホスティングサービスです。

https://aws.amazon.com/jp/amplify/

今回は、Amplify でデプロイしたアプリ（簡単なHello World！）に対して、カスタムドメインを追加する方法についてまとめます。

**参考文献**

https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/custom-domains.html

**個人のまとめ記事となっておりますが、温かい目で見守っていただければ幸いです。**

## 書こうと思ったきっかけ

個人的にずっと使ってみたいと思っていたサービスだったのですが、実際には触れたことがなかったため、休みの日を利用して手を動かしながらキャッチアップしてみました。

:::note info
**前回の記事で簡単にデプロイすることができたので、今回はその長いURLを独自ドメインに紐付けてブラウザからアクセスすることをゴールとしています。**
:::

**前回の記事の続きになります！**

https://qiita.com/free-honda/items/8d95659b3791eef03758

以下の URL を、お名前.com で購入した独自ドメインに紐付けていきます。

![Screenshot 2025-05-25 at 13.48.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/3c187747-72e3-4068-8622-60d51a151dcf.png)

## 実際にやってみた

### 前提条件

* Amplify でアプリをすでにデプロイしていること
* Route 53 または他の DNS サービスで管理しているドメインを持っていること

**ドメインの設定方法はこちら**

https://qiita.com/free-honda/items/7a1fa3336273c3b7cfab

### 手順

#### 1. Amplify コンソールを開く

* AWS マネジメントコンソールにログイン
* 「Amplify」サービスを開く
* 対象のアプリをクリック

![Screenshot 2025-05-25 at 13.55.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/3a07a7f8-1126-462e-8326-1cb24731f60c.png)

#### 2. \[カスタムドメインを追加] を選択

* 本番環境に移行から「カスタムドメインを追加（ドメイン管理）」をクリック
* 「Add domain（ドメインを追加）」をクリック

![Screenshot 2025-05-25 at 13.56.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/d36e02f6-aade-4c20-89df-64ee1a8f6d99.png)

#### 3. カスタムドメインを入力

* 例：example.com
* 入力後、「ドメインを設定」をクリック

![Screenshot 2025-05-25 at 13.57.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/e63ac8a9-c026-4aab-a1d3-a657585b32e0.png)

#### 4. サブドメインの設定（今回は、設定しませんでした）

* [www.example.com](http://www.example.com) などを入力（必要に応じて example.com も追加可能）
* 必要に応じてリダイレクト設定も可能（例：example.com → [www.example.com）](http://www.example.com）)

**私の環境では、こんな感じで削除しています**

![Screenshot 2025-05-25 at 13.59.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/9d1d5497-9af4-4c89-9a1c-f642c65b2099.png)

#### 5. 証明書の作成（自動で処理）

* AWS Certificate Manager（ACM）かAmplify マネージド証明書を使って HTTPS 対応が自動で行われる
* ドメイン認証に数分～1時間ほどかかることも

![Screenshot 2025-05-25 at 14.00.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/80275df3-70b0-4d98-9bdf-ac394d7d966d.png)

※今回は、Amplify マネージド証明書を使いました。

#### 6. 状態が「Available（利用可能）」になるまで待機

* ドメインが使えるようになるまで、しばらく時間がかかる場合があります

**こんな感じです**

![Screenshot 2025-05-25 at 14.01.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/4d3e2fb2-6688-4383-af0f-9ac865e676e8.png)

* DNSが正しく設定されていれば、自動で HTTPS が有効になります

**こんな感じでステータスが「使用可能」となっています**

![Screenshot 2025-05-25 at 14.10.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/727b0c8d-d6e3-48c4-886c-ce6711287da8.png)

### ブラウザでアクセス確認してみた

* ブラウザで `https://example.com` や `https://www.example.com` にアクセス
* アプリのトップページが表示されることを確認

![Screenshot 2025-05-25 at 14.04.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/b957ed24-c4cc-4ccc-a7b3-ba7ad714e94a.png)

* アドレスバーに「🔒 鍵マーク（SSL証明書あり）」が表示されているか確認

![Screenshot 2025-05-25 at 14.05.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/85972583-290b-413c-b81f-6e10bb473e55.png)

:::note alert
**404エラーが出る場合は、ルートディレクトリ設定や DNS の伝播状況を再確認してみてください！**
:::

## まとめ

最後まで読んでいただき、ありがとうございました！
Amplify にカスタムドメインを追加することで、本番デプロイまでとてもスムーズに進められることを実感しました。

特に Route 53 を使っている場合は、設定がさらに簡単になるので、ぜひ一度試してみてください。この週末は、Amplify に感動しながら触れていて、とても充実した時間を過ごせました…！