AWS S3でWebサーバを無料枠で構築する

September 13, 2022

1. 概要

今回の記事では、AWS S3を使用して、自己紹介ホームページを公開する手順を丁寧に解説します。
AWS S3だけでは、セキュアな通信（https）が使用できないなどの課題も出てきますが、これらの対処方法についても解説します。

とにかくやってみることで、AWS S3 / CloudFront に関連することを学んでいきましょう。

AWS S3、オブジェクトストレージ、CloudFront、CDN について学ぶことができます。

2. 前提条件

AWSのアカウントを保有していること

3. 目的

今回の記事では、

「AWS S3(オブジェクトストレージ)」について学ぶ。
「HTML/CSS」の概要について学ぶ。
「AWS CloudFront(CDN)」について学ぶ。

の流れで、自己紹介ホームページを作成し、AWS(S3/CloudFront)を学ぶことを目的としています。

4. 目次

1. 概要
2. 前提条件
3. 目的
4. 目次
5. 内容
6. まとめ

5. 内容

ここからは下記の流れで実際に手を動かして作成しますので、頑張っていきましょう。

graph LR
   AWS_S3の作成 --> 自己紹介ホームページの作成 --> AWS_CloudFrontの作成

AWS S3 や AWS CloudFront については後ほど解説します。

5.1. AWS_S3を作成する

本節では AWS S3 がどのようなサービス化を理解したのち、実際に AWS S3 を作成します。

5.1.1. AWS_S3とは

公式マニュアルから説明を引用すると下記と記載されています。

Amazon Simple Storage Service (Amazon S3) は
業界をリードするスケーラビリティ、データ可用性、セキュリティ、
およびパフォーマンスを提供するオブジェクトストレージサービスです。

用語が難しいのでもう少しわかりやすくAWS S3を説明すると

データサイズを気にすることなく（＝スケーラビリティ）
データをいつでも使えて（＝データ可用性）
データを安全に（＝セキュリティ）
データの読み書きも現実的なスピード（＝パフォーマンス）

を提供するオブジェクトストレージという種類のデータを入れる箱です。

代表的なストレージの種類は、ファイルストレージ、オブジェクトストレージ、ブロックストレージがあります。
興味がある人は調べると、おもしいかもしれないです。
（別途、ストレージに関する記事も書く予定）

5.1.2. AWS_S3の作成

AWS コンソールが画面にアクセスし、右上のコンソールにサインボタンでサインインした後 AWS S3 を作成します。

サインイン

サービス ＞ ストレージ ＞ S3 を選択します。
AWSコンソール

5.1.2.1. バケットの作成

バケットは Windowsのフォルダにあたります。後ほど作成する自己紹介ホームページのファイル（.html/.css/.png）はこのバケットの中に格納されます。

バケットは AWS S3 の用語です。

下の ▶ を展開するとバケット作成の詳細手順が表示されます。

バケット作成詳細手順（画面キャプチャあり）

バケットを作成を押下し、バケットを作成します。
下記の画像を参考に値を設定しましょう。
バケット作成

5.1.2.1.1. 一般的な設定

一般的な設定

名称	値	備考
バケット名	self-introduction	任意(ご自由に)
AWSリージョン	アジア・パシフィック（東京）ap-northeast-1

5.1.2.1.2. オブジェクト所有者

デフォルト（ACL無効（推奨））でOKです。
オブジェクト所有者

5.1.2.1.3. このバケットのブロックパブリックアクセス設定

パブリックアクセスをすべてブロックのチェック☑ をはずします。
「パブリックアクセスのブロックをすべてオフに・・・」のアラートが表示されますが、「現在の設定により、・・・」にチェック ☑ します。

このバケットのブロックパブリックアクセス設定

5.1.2.1.4. オブジェクト所有者

デフォルト（無効にする）でOKです。
バケットのバージョニング

5.1.2.1.5. バケットを作成

残りの設定はそのままにし、バケットを作成を押下します。

5.1.2.1.6. 確認

バケットが正常に作成されましたが表示されればOKです。

5.2. 自己紹介ホームページ用のファイルを作成と公開

AWS S3 にアップロードするファイルを作成します。
下記にサンプルファイルがあるので作業パソコンにコピペして、自由に編集してみてください。

