【AWSハンズオン】第9回 フロントエンド用S3 + CloudFront構築

今回作業対象のブランチ

前提条件

• 第1回から第8回までの構築が完了していること
• フロントエンド（React、Vue、Angular等）のビルド環境があること
• こちらからDockerコンテナでの実行環境が準備できていること

フロントエンドのサンプルコードはこちらから

Terraform実行環境の起動

前回と同様に、Dockerコンテナ内で作業を進めます。

# コンテナを起動してbashに入る
docker-compose run --rm terraform

これ以降のコマンドは、すべてこのコンテナ内で実行します。

基礎知識

S3静的ウェブサイトホスティングとは

S3（Simple Storage Service）は、オブジェクトストレージサービスです。静的ウェブサイトホスティング機能を使用することで、HTML、CSS、JavaScript、画像などの静的ファイルをウェブサイトとして公開できます。

WEBアプリケーション開発者の視点から見ると

ローカル開発では一般的にdevサーバー(例えばlocalhost:3000)で確認しますが、クライアントサイドで動作するアプリの場合、本番環境では静的ファイルをどこかにホスティングする必要があります。S3は、これらのファイルを保存し、Web Serverとして機能させることができるサービスです。

主な特徴

CloudFrontとCDN

CloudFrontは、AWSのCDN（Content Delivery Network）サービスです。世界中のエッジロケーションにコンテンツをキャッシュし、ユーザーに一番近い場所から配信します。

なぜCloudFrontが必要か

Origin Access Control (OAC)とは

OACは、CloudFrontからS3バケットへの安全なアクセスを提供する仕組みです。2022年に導入された新しい方式で、従来のOAI（Origin Access Identity）よりセキュアです。

OACの仕組み

1. S3バケットのパブリックアクセスを完全にブロック
2. CloudFrontにOACを設定
3. S3バケットポリシーでOACからのアクセスのみ許可
4. ユーザーはCloudFront経由でのみコンテンツにアクセス可能

今回作成するネットワーク構成

Terraformコードの実装

変数の追加

フロントエンド用の変数を追加します。

# terraform/variables.tf に追加

variable "frontend_domain_name" {
  description = "フロントエンドのドメイン名（オプション）"
  type        = string
  default     = ""
}

variable "frontend_certificate_arn" {
  description = "CloudFront用のSSL証明書ARN（us-east-1リージョン）"
  type        = string
  default     = ""
}

variable "enable_cloudfront_logging" {
  description = "CloudFrontのアクセスログを有効にするか"
  type        = bool
  default     = false
}

variable "cloudfront_price_class" {
  description = "CloudFrontの価格クラス"
  type        = string
  default     = "PriceClass_100"  # 日本を指定してコスト削減
}

S3バケット

静的ファイルを保存するS3バケットを作成します。

# terraform/s3_frontend.tf

# フロントエンド用S3バケット
resource "aws_s3_bucket" "frontend" {
  bucket        = "${var.project_name}-${var.environment}-frontend"
  force_destroy = true # 実際の運用では外してもいい

  tags = {
    Name = "${var.project_name}-${var.environment}-frontend"
  }
}

# バケットのパブリックアクセスをブロック
resource "aws_s3_bucket_public_access_block" "frontend" {
  bucket = aws_s3_bucket.frontend.id

  block_public_acls       = true
  block_public_policy     = true
  ignore_public_acls      = true
  restrict_public_buckets = true
}

# バケットの暗号化設定
resource "aws_s3_bucket_server_side_encryption_configuration" "frontend" {
  bucket = aws_s3_bucket.frontend.id

  rule {
    apply_server_side_encryption_by_default {
      sse_algorithm = "AES256"
    }
  }
}

# バケットのバージョニング設定
resource "aws_s3_bucket_versioning" "frontend" {
  bucket = aws_s3_bucket.frontend.id
  
  versioning_configuration {
    status = "Enabled"
  }
}

# CloudFrontアクセスログ用バケット（オプション）
resource "aws_s3_bucket" "cloudfront_logs" {
  count = var.enable_cloudfront_logging ? 1 : 0

  bucket        = "${var.project_name}-${var.environment}-cf-logs"
  force_destroy = true # 実際の運用では外してもいい

  tags = {
    Name = "${var.project_name}-${var.environment}-cf-logs"
  }
}

