AWS S3バケット作成と静的サイト公開手順：初心者でも30分で完了

静的なWebサイトを無料で公開したいなら、AWS S3バケットを活用するのが最も簡単でコスト効果の高い方法です。本記事では、AWS初心者でも迷わずにS3バケットを作成し、静的サイトを公開するまでの完全手順を解説します。DNS設定やHTTPS化も含めた実践的な手順を30分で完了させる方法を紹介しますので、ぜひ参考にしてください。

はじめに：静的サイト公開のメリットとAWS S3の選択肢
前提条件：AWSアカウントと必要なツール
S3バケットの作成手順（初心者向け）
静的ファイルのアップロードと公開設定
独自ドメインの設定とHTTPS化
パフォーマンスとセキュリティの最適化
よくあるエラーとその解決方法
まとめ：静的サイト公開のベストプラクティス
FAQ：AWS S3静的サイトに関する5つの疑問

はじめに：静的サイト公開のメリットとAWS S3の選択肢

静的サイトとは、HTML、CSS、JavaScriptなどのファイルのみで構成されたWebサイトのことです。動的な処理を必要としないため、サーバーの負荷が少なく、セキュリティリスクも低いという特徴があります。AWS S3を使って静的サイトを公開するメリットは以下の通りです。

メリット	詳細	コスト
低コスト	最初の5GBまでは月額$0.023/GB（2024年時点）で、無料枠も利用可能	月額数十円〜数百円
高可用性	AWSのグローバルインフラストラクチャにより、99.99%の可用性を保証	追加費用なし
セキュリティ	AWS IAMと組み合わせることで、きめ細かなアクセス制御が可能	追加費用なし
拡張性	トラフィックが増加しても自動的にスケールするため、サーバー管理が不要	追加費用なし

一方で、静的サイトには動的な処理（データベース連携、ユーザー認証など）ができないという制限があります。そのため、ブログやポートフォリオ、ドキュメントサイトなどに最適です。動的な機能が必要な場合は、AWS LambdaやEC2と組み合わせる方法もありますが、本記事では静的サイトに特化した手順を解説します。

AWS S3を選ぶ理由は、他の静的サイトホスティングサービスと比較して以下の点で優れているからです。

AWSエコシステムとの連携：CloudFront、Route 53、ACMなどAWSサービスとシームレスに統合可能
グローバルな配信：リージョンを選択するだけで、世界中にコンテンツを配信できる
バージョニング機能：ファイルの履歴管理が可能で、誤って上書きしても復元できる
ライフサイクル管理：古いファイルを自動的にアーカイブまたは削除できる

それでは、実際にAWS S3バケットを作成し、静的サイトを公開する手順を詳しく解説していきます。

前提条件：AWSアカウントと必要なツール

AWS S3を使って静的サイトを公開する前に、以下の前提条件を満たしていることを確認してください。

1. AWSアカウントの作成

AWSアカウントをまだお持ちでない場合は、以下の手順で作成してください。

AWS公式サイトにアクセスし、「アカウントを作成する」をクリックします。
メールアドレス、パスワード、アカウント名を入力します。
連絡先情報（住所、電話番号）を入力します。
支払い情報（クレジットカード）を登録します。AWSは無料利用枠がありますが、アカウント作成にはクレジットカードが必要です。
確認メールが送信されるので、メール内のリンクをクリックしてアカウントを有効化します。

注意事項：AWSアカウント作成時には、ルートユーザーではなく、IAMユーザーを作成して使用することを強く推奨します。ルートユーザーは全ての権限を持つため、セキュリティリスクが高くなります。

2. 必要なツールのインス…

AWS S3を操作するために、以下のツールをインストールしてください。

ツール	目的	ダウンロード先
AWS CLI	コマンドラインからS3バケットを操作するため	AWS CLI公式サイト
AWS Toolkit for Visual Studio Code	VS Code上でAWSリソースを管理するため（任意）	VS Code Marketplace
テキストエディタ（VS Code推奨）	静的サイトのHTML/CSS/JavaScriptファイルを編集するため	VS Code公式サイト

3. 静的サイトのファイル準備

静的サイトを公開するためには、以下のファイルが最低限必要です。

index.html：サイトのトップページ（必須）
style.css：スタイルシート（任意）
script.js：JavaScriptファイル（任意）
images/：画像ファイルを格納するフォルダ（任意）

以下は、最もシンプルなindex.htmlの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Static Site</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>ようこそ！静的サイトへ</h1>
    <p>このサイトはAWS S3で公開されています。</p>
    <script src="script.js"></script>
