AWS S3とCloudFrontで静的ウェブサイトを公開する手順

自分への備忘録です。AWSのS3（Simple Storage Service）とCloudFrontを利用して、HTML、CSS、JavaScriptで作成された静的ウェブサイトを公開する手順を紹介します。

はじめに
手順
まとめ

はじめに

S3は、高い耐久性とスケーラビリティを持つオブジェクトストレージサービスです。ウェブサイトのファイルをここに保存します。
CloudFrontは、コンテンツデリバリーネットワーク（CDN）サービスです。世界中に配置されたエッジサーバーにウェブサイトのコンテンツをキャッシュし、ユーザーに最も近い場所から高速に配信します。

この構成には以下のメリットがあります。

高速な表示: CloudFrontのCDNにより、世界中のどこからでも高速にアクセスできます。
高い可用性: S3の高い耐久性により、ファイルが失われるリスクが非常に低いです。
スケーラブル: アクセスが急増しても、自動的にスケールして対応します。
コスト効率: サーバーを常時稼働させる必要がなく、従量課金制のため低コストで運用できます。

手順

ステップ１：サンプルファイルの準備

まず、S3に保存するサンプルサイトのファイルを準備します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>S3/CloudFront Test</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>S3とCloudFrontからの配信テスト</h1>
    <p>このページは、AWS S3に保存され、CloudFrontを経由して配信されています。</p>
    <button id="myButton">クリックしてね</button>
    <script src="script.js"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>S3/CloudFront Test</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>S3とCloudFrontからの配信テスト</h1>
    <p>このページは、AWS S3に保存され、CloudFrontを経由して配信されています。</p>
    <button id="myButton">クリックしてね</button>
    <script src="script.js"></script>
</body>
</html>

style.css

body {
    font-family: sans-serif;
    text-align: center;
    margin-top: 50px;
}

h1 {
    color: #333;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

body {
    font-family: sans-serif;
    text-align: center;
    margin-top: 50px;
}

h1 {
    color: #333;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

script.js

document.getElementById('myButton').addEventListener('click', function() {
    alert('ボタンがクリックされました！');
});

document.getElementById('myButton').addEventListener('click', function() {
    alert('ボタンがクリックされました！');
});

ステップ２：S3バケットの作成と設定

次に、ウェブサイトのファイルを保存するためのS3バケットを作成します。

AWSマネジメントコンソールにサインインし、サービス一覧から「S3」を選択します。
「バケットを作成」をクリックします。
バケット名を決定します。バケット名は世界で一意である必要があります（例: my-static-website-yyyymmdd）
「ブロックパブリックアクセス設定」で、「パブリックアクセスをすべてブロック」のチェックが入っていることを確認します。
その他の設定はデフォルトのままで、「バケットを作成」をクリックします。

ステップ３：ファイルのアップロード

作成したバケットに、用意したサンプルのファイルをアップロードします。

作成したバケットを選択し、「アップロード」をクリックします。
ローカルの website-files フォルダの中にある index.html、style.css、script.js の3つのファイルをアップロードします。「ファイルを追加」ボタンでファイルを選択するか、ファイルをドラッグ＆ドロップしてください。
「アップロード」をクリックします。