作成したファイルの内容は、インターネットに公開される ため、
記載内容には細心の注意をしましょう！！

5.2.1. 自己紹介ホームページのサンプルファイル

サンプルファイル

5.2.1.1. サンプル.htmlファイル

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>スズコウの自己紹介ページ</title>
        <link rel="stylesheet" href="./style.css">
        <meta charset="utf-8">
    </head>
    <body>
        <div>
        <h1>Personal Information</h1>
        <p>
            <img src="my-photo.png" width="300px"><br>
            名前:鈴木 幸之助 (架空の人物)<br>
            ニックネーム:suzukou
        </p>
        <h2>コメント</h2>
        <p>
        何事にも好奇心をもって楽しむことをモットーにしています。<br>
        最近はプログラミング言語に興味があり勉強しているところです。
        </p>
        <h2>パーソナル情報</h2>
        <p>
        誕生日: 1989.2.10<br>
        性別: 男<br>
        趣味: 音楽、スノボ、バイク、キャンプ<br>
        特技: ダンス、ビートボックス<br>
        </p>
        <h2>仕事</h2>
        <p>
        今の仕事: 広告代理店<br>
        できること: 広報、営業、プロモーション企画、プログラミング（これから）<br>
        職歴: IT業界の営業（約2年）、広告代理店営業（約8ヶ月）
        </p>
    </div></body>
</html>

5.2.1.2. サンプル.cssファイル

style.css

body {
  background-color: #e5e8e8;
  color: #1b1b1b;
}

div {
  display: block;
  padding: auto;
  margin-left: 20%;
  margin-right: 20%;
}

p {
  font-size: 36px;
}

h1 {
  font-size: 88px;
  font-weight: bold;
  padding: 20px 0;
}
h2 {
  font-size: 44px;
  font-weight: bold;
  background-color: #33ad9d;
  color: #e5e8e8;
  padding: 10px 15px;
  border-radius: 5px;
  margin: 40px 0 10px;
}

5.2.1.3. サンプル.png(顔写真)ファイル

5.2.2. 自己紹介ホームページの公開

自己紹介ホームページを AWS S3 のバケットにアップロードし、インターネット上に公開します。

下の ▶ を展開するとS3へのアップロードの詳細手順が表示されます。

S3へのアップロードと公開の詳細手順（画面キャプチャあり）

5.2.2.1. サービス＞ストレージ＞ S3 を選択します。

S3を選択

5.2.2.2. 作成したバケットを選択します。

バケット選択

5.2.2.3. `アップロード` ボタンを押します。

アップロード

5.2.2.4. ファイルを選択し、アップロードします。

作成したファイル（.html/.png/.css）をこの画面にドラッグアンドドロップします。
下記画面のように3つのファイルが表示された状態で、アップロードボタンを押下します。
「アップロードに成功しました」と表示されればOKです。

5.2.2.5. 公開する設定（静的ウェブサイトホスティングの公開）

バケットの選択画面で作成したバケットを選択します。
プロパティを選択します。
静的ウェブサイトホスティングの 編集ボタンを押下します。
静的ウェブサイトホスティングを有効化します。
静的ウェブサイトホスティングは "有効にする" を選択し、
インデックスドキュメントは、"index.html" を入力します。
変更の保存をします。
正常に編集されましたが表示されればOKです。
アクセス許可を選択します。
バケットポリシーの編集ボタンを押下します。
下記の内容に修正します。（全消ししてコピペでOK）

バケットポリシー

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

"self-introduction" の部分はバケット名に合わせて修正します。

ポリシー

変更の保存ボタンを押下します。
正常に編集されましたと表示されればOKです。

5.2.2.6. 自己紹介ホームページにアクセス

もう一度「静的ウェブサイトホスティング」を確認するとアクセスURLが表示されています。

このように自己紹介ホームページが表示されます。
正常に編集

5.3. AWS_S3でWebサーバ公開の課題と対処

5.3.1. 課題_httpsが使えない

ブラウザで自己紹介ホームページを表示する時に 保護されていない通信 となることに気がついたでしょうか。

保護されていない通信

これはセキュアなhttps://～ではなくhttp://～(sなし)でアクセスしていることが原因です。しかし、AWS S3 単体ではセキュアなhttpsでアクセスすることができません。

このことは公式マニュアルに記載されています。