</body>
</html>

これらのファイルをローカル環境で作成し、テストしておいてください。ブラウザでindex.htmlを開いて、正しく表示されることを確認しておきましょう。

S3バケットの作成手順（初心者向け）

それでは、いよいよAWS S3バケットを作成します。S3バケットは、静的サイトのファイルを保存するための「入れ物」のようなものです。以下の手順に従って、バケットを作成してください。

バケット名のルールとリージョン選択

S3バケットを作成する際には、以下のルールに従って名前を決める必要があります。

グローバルで一意の名前：S3バケット名はAWS全体で一意である必要があります。既に使われている名前は使用できません。
DNS互換の名前：バケット名はDNS名として有効でなければなりません。以下の文字のみ使用可能です。
- 小文字の英数字（a-z、0-9）
- ハイフン（-）
- ドット（.）
長さ制限：3〜63文字
先頭と末尾の文字：ハイフンまたはドットで始まるか終わる名前は使用できません。
IPアドレス形式：バケット名をIPアドレス（例：192.168.1.1）のようにすることはできません。

例えば、以下のような名前は有効です。

my-static-site-2024
portfolio.example.com
blog-2024-01

一方で、以下の名前は無効です。

MyStaticSite（大文字は使用できない）
my_site（アンダースコアは使用できない）
192.168.1.1（IPアドレス形式）
my-static-site-（末尾がハイフン）

次に、リージョンを選択します。リージョンは、バケット内のデータが保存される場所です。以下の要素を考慮して選択してください。

ターゲットユーザーの地理的位置：主なユーザーが日本にいる場合は「アジアパシフィック（東京）」を選択します。
コスト：リージョンによってストレージコストが若干異なります。詳細はAWS S3料金表を参照してください。
法規制：特定のデータを保存する場合は、法規制に従ったリージョンを選択します。

今回は「アジアパシフィック（東京）」を選択します。

バケット作成手順

AWS Management Consoleにログインします。
検索バーに「S3」と入力し、S3サービスを選択します。
「バケットを作成」ボタンをクリックします。
以下の情報を入力します。
- バケット名：my-static-site-2024（ご自身で決めた名前を入力）
- リージョン：アジアパシフィック（東京）
「オブジェクト所有者」セクションで、「ACLを無効にする（推奨）」を選択します。これにより、バケット所有者がオブジェクトの所有権を持ち、セキュリティが向上します。
「このバケット内のパブリックアクセスをすべてブロックする」オプションは、デフォルトで有効になっています。静的サイトを公開する場合は、この設定を一時的に解除する必要があります。詳細は後述します。
「バケットの作成」ボタンをクリックします。

これでS3バケットが作成されました。次に、静的サイトホスティングを有効化します。

静的サイトホスティングの有効化

S3バケットを静的サイトとして公開するには、以下の手順で静的サイトホスティングを有効化します。

作成したバケットをクリックします。
「プロパティ」タブを選択します。
「静的なWebサイトホスティング」セクションを見つけ、「編集」ボタンをクリックします。
以下の設定を行います。
- 静的なWebサイトホスティング：有効にする
- インデックスドキュメント：index.html
- エラードキュメント：error.html（任意。404エラー時に表示されるページ）
「変更を保存」ボタンをクリックします。

これで静的サイトホスティングが有効化されました。次に、バケットポリシーを設定して、Webサイトへのアクセスを許可します。

パブリックアクセス設定の注意点

S3バケットに保存されたファイルにインターネットからアクセスできるようにするには、パブリックアクセス設定を変更する必要があります。しかし、パブリックアクセスを許可することはセキュリティリスクを伴うため、以下の注意事項を必ず守ってください。

必要最小限の権限のみ付与する：バケットポリシーで、静的サイトホスティングに必要な最小限の権限のみ付与します。
HTTPSを必ず有効化する：HTTPではなくHTTPSでアクセスできるように設定します。
CloudFrontを経由させる：直接S3にアクセスさせるのではなく、CloudFrontを経由させることで、セキュリティを向上させます。
モニタリングを設定する：AWS CloudTrailを使って、バケットへのアクセスログを記録します。

それでは、バケットポリシーを設定して、静的サイトへのアクセスを許可します。

