コンテンツへスキップ

Amazon WEB Serivceでリーズナブルな静的ホスティング

Amazon WEB Serivceでリーズナブルな静的ホスティング

安価な静的なWEBサイトを作る必要性が発生したので、定番アイテムとも言える、AWSによる構築を選択しました。相棒のハナシによれば、GCPやAzureを使うのに比べて、AWSが一番リーズナブルとの事でした(HTTPS対応が必要な場合)。

構成としては、こんな感じ

方言は、なるべく使わない派なので、Archimateで書きます。

まあ、大したもんではないです。S3バケットは、今回はData Objectとして表現しています。

進め方

相棒によると、2つの方式があるようです。

  1. S3 + CloudFront(CDN) で構築
  2. AWS Amplify(デプロイツール…ざっくりですが…)で構築

Amplifyのほうが多機能なサービスなので、コストは高くなるようです。

今回は、ほぼ更新しない小さなコンテンツを載せるだけなので、後者を利用します。

まずはHTMLを格納する場所(S3 バケット)をつくります

AWSのシステムコンソールから、S3を選択して、バケットを作りましょう。


格納するのは、こんな感じのHTMLです。

このHTMLファイルをS3にアップロードします。


次に、アップロードしたファイルのプロパティを選びます。

そうすると、下のほうに「静的ウェブサイトホスティング」という項目があります。ここで、「Amplify アプリを作成」を選びます。

進んだら、こんな感じで入力して、保存します。ブランチ名は、最初に指定したものが、本番環境のブランチになるそうです。今回は、mainにしました。

あっという間に、ホスティング完了でござるよ。ここまでは、ある程度の知識があれば、秒でできるかもですね。

ここからは、Amplifyから、カスタムドメインの設定に移ります。「ドメインを追加」を押して、進んでいきます。

実際に追加するカスタムドメインを入力します。追加するカスタムドメインを入力して、「ドメインの可用性を確認」

今回は、Route53とかいうサービスは、使わないで、自分で管理するDNSを使いますので、「手動設定」を選択し、「ドメインを設定」ボタンを押します。

そして、以下の設定をして、「ドメインを追加」を押します

証明書の生成が始まります。しばらくすると証明書が生成されます。

あとは、ここに表示されているDNSレコードを自分のDNSサーバーに設定しましょう。

ここまでで、SSLの設定は完了です。DNSの確認できれば、カスタムドメインでアクセスができるようになります。