CloudFrontとALBを使用した静的WEBサイトの冗長構成-ハンズオン-

mochizuki.t

はじめに

皆さまお疲れ様です。
AWSでわからない機能がたくさんあり、頭がいっぱいになっているmochizukiです。
さて今回は、「プライベートサブネットに配置したEC2をALBでロードバランシングし、CloudFrontを組み合わせた構成」を構築していきます。
特にセキュリティを重視したい方に向け、EC2を直接インターネットに公開しない構成で進めていきます。

構成図＆目次

構成図

今回の構成図は下記になります。

目次

  1. VPC周りの構築
  2. EC2の構築
  3. ALBの構築
  4. CloudFrontの設定
  5. 検証
  6. まとめ

VPC周りの構築

最初にVPC周りの構築を行います。

VPCの構築

・VPC
CIDR：10.0.0.0/16
IGW：1つ

サブネット周りの構築

・プライベートサブネット1（EC2用）
CIDR：10.0.1.0/24
AZ：ap-northeast-1a
ルートテーブル：IGW（0.0.0.0/0）

・プライベートサブネット2（EC2用）
CIDR：10.0.2.0/24
AZ：ap-northeast-1c
ルートテーブル：NAT（0.0.0.0/0）

・パブリックサブネット（ALB用）
CIDR：10.0.3.0/24
AZ：ap-northeast-1a
ルートテーブル：NAT（0.0.0.0/0）

・パブリックサブネット（ALB用）
CIDR：10.0.4.0/24
AZ：ap-northeast-1c
ルートテーブル：NAT（0.0.0.0/0）

EC2の構築

EC2インスタンスを2つプライベートサブネットに構築していきます。
2つともサブネットを分けるだけで、同じ構成で起動します。

EC2の起動

EC2を起動します。
AMIは「Amazon Linux 2023 AMI」を使用。
file
ネットワーク設定は先ほど作成したEC2用のプライベートサブネットに配置。
NFWにて制御するので、セキュリティグループは下記に設定します。
・インバウンド
ALBのセキュリティグループからのアクセスを許可
80：HTTP
・アウトバウンド
すべて許可
その他は基本デフォルトで起動します。

SSM接続して静的WEBサイトを構築

SSM接続の設定は下記ブログに書いているので、そちらを読んでください。
【AWS Network Firewallを使用してのアクセス制限-ハンズオン-「SSM接続設定」】

SSM接続したらEC2にApacheをインストールしていきます。

sudo yum update -y
sudo yum install -y httpd
sudo systemctl start httpd
sudo systemctl enable httpd

上記が完了したら、下記を流し簡単なHTMLファイルを配置していきます。

EC2①号機用
echo "<h1>Welcome to Server 1</h1>" | sudo tee /var/www/html/index.html
EC2②号機用
echo "<h1>Welcome to Server 2</h1>" | sudo tee /var/www/html/index.html

EC2ごとに分けてどのEC2にアクセスしているかをわかるようにしてみました。
これでEC2に静的WEBサイトを構築する作業は完了です。
す。

ALBの構築

次はALBの構築をしていきます。

ターゲットグループの作成

EC2コンソール画面から「ターゲットグループ」→「ターゲットグループの作成」を押下
file
ターゲットタイプの選択：インスタンス
ターゲットグループ名：任意
プロトコル：HTTP/80
IP アドレスタイプ：IPv4
VPC：作成したVPC（EC2があるVPC）
プロトコルバージョン：HTTP1
ヘルスチェック：デフォルト
使用可能なインスタンス：作成した2つのインスタンスを選択
「ターゲットグループの作成」を押下し、完了

ALBの構築

①EC2コンソール画面から「ロードバランサー」→「ロードバランサーの作成」を押下
file
ロードバランサータイプ: Application Load Balancer
スキーム：インターネット向け
ロードバランサーの IP アドレスタイプ：IPv4
サブネット: パブリックサブネット
ネットワークマッピング：作成したVPCと2つのパブリックサブネット（2つのAZに配置しなければならない）
セキュリティグループ：インバウンド80（HTTP）を許可
リスナーとルーティング_プロトコル：HTTP/80
リスナーとルーティング_ターゲットグループ：先ほど作成したターゲットグループ
その他デフォルトで「ロードバランサーの作成」を押下し、完了

CloudFrontの設定

次はCloudFrontの設定を行います。
CloudFrontのコンソール画面に行きます。
「ディストリビューション」→「ディストリビューションを作成」を押下し下記を設定。
file
オリジン：先ほど作成したALB
名前：任意
ウェブアプリケーションファイアウォール (WAF)：セキュリティ保護を有効にしないでください
デフォルトルートオブジェクト – オプション：/var/www/html/index.html
その他デフォルトで「ディストリビューションを作成」を押下し完了。
ここまでの構築で今回の構成は完了です。

検証

ここからは検証していきたいと思います。
作成したディストリビューションを選択します。
一般タブの詳細欄にあるディストリビューションドメイン名をコピーします。
file
ブラウザで貼り付け検索をかけると設定した静的WEBサイトが表示されます。
下記はEC2②号機のサイト
file
更新すると①号機や②号機をランダムで表示します。

ALBの設定で、スマホやPCで表示するサイトを分けたり比重を設定したりすることもできます。
是非試してみてください。

まとめ

今回は、プライベートサブネットに配置したEC2をALBでロードバランシングし、CloudFrontを組み合わせた構成を構築しました。
このような構成は、セキュリティとスケーラビリティの両方を重視したい場合に非常に有効です。
今回の構成をさらに拡張して、HTTPS対応やWAFの導入もぜひ試してみてください。

Last modified: 2024-12-01

Author