生成AI×AWSでWebサイトを公開してみる

スポンサーリンク
ハンズオン
2024.09.04
スポンサーリンク
スポンサーリンク
多彩な講座から自分に合った講座を探そう！

はじめに

AWSを使い始めたばかりの方や勉強中の方、またオンプレミス環境での経験が長い方にとって、クラウドサービスを使ったWebサイト構築は少しハードルが高く感じられるかもしれません。

私も以前、オンプレミス環境でサーバを運用しており、「Webサーバは必要ないのか？」「ネットワーク構成はどうなっているのか？」など、クラウド特有の疑問を抱いていました。

この記事では、AWSを使ってWebサイトを構築する手順をハンズオン形式でご紹介します。これにより、クラウドでの構築イメージを具体的に掴んでいただくことを目指します。

具体的には以下の内容を取り上げます。

  • S3（ストレージサービス）にHTMLファイルを保存
  • CloudFront（コンテンツ配信サービス）を利用してWebサイトを公開
  • 生成AIを活用してHTMLを作成し、実際に公開

AWSの基本サービスを実際に操作しながら、クラウドでの構築を一緒に進めていきましょう！

環境構成

AWSの環境構成は以下になります。

ChatGPTでhtmlファイルの作成

ここではChatGPTを使って、簡単なWebサイトを作成します。他の生成AIを使用しても同様の手順で進められます。

  1. ChatGPTに作りたいWebサイトの要件を伝えます。 例：「強力なパスワードを生成するWebサイト」を「かっこいいデザイン」で作成するようリクエストしました。
  2. 生成されたHTMLをテキストエディタにコピーし、ブラウザで表示を確認します。
  3. 必要に応じて修正し、最終的なデザインを完成させます。 以下は作成過程の画像です。 ChatGPTへの入力例 ChatGPTの出力例 初期段階のHTML確認 最終調整後の完成形

S3バケット作成

作成したhtmlを格納するS3バケットを作成します。以下の手順で作成していきます。

  1. AWSマネジメントコンソールでS3サービスを開きます。
  2. 新しいバケットを作成します。 バケット名のみ入力し、その他の設定はデフォルトのままで問題ありません。
  3. バケットが作成されたら、HTMLファイルをアップロードします。

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