# Logバケットのライフサイクルルール
resource "aws_s3_bucket_lifecycle_configuration" "cloudfront_logs" {
  count = var.enable_cloudfront_logging ? 1 : 0

  bucket = aws_s3_bucket.cloudfront_logs[0].id

  rule {
    id     = "delete-old-logs"
    status = "Enabled"

    expiration {
      days = 30
    }
  }
}

S3バケット設定の説明

CloudFront Origin Access Control

CloudFrontからS3への安全なアクセスを設定します。

# terraform/cloudfront.tf

# Origin Access Control
resource "aws_cloudfront_origin_access_control" "frontend" {
  name                              = "${var.project_name}-${var.environment}-frontend-oac"
  description                       = "OAC for ${var.project_name} frontend"
  origin_access_control_origin_type = "s3"
  signing_behavior                  = "always"
  signing_protocol                  = "sigv4"
}

OAC設定の説明

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

CDN配信の設定を行います。

# terraform/cloudfront.tf

# CloudFront Distribution
resource "aws_cloudfront_distribution" "frontend" {
  enabled             = true
  is_ipv6_enabled     = true
  comment             = "${var.project_name} frontend distribution"
  default_root_object = "index.html"
  price_class         = var.cloudfront_price_class

  # エイリアス設定（カスタムドメインを使用する場合）
  aliases = var.frontend_domain_name != "" ? [var.frontend_domain_name] : []

  # オリジン設定
  origin {
    domain_name              = aws_s3_bucket.frontend.bucket_regional_domain_name
    origin_access_control_id = aws_cloudfront_origin_access_control.frontend.id
    origin_id                = "S3-${aws_s3_bucket.frontend.id}"
  }

  # デフォルトキャッシュ動作
  default_cache_behavior {
    allowed_methods  = ["GET", "HEAD"]
    cached_methods   = ["GET", "HEAD"]
    target_origin_id = "S3-${aws_s3_bucket.frontend.id}"

    forwarded_values {
      query_string = false
      cookies {
        forward = "none"
      }
    }

    viewer_protocol_policy = "redirect-to-https"
    min_ttl                = 0
    default_ttl            = 3600
    max_ttl                = 86400
    compress               = true
  }

  # 追加のキャッシュ動作（静的アセット用）
  ordered_cache_behavior {
    path_pattern     = "/static/*"
    allowed_methods  = ["GET", "HEAD"]
    cached_methods   = ["GET", "HEAD"]
    target_origin_id = "S3-${aws_s3_bucket.frontend.id}"

    forwarded_values {
      query_string = false
      cookies {
        forward = "none"
      }
    }

    viewer_protocol_policy = "redirect-to-https"
    min_ttl                = 0
    default_ttl            = 86400
    max_ttl                = 31536000
    compress               = true
  }

  # SPAのルーティング対応
  custom_error_response {
    error_code         = 404
    response_code      = 200
    response_page_path = "/index.html"
  }

  custom_error_response {
    error_code         = 403
    response_code      = 200
    response_page_path = "/index.html"
  }

  # 地理的制限（必要に応じて設定）
  restrictions {
    geo_restriction {
      restriction_type = "none"
    }
  }

  # SSL証明書設定
  viewer_certificate {
    cloudfront_default_certificate = var.frontend_certificate_arn == ""
    acm_certificate_arn            = var.frontend_certificate_arn != "" ? var.frontend_certificate_arn : null
    ssl_support_method             = var.frontend_certificate_arn != "" ? "sni-only" : null
    minimum_protocol_version       = "TLSv1.2_2021"
  }

  # ログ設定
  dynamic "logging_config" {
    for_each = var.enable_cloudfront_logging ? [1] : []
    content {
      include_cookies = false
      bucket          = aws_s3_bucket.cloudfront_logs[0].bucket_domain_name
      prefix          = "cloudfront/"
    }
  }

  tags = {
    Name = "${var.project_name}-${var.environment}-frontend-cf"
  }
}

CloudFront設定の説明

S3バケットポリシー

CloudFrontからのアクセスのみを許可するポリシーを設定します。

# terraform/s3_frontend.tf に追加

# S3バケットポリシー
resource "aws_s3_bucket_policy" "frontend" {
  bucket = aws_s3_bucket.frontend.id

  policy = jsonencode({
    Version = "2012-10-17"
    Statement = [
      {
        Sid    = "AllowCloudFrontServicePrincipal"
        Effect = "Allow"
        Principal = {
          Service = "cloudfront.amazonaws.com"
        }
        Action   = "s3:GetObject"
        Resource = "${aws_s3_bucket.frontend.arn}/*"
        Condition = {
          StringEquals = {
            "AWS:SourceArn" = aws_cloudfront_distribution.frontend.arn
          }
        }
      }
    ]
  })
}

