Webサイト構築・Webシステムやスマホに関する情報を発信しています。

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



はじめに

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サイトを構築でした。





0 件のコメント:

人気記事

ラベル

このブログを検索

Profile

大阪在住、年齢50代のWebプログラマーです。