S3 + cloudfront で簡単な静的サイトを作成

はじめに

S3とは?

Amazon Simple Storage Service(S3)は、Amazon Web Services(AWS)が提供するクラウドストレージサービスです。S3を使用すると、インターネットを介してファイルを保存、管理、公開することができます。主な特徴は次のとおりです。

  • 安全性と耐久性: S3はデータの耐久性を高めるために複数のデータセンターにデータを自動的にレプリケーションします。また、データの暗号化やアクセスコントロールなどのセキュリティ機能も提供されています。
  • スケーラビリティ: S3は大容量のデータを格納し、必要に応じて無制限にスケールアウトすることができます。これにより、企業や個人が大規模なデータを安全に保存できます。
  • 低コスト: S3は使用した分だけ料金が発生する従量課金制のサービスです。ストレージ容量やデータ転送量に応じて料金が計算されるため、必要な分だけ支払うことができます。

CloudFrontとは?

Amazon CloudFrontは、コンテンツ配信ネットワーク(CDN)サービスであり、AWSが提供しています。CloudFrontを使用すると、世界中のユーザーに高速かつセキュアなコンテンツを配信することができます。主な特徴は次のとおりです。

  • 高速な配信: CloudFrontは世界中に配置されたエッジロケーション(データセンター)を利用してコンテンツを配信します。これにより、ユーザーが最も近いエッジロケーションからコンテンツを取得し、高速なアクセスが可能になります。
  • セキュリティとプライバシー: CloudFrontは、HTTPSや署名付きURLなどのセキュリティ機能を提供し、コンテンツの安全性とプライバシーを確保します。
  • スケーラビリティとコスト効率: CloudFrontは需要に応じて自動的にスケールし、大規模なトラフィックにも対応します。また、従量課金制の料金体系を採用しているため、必要な分だけの料金しか支払いません。

S3とCloudFrontを組み合わせると、静的なウェブコンテンツや動画、画像などを効率的に配信することができます。S3は安全なデータストレージを提供し、CloudFrontはそのコンテンツを高速かつセキュアにユーザーに届ける役割を果たします。

この記事で説明すること

・S3 とCloudfront を使って簡単な静的サイトを作ってみる

・そして、その動作確認をしてみる

それ以外のことはほかの記事で紹介してみようと思います

本記事はQIITAのこちらの記事を見て作ろう思いました。非常に参考になりますので、皆様もぜひご覧ください。本記事は下記の記事を参照にして、画面をたくさん貼り付けイメージしやすくするように心がけました。

S3とCloudFrontで静的WEBホスティングを公開する手法 #AWS – Qiita

S3バケットを作成

S3のバケットを一度も作成したことない状態からの画面を想定して行います

「バケットを作成」 ボタンをクリックします

上記のQIITAの記事とは見た目が異なりますので、画面を張り付けながら説明します

バケットタイプ=汎用

バケット名は適当=「test-site-bucket-david」としました。

オブジェクト所有者は 「ACL無効(推奨)」

「パブリックアクセスをすべてブロック」 のままで変更なしとします。 

下記の設定も変更なし

暗号化もそのまま

詳細設定もそのままで 「バケットを作成」をクリック

正常に作成できたら、下記のようになります

それでは、バケット名をクリックして中身を見てみましょう

適当にこんなhtml を書きましたので、アップロードしましょう

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>シンプルなHTMLページ</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }
        header, nav, section, footer {
            padding: 20px;
            margin: 10px;
        }
        header {
            background: #f4f4f4;
            text-align: center;
        }
        nav {
            background: #333;
            color: white;
            text-align: center;
        }
        nav a {
            color: white;
            padding: 14px 20px;
            text-decoration: none;
            display: inline-block;
        }
        nav a:hover {
            background: #575757;
        }
        section {
            background: #e2e2e2;
        }
        footer {
            background: #f4f4f4;
            text-align: center;
        }
    </style>
</head>
<body>

<header>
    <h1>ようこそ私たちのウェブサイトへ</h1>
    <p>これはサンプルのHTMLページです。</p>
</header>

<nav>
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">お問い合わせ</a>
    <a href="#">会社情報</a>
</nav>