作成したバケットをクリックします。
「許可」タブを選択します。
「バケットポリシー」セクションで、「編集」ボタンをクリックします。
以下のバケットポリシーを入力します。my-static-site-2024はご自身のバケット名に置き換えてください。

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::my-static-site-2024/*"
    }
  ]
}

このポリシーは、インターネット上の誰でもs3:GetObject（ファイルの読み取り）を実行できるようにします。これにより、静的サイトを公開できます。

「変更を保存」ボタンをクリックします。

注意：この設定により、バケット内のすべてのファイルがインターネットからアクセス可能になります。機密情報を含むファイルはアップロードしないでください。

次に、静的サイトのURLを確認します。S3バケットの「プロパティ」タブに戻り、「静的なWebサイトホスティング」セクションを確認してください。以下のようなURLが表示されます。

http://my-static-site-2024.s3-website-ap-northeast-1.amazonaws.com

このURLにアクセスすると、index.htmlが表示されるはずです。まだファイルをアップロードしていない場合は、次のセクションでファイルをアップロードしてください。

静的ファイルのアップロードと公開設定

S3バケットに静的ファイルをアップロードする方法は、主に以下の2つがあります。

AWS Management Console（ブラウザ）：簡単な操作でファイルをアップロードできる
AWS CLI：大量のファイルや自動化された処理に適している

ここでは、両方の方法を解説します。まずは、ブラウザからのアップロード方法から始めましょう。

推奨されるファイル構成とindex.htmlの必須要件

静的サイトを公開する際には、以下のファイル構成を推奨します。

my-static-site-2024/
├── index.html          （必須：トップページ）
├── error.html          （任意：404エラー時のページ）
├── style.css           （任意：スタイルシート）
├── script.js           （任意：JavaScriptファイル）
└── images/             （任意：画像ファイル）
    ├── logo.png
    └── hero.jpg

index.htmlの必須要件：

ファイル名はindex.htmlであること
ファイルはバケットのルート（最上位）に配置すること
HTML5の構文で記述されていること
レスポンシブデザインに対応していること（モバイル端末でも正しく表示されること）

以下は、レスポンシブデザインに対応したindex.htmlの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Static Site</title>
    <meta name="description" content="静的サイトのサンプルです">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>ようこそ！静的サイトへ</h1>
    </header>
    <main>
        <p>このサイトはAWS S3で公開されています。</p>
        <button id="sample-button">クリックしてください</button>
    </main>
    <footer>
        <p>© 2024 My Static Site. All rights reserved.</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

AWS CLIとブラウザからの2つのアップロード方法

方法1：AWS Management Console（ブラウザ）からアップロード

AWS Management Consoleにログインし、S3サービスを開きます。
作成したバケットをクリックします。
「オブジェクト」タブを選択します。
「アップロード」ボタンをクリックします。
「ファイルを追加」をクリックして、ローカルのファイルを選択します。複数のファイルを選択する場合は、Ctrlキー（Windows）またはCmdキー（Mac）を押しながらクリックします。
「アップロード」ボタンをクリックします。
アップロードが完了すると、ファイルがバケット内に表示されます。

注意：ファイルをアップロードする際には、以下の点に注意してください。

ファイル名の大文字・小文字：S3は大文字と小文字を区別します。ローカル環境と同じファイル名でアップロードしてください。
ファイルサイズ：1ファイルあたり最大5TBまでアップロードできますが、5GBを超えるファイルはマルチパートアップロードを使用する必要があります。
メタデータ：ファイルの種類（Content-Type）が正しく設定されていることを確認してください。例えば、.htmlファイルのContent-Typeはtext/html、.cssファイルはtext/cssです。

方法2：AWS CLIからアップロード

AWS CLIを使ってファイルをアップロードするには、以下の手順に従います。

AWS CLIをインストールし、設定します。以下のコマンドで設定できます。

aws configure

このコマンドを実行すると、以下の情報を入力するよう求められます。

AWS Access Key ID
AWS Secret Access Key
Default region name（例：ap-northeast-1）
Default output format（例：json）

注意：AWS Access Key IDとSecret Access Keyは、IAMユーザーを作成して取得してください。ルートユーザーの認証情報を使用しないでください。

以下のコマンドで、ファイルをS3バケットにアップロードします。

aws s3 cp index.html s3://my-static-site-2024/

複数のファイルをアップロードする場合は、以下のコマンドを使用します。

aws s3 cp . s3://my-static-site-2024/ --recursive

このコマンドは、カレントディレクトリ内のすべてのファイルとフォルダを再帰的にアップロードします。

AWS CLIを使う利点は、以下の通りです。

自動化：スクリプトを使って定期的にファイルをアップロードできる
大量のファイル：一度に大量のファイルをアップロードできる
柔軟性：ファイルのメタデータを設定できる

カスタム404エラーページの設定

静的サイトで404エラー（ページが見つからない）が発生した際に表示されるカスタムエラーページを設定できます。これにより、ユーザー体験を向上させることができます。

以下の手順で、カスタム404エラーページを設定します。

S3バケット内にerror.htmlという名前のHTMLファイルを作成します。以下は、シンプルなerror.htmlの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページが見つかりません</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
        }
        a {
            color: #007bff;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>お探しのページは見つかりませんでした</h1>
    <p>URLが間違っているか、ページが削除された可能性があります。</p>
    <p><a href="/">トップページに戻る</a></p>
</body>
</html>

このファイルをS3バケットにアップロードします。
S3バケットの「プロパティ」タブを開き、「静的なWebサイトホスティング」セクションを編集します。
「エラードキュメント」にerror.htmlと入力します。
「変更を保存」ボタンをクリックします。

これで、404エラーが発生した際にerror.htmlが表示されるようになりました。カスタムエラーページを設定することで、ユーザーに親切なメッセージを表示し、サイトからの離脱を防ぐことができます。

次に、独自ドメインを設定し、HTTPS化する方法を解説します。

独自ドメインの設定とHTTPS化

S3バケットのデフォルトURL（例：http://my-static-site-2024.s3-website-ap-northeast-1.amazonaws.com）ではなく、独自ドメイン（例：https://www.example.com）で静的サイトを公開する方法を解説します。独自ドメインを使うことで、ブランドイメージの向上やSEO効果が期待できます。

独自ドメインを設定するには、以下の手順が必要です。

独自ドメインを取得する（例：example.com）
Route 53でDNSレコードを設定する
AWS Certificate ManagerでSSL証明書を取得する
CloudFrontを設定してHTTPS配信を行う

それでは、順を追って解説していきます。

Route 53を使ったDNSレコード設定

独自ドメインを取得する方法は、以下の通りです。

Route 53で直接取得する：AWS Route 53でドメインを購入できます。
他社で取得したドメインをRoute 53に移管する：既に他社で取得したドメインをAWS Route 53に移管できます。
他社のDNSサービスを使用する：他社のDNSサービス（例：お名前.com、ムームードメイン）を使用し、Route 53でホストゾーンを作成することもできます。

ここでは、Route 53で新規にドメインを取得する方法を解説します。

Route 53でドメインを取得する

AWS Management Consoleにログインし、Route 53サービスを開きます。
左側
この記事を読んでいる方へのおすすめ：
- Amazon技術書｜インフラ・クラウド・ネットワーク
この記事で学んだスキルをさらに深めたい方へ
AWS・クラウド技術をさらに深く学びたい方に。試験対策から実践まで網羅した参考書を活用しましょう。
- AWS・クラウド技術書をAmazonで探す
Amazonアソシエイトプログラムを利用しています。
【編集・制作ポリシー】
本記事はRoute Bloom編集部が公式ドキュメント・技術仕様書の一次情報をもとに作成しています。ITインフラ・技術情報は急速に変化するため、実装前に最新の公式ドキュメントをご確認ください。情報の正確性には万全を期していますが、最新情報は各公式サイトをご確認ください。
【編集・制作ポリシー】
本記事はRoute Bloom編集部が各ベンダー公式ドキュメント・エンジニア監修をもとに作成しています。インフラ・クラウド構築は環境により異なります。本番環境への適用前に必ずテストを実施してください。情報の正確性には万全を期していますが、最新情報は各公式ドキュメントをご確認ください。
【編集・制作ポリシー】
本記事はRoute Bloom編集部が各ベンダー・技術標準の公式ドキュメントをもとに作成しています。インフラ・クラウド技術に関する最終判断は実際の環境・バージョンで検証のうえ実施してください。情報の正確性には万全を期していますが、最新情報は各公式ドキュメントをご確認ください。
編集ポリシー：この記事は、Route Bloom の編集チームが最新情報を元に執筆・監修しています。情報の正確性を保つために定期的な見直しを行っています。
ABOUT ME
たから
サラリーマンをしながら開業して経営やってます。今年、本業で独立・別事業を起業予定です。 ◆経験：IT講師/インフラエンジニア/PM/マネジメント/採用/運用・保守・構築・設計 ◆取得資格：CCNA/CCNP/LPIC-1/AZ-900/FE/サーティファイC言語 ◆サイドビジネス：アパレル事業/複数のWEBメディアを運営

AWS S3バケット作成と静的サイト公開手順