Amazon S3 ウェブサイトエンドポイントは HTTPS をサポートしていません。

5.3.2. 対策_httpsが使えない

公式マニュアルには、対処方法もあわせて記載されています。

HTTPS を使用する場合は、Amazon CloudFront を使用して Amazon S3 でホストされている静的ウェブサイトを提供できます。

Amazon CloudFront を使用することで解決できるので、さっそく作成します。

5.4. AWS_CloudFrontを作成する

本節では AWS CloudFront がどのようなサービス化を理解したのち、実際に AWS CloudFront を作成します。

5.4.1. AWS_CloudFrontとは

公式マニュアルを確認すると、下記と記載されています。

Amazon CloudFront は、ユーザーへの静的および動的なウェブコンテンツ (.html、.css、.js、イメージファイルなど) の配信を高速化するウェブサービスです。

少し分かりづらいので図を用いて解説します。

5.4.1.1. CloudFrontがない場合の問題点

複数ユーザからのアクセス負荷が1点に集中してしまう。
各ユーザからS3(Webサーバ)までの距離が遠いため、遅延が発生してしまう。

CloudFrontがない場合

5.4.1.2. CloudFrontがある場合

世界中のCloudFrontにキャッシュデータを配信します。
配信することで上記の問題点を解決できます。
- 世界中にキャッシュデータを配信するため、各ユーザは近くにあるキャッシュデータを取得できるため、レスポンスが早い。
- 世界中に分散配置されたCloudFrontを使用するため、アクセス不可を分散することができる。

CloudFrontがある場合

このような方法でウェブコンテンツの配信を高速化しています。

これは CDN(Content Delivery Network) の一種で、AWS CloudFront は AWS のCNDサービスにあたります。

5.4.2. AWS_CloudFrontの作成

ここから AWS CloudFrontの作成について解説します。

作成したときのイメージは下記となります。
CloudFront経由

下の ▶ を展開するとAWS CloudFront作成の詳細手順が表示されます。

AWS CloudFront作成の詳細手順の詳細手順（画面キャプチャあり）

