Google Domainsでユニークなドメインホスティング環境をAWS Amplifyで構築

Google DomainsでAWS Amplifyを使ってユニークなドメインホスティング環境を構築する

今回はGoogle Domainsから取得した".dev"ドメインをAWS Amplifyで利用してみます。

事前準備

まず、「Amplify Console」で独自ドメインを設定します。

「ドメイン管理」からGoogle Domainsで取得した".dev"ドメインを設定します。
ドメイン設定画像

リダイレクトとSPAルーティングのサポートを設定します。
リダイレクトとSPAルーティング設定画像

「ドメイン管理」→「アクション」→「DNSレコードを表示」をクリックし、CNAME情報をメモします。
CNAME情報画像

これでAmplifyの設定は完了です。

最後に、「Google Domains」で独自ドメインを設定します。

Google Domainsにアクセス → 対象ドメインの「管理」をクリックします。
ドメイン管理画像

対象ドメインの管理画面で「DNS」をクリックします。
DNS画像

Amplifyから取得したCNAME情報を入力 → 「保存」をクリック。設定後、「ウェブサイト」をクリックします。
CNAME情報入力画像

ソースに「@」、目的地のドメインに「.dev」と入力 → オプションを設定 → 「転送」をクリックします。
ウェブサイト転送画像

正常に設定されるとウェブサイトのプレビューが表示されます。
ウェブサイトプレビュー画像

設定した".dev"にアクセスするとウェブサイトが表示されます。
ウェブサイト表示画像

最後に、移行前のデプロイ環境と移行後のAmplify（CloudFront＆S3）でウェブサイトのパフォーマンスをPageSpeed Insightsで計測しました。パフォーマンスは大幅に向上しました！
PageSpeed Insights画像