【AWS Amplify】で独自ドメインの静的Webサイトを構築してみた(HTTPS対応)

2021年11月03日 (水)

はじめに

AWSの学習目的として、独自ドメインの静的Webサイトを構築してみました。
独自ドメインはSSL(https)にも対応します。

AWS無料利用枠の範囲内で構築可能ですが、無料には条件があります。

環境構築について

• AWSの無料利用枠で構築可能
• ドメインは無料ドメインのFreenomを利用
• AWSのAmplifyを利用
• DNSは【Amazon Route 53】を利用してホストゾーンを登録

構築手順

下記手順で構築します。

ドメイン設定が不要な場合は、1番のみで良いと思います。

1. 【AWS Amplify】で静的Webサイトを構築
2.  Freenomで無料ドメインを取得
3. 【Amazon Route 53】でホストゾーンを登録
4. 【AWS Amplify】にドメインを設定する
5. 構築したWebサイトを確認する

構築手順

(1) 【AWS Amplify】で静的Webサイトを構築

AWSのサービスAmplifyで静的Webサイトを構築します。
「Amplify Console」での設定方法のみで、Gitも利用しません。

まずは Amplify で 静的Webサイトを構築します。
ここで設定が完了すれば、Amplify のドメインでWebサイトの確認が可能になります。

下記ページを参考に設定してください。

AWS Amplify】を使い静的ウェブサイトをホスティング(手動デプロイ)

(2) Freenomで無料ドメインを取得

Freenom サインインの手順は省略し載せていません。

AWS 【Amazon Route 53】+【Freenom】で独自ドメインを設定する

(3) 【Amazon Route 53】でホストゾーンを登録

Freenomで取得したドメインを【Amazon Route 53】に登録します。
課金されたくない場合は、12時間以内に登録したホストゾーンを削除すればよいはずです。

下記ページを参考に設定してください。

AWS Amazon Route 53 初めてのパブリックホストゾーン作成

(4) 【AWS Amplify】にドメインを設定する

AWSのAmplifyで既に設定済のアプリに対してドメインを設定します。
実際にはドメインを既存のURLに転送する形になります。

HTTPS証明書は、自動的に作成されます。

下記ページを参考に設定してください。

【AWS Amplify】にドメインを設定する

(5) 構築したWebサイトを確認する

最後に上記で構築したWebサイトをWebブラウザから確認して完了です。

以上

【AWS Amplify】で独自ドメインの静的Webサイトを構築でした。