<section>
    <h2>私たちについて</h2>
    <p>私たちは、最高のサービスを提供することを目指しています。お客様の満足が私たちの第一の目標です。</p>
    <p>長年の経験と専門知識を活かして、お客様のニーズに合わせたソリューションを提供します。</p>
</section>

<section>
    <h2>サービス</h2>
    <p>私たちは、以下のサービスを提供しています:</p>
    <ul>
        <li>ウェブサイト制作</li>
        <li>アプリケーション開発</li>
        <li>デジタルマーケティング</li>
        <li>ITコンサルティング</li>
    </ul>
</section>

<footer>
    <p>&copy; 2024 私たちの会社. すべての権利を保有します。</p>
</footer>

</body>
</html>

この記事では簡単な紹介のみですので、下記の設定変更は必要ありません

下記の設定も、そのままにしておきます

設定を変更せず「アップロード」ボタンを押します

成功すると下記のような画面になります。これでS3の設定は終了です

CloudFront の設定

S3 に静的サイトの素材を置いたら、cloudfront の設定を行います。cloudfront は簡単に言えば

「サイト閲覧者が直接WEBサーバに到達しなくても、Cloudfront が用意するエッジサーバがWEBサーバの代わりにキャッシュしているコンテンツをサイト閲覧者に返してあげる」という仕組みです。この仕組みを利用することによって、サイト閲覧者はキャッシュしているサーバからコンテンツを取り出すことにより、高速なアクセスが可能になります。(話を単純化するとこういう説明になります)

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

こちらもCloudFront を使用したことがないという前提の画面から説明します。下記の画面にある

「CloudFront ディストリビューションを作成」ボタンをクリックしましょう

ディストリビューション (Distribution)


ディストリビューションは、AWS CloudFrontを利用してコンテンツを配信するための設定セットです。CloudFrontディストリビューションを作成すると、コンテンツ(例えばウェブサイト、API、データファイルなど)をエッジロケーションにキャッシュして、ユーザーが最も近いエッジロケーションからコンテンツを受け取れるようにします。これにより、配信速度が向上し、遅延が減少します。

オリジンとオリジンアクセス

オリジン (Origin)
オリジンは、CloudFrontがコンテンツを取得する元のサーバーのことです。オリジンにはAmazon S3バケット、Amazon EC2インスタンス、Elastic Load Balancer、またはカスタムオリジンサーバー(例えば、自社のデータセンターにあるサーバー)などを指定できます。CloudFrontディストリビューションの設定では、どのオリジンからコンテンツを取得するかを指定します。

オリジンアクセス (Origin Access)
オリジンアクセスとは、CloudFrontディストリビューションがオリジンにアクセスしてコンテンツを取得する方法のことです。オリジンアクセスを設定することで、CloudFrontからのみオリジンにアクセスを許可するように設定できます。これにより、セキュリティが向上し、オリジンへの不正アクセスを防ぐことができます。

S3バケットポリシー (S3 Bucket Policy)


S3バケットポリシーは、特定のAmazon S3バケットに対するアクセス許可を定義するJSON形式のポリシーです。このポリシーを使用して、誰がどのような操作(読み取り、書き込みなど)を実行できるかを細かく制御できます。CloudFrontと組み合わせる場合、OAIを使用して、CloudFrontが特定のS3バケットにアクセスできるようにするポリシーを設定します。

WAFの保護 (WAF Protection)


AWS WAF(Web Application Firewall)は、Webアプリケーションを攻撃から保護するためのサービスです。AWS WAFを使用すると、特定のIPアドレスやIP範囲、HTTPヘッダー、URI文字列、SQLインジェクション攻撃やクロスサイトスクリプティング(XSS)などの一般的なWeb攻撃からアプリケーションを保護するルールを設定できます。CloudFrontディストリビューションにAWS WAFを統合することで、エッジロケーションでの攻撃を迅速に検出・防御することができます。

いろいろ設定する箇所はありますが、ほかはいじらずに「ディストリビューションの作成」ボタンをクリックします

上記のディストリビューションドメイン名にindex.html をつけると下記のように表示されるはずです

最後に

いかがでしたでしょうか?この通りにやれば、すぐにできるというレベルまで落とし込んだので、これだけやっても、1時間以内にはできるはずです。次の記事ではReact のページをACM、Route53を使って公開する方法も付け加える予定です

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です