CloudFrontの画面を開く
サービス＞ネットワーキングとコンテンツ配信＞ CloudFront
ディストリビューションの作成
ディストリビューションを作成ボタンを押下する
ディストリビューションの設定
オリジンドメインを選択します (Aamazon S3 ＞作成したバケットを選択）
※ オリジンドメインを選択すると名前も自動で入力されます
デフォルトのキャッシュビヘイビアのビューワー設定
ビューワーをHTTPS onlyに選択します。
一番下にあるディストリビューションを作成ボタンを押下します。
※ 他の設定はそのまま（デフォルト）
結果
正常に作成されましたと表示されればOKです。
CloudFront ディストリビューションドメイン名を取得します。
一般＞ディストリビューションドメイン名をコピー
AWS CloudFront 経由で自己紹介ホームページに https アクセスします。
AWS S3 にアップロードした自己紹介ホームページが表示されればOKです。
```
https://{ディストリビューションドメイン名}/{AWS S3 ファイル名}
```
例）https://dvot1rc9t89mq.cloudfront.net/index.html

※ http(sなし)ではアクセスできないので注意！

5.5. AWS_CloudFrontを使用する場合の課題と対策

ここで2点ほど、課題があるのでこれらの対策を解説します。

AWS_S3にも直接アクセスできる
ファイルを更新した場合に変更内容が画面に反映されない

5.5.1. AWS_S3にも直接アクセスできる

5.5.1.1. 課題1:AWS_S3にも直接アクセスできる

CloudFrontを経由することで、httpsで自己紹介ホームページを表示できました。
しかし、直接 AWS S3 にアクセスするとhttp(sなし)でアクセスできてしまいます。

これではCloudFront経由でセキュアなアクセス(https)ができるようにしても抜け道ができてしまいます。

AWS S3 のプロパティ画面の一番下に S3 のアクセスURLがあるのでhttpアクセスを試してみましょう。

AWS S3 URL（画面キャプチャあり）

S3_URL
S3_URL

5.5.1.2. 対策1

対策としては AWS S3 にアクセスできる相手を AWS CloudFront だけに制限することで対応できます。

CloudFront経由

具体的には、AWS S3 のバケットポリシー（バケットのアクセスルール）を定義します。

AWS S3 管理コンソールから作成したバケットを選択し
アクセス許可＞バケットポリシーの編集ボタンを押下します。
設定例を参考にcondition部分を追加します。

"Resource": "arn:aws:s3:::self-introduction/*"、は作成したバケット名にあわせて修正してください

設定例

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::self-introduction/*",
            // 追加部分 (このコメントは削除してください)
            "Condition": {
                "StringEquals": {
                    "aws:UserAgent": "Amazon CloudFront"
                }
            }
    }
    ]
}

画面右下の変更の保存ボタンを押下します。
S3バケットポリシー

設定完了です。http(sなし)でアクセスできなくなればOKです。
（403 Forbiddenと表示されます）

AWS S3 のプロパティ画面の一番下に S3 のアクセスURLがあるのでhttpアクセスを試してみましょう。

AWS S3 URL（画面キャプチャあり）

プロパティを選択します。
URLをクリックします。(httpアクセス)
403 Forbidden が表示さればOKです。

使用しているパソコンにキャッシュが残っている場合はhttp(sなし)でも表示される可能性があります。ブラウザのキャッシュクリアもしくはシークレットモードを使用して再トライしましょう。

5.5.2. ファイルを更新した場合に変更内容が画面に反映されない

なぜファイルを更新した場合に変更内容が画面に反映されないか解説した後、対策を説明します。

5.5.2.1. 課題2:ファイルを更新した場合に変更内容が画面に反映されない

CloudFrontを使用すると、修正したファイル（自己紹介ホームページのHTMLファイルなど）を AWS S3 にアップロードしても、ユーザー（自己紹介ホームページを見ている人）はキャッシュにアクセスしてしまう。

キャッシュにアクセスしてしまう

5.5.2.2. 対策2

下記2つの対策を実施します。

CloudFront のキャッシュ情報を削除（クリア）する
S3 の資産をバージョン管理する

5.5.2.2.1. CloudFront のキャッシュ情報を削除（クリア）する

キャッシュを削除（クリア）すれば、CloudFront は S3 にある更新ファイルから新しいキャッシュを作成します。

キャッシュ削除タブを選択し、キャッシュ削除を作成 ボタンを押下します。
オブジェクトパスを追加を編集（/*を追加）し、キャッシュ削除を作成ボタンを押下します。
確認
正常に作成されましたと表示されればOKです。

少し時間が経過するとステータスも完了済みとなります。

5.5.2.2.2. S3 の資産をバージョン管理する

CloudFront のキャッシュクリア（削除）を毎回実施するのは大変なので、ファイルを更新(S3へアップロード)するだけで、変更内容を反映できるようにします。

このやり方法はAWS公式ページにも記載されています。

ライフサイクルルールを作成する
AWS S3 コンソール画面から管理＞ ライフサイクルルールを作成するボタンを押下します。
ライフサイクルルールの設定
ライフサイクルルール名（任意）を入力し、
バケット内のすべてのオブジェクトに適用 を選択した後、
このルールがバケット内のすべてのオブジェクトに適用されることを了承します。をチェックします。
ライフサイクルルールのアクション
オブジェクトの非現行バージョンを完全に削除にチェックを入れます。
オブジェクトの非現行バージョンを完全に削除
オブジェクトが現行バージョンでなくなってからの日数に1を入力します。
ルールの作成
ルールの作成ボタンを押下します。
確認
ライフサイクル設定が更新されました。と表示されればOKです。

更新したファイルを AWS S3 にアップロードしてから、画面に反映されるまでには時間がかかります。
待ちきれない場合は、CloudFront のキャッシュを削除してください。

6. まとめ

今回は大きく

AWS S3 の構築
自己紹介ホームページの作成とアップロード
AWS CloudFront(CDN) の構築

の流れで解説しましたが、楽しめたでしょうか。

最後にポイントをまとめると

AWS S3 は Webサーバとして使用できるが、セキュアなhttpsでアクセスすることはできない。
セキュアなhttpsでアクセスするためには AWS CloudFront（CDN）を使用する。
CloudFrontを使用する場合、更新ファイルの反映には対策（キャッシュ更新）が必要となる。

の3つとなります。
これらが少しでもみなさまのお役に立てばうれしいです。

本記事を読んでいただきありがとうございまいた。