CloudFrontでhtmlの配信の設定をします。

  1. CloudFrontの「ディストリビューションを作成」を選択。
  2. オリジン設定やキャッシュポリシーなどを以下のように設定します オリジン：作成したS3バケット ビューワープロトコルポリシー：HTTPS only キャッシュポリシー：デフォルト（推奨設定） オリジンアクセスコントロール：新規作成
    各設定の設定値と説明はこちらを選択 オリジン
    設定項目 設定値 説明
    Origin domain 作成したS3バケット CloudFrontのコンテンツ取得先
    Origin path – optional ＜入力なし＞ パス指定があれば設定
    名前 ＜任意＞ オリジンの名前 Origin domainを設定すると自動入力される
    オリジンアクセス Origin access control settings (recommended) OACを選択しましょう
    Origin access control ＜作成したOAC＞ Create new OACを選択してOACを作成できます
    カスタムヘッダーを追加 – オプション ＜今回は設定なし＞ オリジン側で必要なヘッダーがあれば追加してください
    Enable Origin Shield いいえ こちらの記事が分かりやすいです。 Amazon CloudFrontにオリジンへのリクエストを軽減するキャッシュレイヤー(Origin Shield)が追加されました
    Connection attempts 3 Cloudfrontからオリジンへの通信試行回数
    Connection timeout 10 Cloudfrontからオリジンへの通信タイムアウト（秒）
    デフォルトのキャッシュビヘイビア
    設定項目 設定値 説明
    パスパターン デフォルト (*) パスによってオリジンの振り分けができます
    オブジェクトを自動的に圧縮 Yes ファイルを圧縮することで通信料を抑えられます
    ビューワープロトコルポリシー HTTPS only もしくはRedirect HTTP to HTTPS 通信は暗号化しましょう
    許可された HTTP メソッド GET, HEAD 静的サイトの配信だけであればGET, HEAD Cloudfrontを経由して他のメソッドもサポートする場合はGET, HEAD, OPTIONS, PUT, POST, PATCH, DELETEを選択
    ビューワーのアクセスを制限する No アクセス制限をする設定 CloudFront署名付きURLもしくは署名付きcookieを使用する必要があります
    キャッシュキーとオリジンリクエスト Cache policy and origin request policy (recommended) 推奨値を使用
    キャッシュポリシー CachingOptimazed S3の推奨設定
    オリジンリクエストポリシー – オプション ＜設定なし＞ 追加設定があれば設定
    レスポンスヘッダーポリシー – オプション ＜設定なし＞ 追加設定があれば設定
    スムーズストリーミング No  
    フィールドレベル暗号化 ＜設定なし＞ 利用者のアップロードデータを暗号化します
    リアルタイムログを有効にする No リアルタイムにログを取得したい場合に設定 CloudFrontの追加料金に加えて、Kinesis Data Streamsを使うためKinesis Data Streamsの追加料金が発生します
    関数の関連付け – オプション
    設定項目 設定値 説明
    ビューワーリクエスト 関連付けなし ビューワーリクエスト時に関連付けたい処理があれば設定
    ビューワーレスポンス 関連付けなし ビューワーレスポンス時に関連付けたい処理があれば設定
    オリジンリクエスト 関連付けなし オリジンリクエスト時に関連付けたい処理があれば設定
    オリジンレスポンス 関連付けなし オリジンレスポンス時に関連付けたい処理があれば設定
    ウェブアプリケーションファイアウォール (WAF)
    設定項目 設定値 説明
    WAFの設定 ＜設定なし＞ WAFと関連付けしたい場合はセキュリティ保護を有効にするを選択
    設定
    設定項目 設定値 説明
    Anycast static IP list – optional ＜設定なし＞ IPアドレスを固定にしたい場合に設定
    料金クラス 北米、欧州、アジア、中東、アフリカを使用 配信したいエリアが含まれるようにしてください
    代替ドメイン名 (CNAME) – オプション ＜設定なし＞ カスタムドメインでアクセスしたい場合は設定
    Custom SSL certificate – optional ＜設定なし＞ 代替ドメイン名 (CNAME) – オプションを設定する場合は証明書を関連付けてください。 証明書はバージニア北部（us-east-1）に配置してください
    サポートされている HTTP バージョン HTTP/2 HTTP/3もサポートする場合は追加で設定してください
    デフォルトルートオブジェクト – オプション アップロードしたhtmlファイル名 デフォルトでアクセスされるオブジェクトの設定
    IPv6 オン オフにしたい場合はオフ
    説明 – オプション ＜任意＞ CloudFrontのディストリビューションの説明文
    Standard logging
    設定項目 設定値 説明
    ログ配信 オフ アクセスログを取得したい場合はON
  3. 作成後、ディストリビューションIDを控えておきます。

S3のアクセスポリシーの設定

CloudFrontとS3を連携するため、以下のようなポリシーをS3バケットに設定します。

{

    "Version": "2012-10-17",

    "Id": "PolicyForCloudFrontPrivateContent",

    "Statement": [

        {

            "Sid": "AllowCloudFrontServicePrincipal",

            "Effect": "Allow",

            "Principal": {

                "Service": "cloudfront.amazonaws.com"

            },

            "Action": "s3:GetObject",

            "Resource": "arn:aws:s3:::【S3バケット名】/*",

            "Condition": {

                "StringEquals": {

                    "AWS:SourceArn": "arn:aws:cloudfront::【AWSアカウントID 12桁】:distribution/【ディストリビューションID】"

                }

            }

        }

    ]

}

サイト公開

CloudFrontのディストリビューションIDのページからURLを取得します。

CloudFrontのURLをコピーし、ブラウザでアクセスしてみましょう！

無事サイトが表示されました！

まとめ

今回のハンズオンでは、AWSの基本サービス（S3とCloudFront）を使い、静的Webサイトを公開する手順を紹介しました。 初めての方でも意外と簡単にできたのではないでしょうか？ さらに、Route53を利用して独自ドメインで公開する方法や、セキュリティ設定を強化する方法もありますので、ぜひ試してみてください。 AWSの他のハンズオン記事もぜひご覧ください！

CloudFront＋S3で静的コンテンツ配信、API Gatewayで動的情報を取得するWebサイト構築

S3をトリガーとしてLambdaでサムネイルを自動生成する

Lambdaを使ってDynamoDBのデータ読み書きを行う

 

より詳しく理解したい方、認定資格を取得したい方は以下の参考書がおすすめです。

 

 
 

 
スポンサーリンク
タイトルとURLをコピーしました