XServerで取得した独自ドメインをCloudFrontに設定してみる
当記事は「Next.jsをECS上で動かしてみる」の第10回「XServerで取得した独自ドメインをCloudFrontに設定してみる」になります。
- DockerでNext.jsアプリを作成してみる
- ECRにリポジトリを作成してみる
- ECRにコンテナのイメージをプッシュしてみる
- VPCを作成してみる（ECSを動かすため用）
- セキュリティグループを作成してみる（ECSを動かすため用）
- ECSでNext.jsのアプリを動かしてみる
- セキュリティグループを作成してみる（ALBを動かすため用）
- ALBを作成してターゲットグループにECSを指定してみる
- CloudFrontでALB（ECS）を配信してみる
- XServerで取得した独自ドメインをCloudFrontに設定してみる
目次
Route 53でホストゾーンの作成
Route 53でホストゾーンの作成をクリック。
ドメイン名にXServerドメインで取得したドメイン名を入力。
ホストゾーンの作成をクリック。
XServerでドメインのDNS設定を変更
Route 53で作成したホストゾーンのネームサーバーをXServerで設定します。
XServerの管理画面の対象ドメインで、DNSレコード設定をクリック。
Route 53に表示されている4つのネームサーバーを順番に入力し、「確認画面へ進む」をクリック。
「設定を変更する」をクリック。
OKをクリック。
ACMで証明書を発行
リージョンを米国 (バージニア北部)に変更したうえで、リクエストをクリック。
次へをクリック。
XServerで取得したドメイン名を入力。
リクエストをクリック。
Route 53でレコードを作成をクリック。
先ほど登録したドメイン名を選択し、レコードを作成をクリック。
CloudFrontに独自ドメインを設定
CloudFrontのディストリビューション画面でAdd domainをクリック。
ドメイン名を入力し、証明書に先ほどACMで作成したものを選択。
変更を保存をクリック。
Route 53でドメイン名とCloudFrontを紐づけ
Route 53で対象のドメイン名をクリック。
レコードを作成をクリック。
エイリアスをオン、トラフィックのルーティング先に下記で作成したCloudFrontのディストリビューションを選択。
レコードを作成をクリック。
確認
ブラウザで設定したドメイン名にアクセス。
Next.jsのウェルカムページが表示されたらOKです。
以上になります。
お読み頂き、ありがとうございました。
