AWSで始めるウェブ公開: 静的サイトのためのS3ウェブホスティングとHTTPS設定

◷ この記事は約8分で読めます

こんにちは、 @Manabu です。

自分のアイデアや作品を他の人と共有する最も効果的な方法の 1 つは、自分のウェブサイトを作成することです。

Webサイトはやってみたいけど、方法がわからないよと思う人は多いと思います。 技術的な知識がないという方でも大丈夫です。

AWS (Amazon Web Services) を使用すると、誰でも簡単に、安価にウェブサイトを構築できます。

この記事は以下のような人におすすめです。

この記事では、Amazon S3 と Amazon CloudFront を使用して、安全で高速にウェブサイトを公開する方法を手順ごとに説明します。

事前準備

記事に記載されている手順を実行するために、事前に準備する必要がある項目について記載します。

必要なもの

AWS 上でウェブサイトを公開するには、以下の準備が必要です。

これらを準備したら、あとは簡単な手順に従って設定するだけです。

S3でのサイト配信の良いところ

Amazon S3を使用してウェブサイトをホスティングする方法は、多くのメリットがあります。

• 簡単なセットアップ ：サーバーを管理する必要がなく、数クリックでウェブサイトを公開できます。技術的な専門知識がなくても始められるので、初心者にも優しい選択肢です。
• コスト効率 ：低コストで静的コンテンツをホスティングでき、使用量に応じて料金が発生します。CloudFrontと組みあわても、高トラフィック時にスケーラブルでコスト効率の良い配信が可能です。
• 高い耐久性と可用性 ：S3はデータを複数の物理的に分離された場所に自動的に複製するため、データの損失リスクが極めて低く、ほぼ100％の稼働時間を提供できます。

AWSのS3とCloudFrontを利用すれば、初心者でも、低コストで、高速かつセキュアにウェブサイトを公開できるようになります。

これらのサービスを活用して、Webサイトを開始してみましょう。

実行手順

初心者向けに、AWS を使用して S3 でウェブサイトをホスティングし、CloudFront で配信する基本的な手順を簡潔に説明します。

このセクションでは、ステップバイステップで進めていきます。
※AWSアカウントとドメインは準備されていることを前提といたします。

Amazon S3でバケットを作成する

AWSのマネジメントコンソールにログインし、S3サービスのコンソールから「バケットを作成」をクリックします。

以下の値を設定し、「バケットを作成」ボタンをクリックして作成して下さい。

作成したS3バケットで静的ウェブホスティングを有効にする

新しく作成したバケットをクリックし、[プロパティ]タグから「静的ウェブサイトホスティング」を見つけます。

「編集」ボタンをクリック、「静的ウェブサイトホスティング」を有効にし、「インデックスドキュメント」の名前（通常は'index.html'）を指定します。

上記の設定ができたら、「変更の保存」ボタンをクリックします。

ウェブサイトコンテンツをS3バケットにアップロード

作成したバケットのメインページに戻り、[アップロード]ボタンをクリックします。

アップロードしたいウェブサイトのファイル（HTML、CSS、JavaScriptファイルなど）を選択し、「アップロード」ボタンをクリックしてファイルをバケットに追加します。

ファイルが用意しておらず作成が面倒な方は、以下のサンプルをコピーしてindex.htmlというファイルを作成し、アップロードしてみて下さい。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>サンプルウェブサイト</title>
    <style>
      body { font-family: Arial, sans-serif; line-height: 1.6; }
      .container { max-width: 800px; margin: auto; padding: 20px; }
      h1 { color: #333366; }
      p { margin: 20px 0; }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>サンプルウェブサイトへようこそ</h1>
      <p>これはAmazon S3を使用してホストされている静的なサンプルウェブサイトです。</p>
      <p>HTML、CSS、JavaScriptのファイルをS3バケットにアップロードするだけで、簡単にウェブサイトを公開できます。</p>
    </div>
  </body>
</html>

バケットポリシーを設定

バケットの[アクセス権限]タブをクリックし、バケットポリシーから新しいポリシーを追加します。

バケットを公開するためのポリシー（公開読み取りアクセスを許可するポリシー）を入力します。

{
  "Version": "2012-10-17",
  "Statement": [{
    "Sid": "PublicReadGetObject",
    "Effect": "Allow",
    "Principal": "*",
    "Action": "s3:GetObject",
    "Resource": "arn:aws:s3:::バケット名/*"
  }]
}

※バケット名はご自身で作成したS3バケット名にしてください

ACMでSSL証明書を発行

ACMのコンソールに移動し、パブリック証明書をリクエストします。
※CloudFrontで使用する証明書のため、リージョンはバージニア北部を選択する必要があります。

「完全修飾ドメイン名」にご自身で取得しているドメイン名（例：test.it-slroom.blog）を入力し、「リクエスト」ボタンを実行します。 作成された証明書を選択し、「Route 53 でレコードを作成」ボタンをクリックします。

表示された画面から「レコードを作成」ボタンをクリックします。
※Route53にドメインが登録されていない場合、うまく動作しないため、登録を行ってください。

ドメインのステータスが「成功」になっていれば認証完了です。

CloudFrontのディストリビューションを作成

CloudFrontのコンソールに移動し、「ディストリビューションを作成」から作成していきます。

以下の値を設定して、「ディストリビューションを作成」ボタンで作成してください。

作成されたディストリビューションの設定の「編集」ボタンから「代替ドメイン名 (CNAME) 」を登録します。

この「代替ドメイン名 (CNAME) 」には「項目を追加」ボタンから、ご自身のドメイン（例：test.it-slroom.blog）を追加して、変更を保存します。

ディストリビューションの最終変更日が表示されると設定完了になります。
※数分かかる場合があります。

Route53のホストゾーンにAレコードを作成

Route53のコンソールから登録しているドメインのホストゾーンを選択し、「レコードを作成」ボタンをクリックします。

サブドメインを使用する方は、レコード名を設定します。 レコードタイプが「Aレコード」であることを確認し、「エイリアス」をオンにします。

トラフィックのルーティング先を以下のように設定します。

設定ができたら、「レコードを作成」ボタンをクリックします。 ※作成に数分かかる場合があります。

ブラウザから確認

https://test.it-slroom.blogでアクセスしてみると、httpsで以下のようにアップロードしたHTMLファイルが表示されていることが確認できます。

まとめ

AWSを使って簡単にウェブサイトを公開する方法について、手順に従いながら実際に操作してみました。

Amazon S3を利用して静的ウェブサイトをホスティングし、必要に応じてAmazon CloudFrontを通じて高速に配信するこのプロセスは、技術的な背景がない方でも容易に実行できます。 このガイドを通じて、ウェブサイトを公開することのハードルが低いことがお分かりいただけたかと思います。

初心者であっても、AWSの強力なツールを利用して、自分だけのウェブサイトを構築できることを心から願っています。