Amplify にデプロイしたアプリケーションをサブドメインで運用する

# まえがき
こちらは [GAOGAO Advent Calendar 2022 ことしもGAOGAOまつりです](https://qiita.com/advent-calendar/2022/gaogao) の 17 日目の記事として公開されています。

今回は Next.js で作成した静的サイトを AWS Amplify 上にデプロイを行い。サブドメインにアクセスした際に表示されるようにしました。
ドメインは Xserver domain で取得しており、ルートドメイン上には wordpress が乗っかっております。

https://aburasoba.org/ → wordpress, Xserver で動いている。
https://tech.aburasoba.org/ → Next.js, Amplify で動いている。


上記のような構成を目指しました！ 

# 前提
- ドメインは取得済み。今回は Xserver Domain で取得している
- Next.js で静的なページを作成済みで、GitHub に push 済

# 手順
## Next.js アプリケーションを Amplify にデプロイする

### 簡潔に
1. Amplify ホスティングを選択
1. Next.js アプリのリポジトリを選択する
1. クリック。終わり。

非常に簡単でした！

## 詳細
1. AWS コンソールから Amplify を選択、Amplify ホスティングを選ぶ。
![スクリーンショット 2022-12-02 15.02.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488575/532a30f3-2829-0019-c2d3-1e42755f356f.png)

1. GitHub を選択し、Amplify ホスティングと接続する 
![スクリーンショット 2022-12-02 15.02.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488575/fc6c52a8-3620-060f-d728-87a58ae68f8e.png)

1. GitHub 画面で認証を行う
![スクリーンショット 2022-12-02 15.03.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488575/aba33351-bc49-607a-b9db-5376a912bc90.png)

1. リポジトリ、デプロイを行うブランチを選択する
![スクリーンショット 2022-12-02 15.03.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488575/e6d13752-e25f-2c3b-1255-0d1226126470.png)

1. ボタンを押してデプロイする
![スクリーンショット 2022-12-02 15.04.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488575/b42f28ee-5b90-e426-0937-8d6f0a7266d9.png)

1. 完了！
![スクリーンショット 2022-12-02 15.10.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488575/fb2f39a3-8ba3-3e61-4b9a-badf48d37794.png)

1. Amplify が設定したドメインでページを閲覧できる
![スクリーンショット 2022-12-02 15.10.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488575/9a741ffd-ed4b-3175-81f1-be46ed45ff08.png)

画面に沿ってボタンを押していくだけなので非常に簡単ですね。
現在、Amplify 指定のドメインになっているため**私のサブドメイン**を指定するような設定にしていきましょう。

# ドメインの設定
## Xserver で取得したドメインを Route53 のネームサーバー管理できるようにする
Xserver での各種レコードの変更が私の場合上手くいかなかった（正常な値のはずなのにバリデーションに弾かれて CNAME が設定できなかった）為、ドメインの管理を Route53 に移行します。
### ホストゾーンの作成
AWS コンソール、Route53 からホストゾーンを作成します。
該当のドメインで作成しましょう。
私の場合には、「aburasoba.org」のホストゾーンを作成。
![スクリーンショット 2022-12-07 16.59.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488575/c2477b75-ec9b-234e-82fa-e3272b192716.png)

ここで、4 つの NS レコードが作成されるのでメモしておきましょう。

### Xserver での設定

先ほどの NS レコードを、Xserver ドメインページの「ネームサーバー設定」で設定を行いましょう。
![スクリーンショット 2022-12-07 17.06.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488575/e1e144f1-92f0-4ded-c0b1-85bebbff5a81.png)

ここまで設定すると、ドメインの DNS レコードの設定を Route53 で行うことができるようになります！

### ルートドメインの DNS レコードを Route53 に移動する。
ここまででドメインの DNS レコード設定を行うことができましたが、問題があります。

**aburasoba.org のページ見れなくなった。**

そりゃそうですね。そもそも Xserver で DNS を管理していたものを、Route53 に移動しました。
そして、まだ Route53 での DNS 管理の設定を行っていません。

Xserver のサーバーパネルから DNS レコードの設定を確認し、Route53 へ移行しましょう。

1. サーバーパネルで DNS レコード設定を確認

![スクリーンショット 2022-12-07 17.13.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488575/e13b979d-ae2a-02a7-1bd1-be983e533721.png)

1. Route53 に確認したレコードを設定

![スクリーンショット 2022-12-07 17.14.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488575/8af1db44-4360-4ee2-0754-34591d8a3a8b.png)

こちらの設定が反映されるまでには少々時間がかかりますが、こちらで既存のサイトも復帰します！
めでたしめでたし。

## Amplify でサブドメインを指定する
では最後に、サブドメインと Amplify を接続していきましょう。
とは言っても、Route53 へ　DNS 管理を移動しておりますので簡単です。

### ドメインを設定する。

まずは、Amplify のコンソールからドメイン管理画面に移動します。
ドメインを追加から、サブドメインを追加していきます。

![スクリーンショット 2022-12-12 9.53.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488575/d7ed04ed-72fe-07ae-ac2c-533b921cf7ed.png)

追加画面では、追加したいドメイン（私だと、**tech.aburasoba.org**）を Input へ記入し、保存ボタンを押下しましょう。
![スクリーンショット 2022-12-12 9.53.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488575/13260242-5077-534b-0acd-a47a45eda6a0.png)

保存ボタンを押下後、SSL 証明書の発行および、Route53 への CNAME の設定を Amplify が自動で行なってくれます。
5 分ほど時間が経つと Status が **利用可能**　と表示されます。ここまでくれば完了です！

![スクリーンショット 2022-12-12 10.16.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488575/eaced5ad-f212-0276-4efc-09c28205b0cd.png)

このように、指定したサブドメインでアクセスすることが可能です。
https://tech.aburasoba.org/

![スクリーンショット 2022-12-12 10.16.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488575/07c7f4ee-f4d0-fd67-ec93-5e7682f30ba4.png)