サイトアイコン 協栄情報ブログ

CloudFrontを使用してのWEBサイト構築

mochizuki.t

はじめに

皆様お疲れ様です。
最近は寒くなってきたので、家で引きこもっているmochizukiです。
そんな今日は３連休ということもあり、ハンズオンしたものを投稿していきたいなと思います。

今回はCloudFrontとS3を使用してのWEBサイト構築です。
S3は静的WEBサイトをホスティングするのに最適なサービスであり、CloudFrontをS3と組み合わせて使用すると、より高速で安全なWebサイトの配信が可能になります。

構成図＆目次

構成図

目次

  1. S3とCloudFrontの概要
  2. インフラの構築
  3. WEBサイトのアクセス確認
  4. まとめ

S3とCloudFrontの概要

S3の概要

S3は、AWSが提供するスケーラブルで信頼性の高いオブジェクトストレージサービスです。
S3は主に以下の特徴があります。

インフラの構築

ここからは構築に入っていきます。
流れは下記になります。

  1. S3の構築
  2. CloudFrontの構築
  3. S3にコンテンツの保存

1. S3の構築

はじめにS３を作成していきます。
S3のコンソール画面に行き、バケット→バケットを作成を押下します。
バケット名にかぶらないユニーク名前を付けます。

検証のため、暗号化は無効にしバケットを作成します。
S3バケットポリシーは後程設定するので次に行きます。

2. CloudFrontの構築

次にCloudFrontの構築を行います。
検索窓にCFと入力すると1番上にCloudFrontが表示されます。
CloudFrontのコンソール画面にてディストリビューションを作成を押下します。
Origin domainにて先ほど作成したS3バケットの名前を入力します。

Origin pathを指定することで、オリジン内のフォルダ内のコンテンツを配信することができます。
次にオリジンアクセスの設定は「Origin access control settings (recommended)」を選択し、設定はデフォルトのままOrigin access controlを新規作成します。

WAFを無効にします。
デフォルトルートオブジェクトに「index.html」と入力します。この設定を入れることでCloudFrontのディストリビューションドメイン名で、最初にアクセスできるオブジェクトを設定することができます。
その他設定をデフォルトのままディストリビューションの作成を押下し完了させます。

S3バケットポリシーの設定

完成後画面が遷移すると、画面上部にS3バケットポリシーの設定を更新してくださいとの警告が出ます。
画面上部のポリシーをコピーを押下します。

S3バケットのコンソール画面に行きます。
先ほど作成したS3バケットを選択します。
アクセス許可タブのバケットポリシーから編集を押下します。

CloudFrontにてコピーしたポリシーをペーストし変更の保存を押下します。

これにてインフラの構築は完了です。

3. S3にコンテンツの保存

次は表示させるコンテンツをS3に格納して行きます。
今回はHTMLファイルとCSSファイル2つで簡単なWEBサイトを構築します。
index.html

<!DOCTYPE html>
<html>
    <Head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Hello,Word!</title>
    </Head>
    <body>
        <h1>Hello,AWS</h1>
    </body>
</html>

style.css

/* 背景色を薄い青色に */
body {
    background-color: #f0f8ff;
    font-family: Arial, sans-serif;
    color: #333333;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* 見出しのスタイル */
h1 {
    color: #4682b4;
    font-size: 3em;
    text-align: center;
    text-shadow: 1px 1px 2px #000000;
    margin: 0;
}

上記二つを参考にエディタなどでファイルにします。
（CSSは全くわからないのでChatGPTという友達に作成してもらいました。）
次に作成したS3バケットのコンソール画面に行きます。
オブジェクトタブのアップロードを押下します。

ファイルの追加を押下して、先ほど作成したファイル2つを選択します。
ファイルとフォルダにかくのうされたのを確認出来たら、画面1番下のアップロードを押下します。

これで全ての準備は完了いたしました。

WEBサイトのアクセス確認

次はWEBサイトへアクセスできるかを確認していきます。

ディストリビューションドメインの確認

CloudFrontのコンソール画面に行き、オリジンが作成したS3のIDを選択します。
一般タブの詳細欄にあるディストリビューションドメイン名を確認しコピーします。

ブラウザでの表示確認

次にブラウザにて、ディストリビューションドメイン名を開きます。
URLバーにペーストしEnterを押下でindex.htmlにアクセスができることが確認できるかと思います。

まとめ

今回はCloudFrontとS3を使用して簡単なWEBサイトを構築してみました。
簡単とはいえど、設定をミスすると下記のような画面になる場合があると思います。

設定内容は上記に記載しているので、振り返って確認してみてください。
本来であればもっとセキュリティを作りこまなければいけないのですが、初学者のとっかかりになればと思いとても簡単な構成です。
（CloudFrontの後ろにWAFを配置するなど）
次回以降で、セキュリティ面であったりCloudFormationなどを使用しての構築であったりを行えればと考えています。
読んでいただきありがとうございました！

モバイルバージョンを終了