バケットポリシー設定の説明

出力の追加

作成したリソースの情報を出力に追加します。

# terraform/outputs.tf に追加

# S3関連の出力
output "frontend_s3_bucket_name" {
  description = "フロントエンド用S3バケット名"
  value       = aws_s3_bucket.frontend.id
}

output "frontend_s3_bucket_arn" {
  description = "フロントエンド用S3バケットARN"
  value       = aws_s3_bucket.frontend.arn
}

output "frontend_s3_bucket_domain_name" {
  description = "S3バケットのドメイン名"
  value       = aws_s3_bucket.frontend.bucket_domain_name
}

# CloudFront関連の出力
output "cloudfront_distribution_id" {
  description = "CloudFrontディストリビューションID"
  value       = aws_cloudfront_distribution.frontend.id
}

output "cloudfront_distribution_arn" {
  description = "CloudFrontディストリビューションARN"
  value       = aws_cloudfront_distribution.frontend.arn
}

output "cloudfront_distribution_domain_name" {
  description = "CloudFrontディストリビューションのドメイン名"
  value       = aws_cloudfront_distribution.frontend.domain_name
}

output "cloudfront_oac_id" {
  description = "CloudFront OAC ID"
  value       = aws_cloudfront_origin_access_control.frontend.id
}

リソースを作成

Terraformコンテナ内で以下のコマンドを実行します。

# terraformディレクトリへ移動
cd terraform

# 実行計画の確認
terraform plan

# リソースの作成
terraform apply

CloudFrontディストリビューションの作成には15〜20分程度かかります。

結果の確認

# S3バケット名の確認
terraform output frontend_s3_bucket_name

# CloudFrontドメイン名の確認（重要：アクセスURLとして使用）
terraform output cloudfront_distribution_domain_name

# CloudFrontディストリビューションIDの確認（デプロイ時に使用）
terraform output cloudfront_distribution_id

動作確認

AWS Management Consoleでの確認

S3 > バケット

作成されたS3バケットを選択し、以下を確認します。

CloudFront > ディストリビューション

作成されたディストリビューションを選択し、以下を確認します。

初期コンテンツのアップロード

サンプルコードを使わない場合は、簡単なHTMLファイルをアップロードします。

# テスト用HTMLファイルの作成
cat > index.html << EOF
<!DOCTYPE html>
<html>
<head>
    <title>AWS CloudFront Test</title>
</head>
<body>
    <h1>CloudFront配信テスト</h1>
    <p>S3 + CloudFrontの構築が完了しました！</p>
</body>
</html>
EOF

# S3にアップロード
aws s3 cp index.html s3://$(terraform output -raw frontend_s3_bucket_name)/

# CloudFrontのURLで確認
echo "https://$(terraform output -raw cloudfront_distribution_domain_name)"

ブラウザでCloudFrontのURLにアクセスし、HTMLが表示されることを確認します。

サンプルコードから実行

以下、サンプルコードのルートから実行

# 実行権限を付与
chmod +x scripts/deploy-frontend.sh

# 環境変数を設定
export S3_BUCKET_NAME=出力したS3バケット名
export CLOUDFRONT_DISTRIBUTION_ID=CloudFrontディストリビューションID

# デプロイ実行
./scripts/deploy-frontend.sh

キャッシュ

何にどのくらいのキャッシュを適用させるか、目安として以下をご確認ください。
もちろんプロジェクトにより全く違うこともあり得ますが…

コスト管理

トラブルシューティング

アクセスが403エラーになる場合

1. S3バケットポリシーが正しく設定されているか確認
2. CloudFront OACのIDが正しいか確認

キャッシュが更新されない場合

1. CloudFrontの無効化を実行
2. ブラウザのキャッシュをクリア
3. Cache-Controlヘッダーの設定を確認

既存のロググループが原因でapplyできない

なんらかの理由でロググループが重複すると言うエラーが発生したりしなかったり…
おそらく前回削除しきれていなかっただけと仮定し、既存のロググループをimportします

terraform import 'aws_cloudwatch_log_group.vpc_flow_logs[0]' '/aws/vpc/sample-sys-dev'

次のステップ

次回は、CORS設定とセキュリティ強化を行います。

• ALB Listener RuleのCORS対応
• セキュリティヘッダーの実装
• WAF（Web Application Firewall）の設定
• CSRF対策の実装