【Hugo×AWS】Hugo+S3+CloudFrontで技術ブログを公開する

curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
unzip awscliv2.zip
sudo ./aws/install

sudo apt-get update && sudo apt-get install -y gnupg lsb-release
wget -O- https://apt.releases.hashicorp.com/gpg | sudo gpg --dearmor -o /usr/share/keyrings/hashicorp-archive-keyring.gpg
echo "deb [arch=amd64 signed-by=/usr/share/keyrings/hashicorp-archive-keyring.gpg] https://apt.releases.hashicorp.com $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/hashicorp.list
sudo apt-get update && sudo apt-get install -y terraform

# 最新バージョンを確認
curl -s https://api.github.com/repos/gohugoio/hugo/releases/latest | grep "tag_name"

# extended版をダウンロード・インストール
wget https://github.com/gohugoio/hugo/releases/download/v0.152.2/hugo_extended_0.152.2_linux-amd64.deb
sudo dpkg -i hugo_extended_0.152.2_linux-amd64.deb

aws configure

AWS Access Key ID [None]: {IAMユーザーのアクセスキーを入力}
AWS Secret Access Key [None]: {IAMユーザーのシークレットアクセスキーを入力}
Default region name [None]: ap-northeast-1
Default output format [None]: json

aws --version
terraform --version
git --version
hugo version
aws sts get-caller-identity  # AWS認証情報の確認

作業ディレクトリ/
├── hugo-s3-demo/           # Hugoプロジェクト
└── hugo-s3-demo-infra/     # Terraformプロジェクト
    ├── backend-setup/
    └── prod/

hugo new site hugo-s3-demo
cd hugo-s3-demo

git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'Hugo S3 Demo'
theme = 'ananke'

hugo new content posts/first-post.md

+++
date = '2025-12-14T14:59:51Z'
draft = false
title = 'First Post'
+++

これは最初の投稿です。

# Hugoでビルド実行
hugo

# `public/` ディレクトリにHTMLファイルが生成されていればOK
ls public/
# 404.html  ananke  categories  images  index.html  index.xml  posts  sitemap.xml  tags

hugo server

hugo-s3-demo-infra/
└── backend-setup/
    └── main.tf

mkdir -p hugo-s3-demo-infra/backend-setup
cd hugo-s3-demo-infra/backend-setup

terraform {
  required_version = ">= 1.0"
  required_providers {
    aws = {
      source  = "hashicorp/aws"
      version = "~> 5.0"
    }
    random = {
      source  = "hashicorp/random"
      version = "~> 3.0"
    }
  }
}

provider "aws" {
  region = "ap-northeast-1"
}

resource "random_id" "suffix" {
  byte_length = 4
}

resource "aws_s3_bucket" "tfstate" {
  bucket = "hugo-s3-demo-tfstate-${random_id.suffix.hex}"
}

resource "aws_s3_bucket_versioning" "tfstate" {
  bucket = aws_s3_bucket.tfstate.id
  versioning_configuration {
    status = "Enabled"
  }
}

resource "aws_s3_bucket_server_side_encryption_configuration" "tfstate" {
  bucket = aws_s3_bucket.tfstate.id
  rule {
    apply_server_side_encryption_by_default {
      sse_algorithm = "AES256"
    }
  }
}

resource "aws_s3_bucket_public_access_block" "tfstate" {
  bucket                  = aws_s3_bucket.tfstate.id
  block_public_acls       = true
  block_public_policy     = true
  ignore_public_acls      = true
  restrict_public_buckets = true
}

resource "aws_dynamodb_table" "tfstate_lock" {
  name         = "hugo-s3-demo-tfstate-lock"
  billing_mode = "PAY_PER_REQUEST"
  hash_key     = "LockID"

  attribute {
    name = "LockID"
    type = "S"
  }
}

output "s3_bucket_name" {
  value = aws_s3_bucket.tfstate.bucket
}

output "dynamodb_table_name" {
  value = aws_dynamodb_table.tfstate_lock.name
}

terraform {
  required_version = ">= 1.0"
  required_providers {
    # AWSリソースを作成するためのプロバイダー
    aws = {
      source  = "hashicorp/aws"
      version = "~> 5.0"
    }
    # ランダム文字列を生成するためのプロバイダー
    random = {
      source  = "hashicorp/random"
      version = "~> 3.0"
    }
  }
}

provider "aws" {
  region = "ap-northeast-1"  # 東京リージョン
}

# S3バケット名の一意性を確保するためのランダム文字列
resource "random_id" "suffix" {
  byte_length = 4  # 8文字の16進数を生成
}

# tfstate保存用バケット
resource "aws_s3_bucket" "tfstate" {
  bucket = "hugo-s3-demo-tfstate-${random_id.suffix.hex}"
}

# バージョニング有効化（誤操作時に復元可能）
resource "aws_s3_bucket_versioning" "tfstate" {
  bucket = aws_s3_bucket.tfstate.id
  versioning_configuration {
    status = "Enabled"
  }
}

# サーバーサイド暗号化（tfstateには機密情報が含まれる可能性がある）
resource "aws_s3_bucket_server_side_encryption_configuration" "tfstate" {
  bucket = aws_s3_bucket.tfstate.id
  rule {
    apply_server_side_encryption_by_default {
      sse_algorithm = "AES256"
    }
  }
}

# パブリックアクセスを完全ブロック
resource "aws_s3_bucket_public_access_block" "tfstate" {
  bucket                  = aws_s3_bucket.tfstate.id
  block_public_acls       = true
  block_public_policy     = true
  ignore_public_acls      = true
  restrict_public_buckets = true
}

# tfstateロック用テーブル（同時実行を防止）
resource "aws_dynamodb_table" "tfstate_lock" {
  name         = "hugo-s3-demo-tfstate-lock"
  billing_mode = "PAY_PER_REQUEST"  # 使った分だけ課金
  hash_key     = "LockID"

  attribute {
    name = "LockID"
    type = "S"  # 文字列型
  }
}

# 作成されたリソース名を出力（次のセクションで使用）
output "s3_bucket_name" {
  value = aws_s3_bucket.tfstate.bucket
}

output "dynamodb_table_name" {
  value = aws_dynamodb_table.tfstate_lock.name
}

terraform init

Initializing the backend...
Initializing provider plugins...
- Installing hashicorp/aws v5.x.x...
- Installing hashicorp/random v3.x.x...

Terraform has been successfully initialized!

terraform plan

Plan: 6 to add, 0 to change, 0 to destroy.

terraform apply

Apply complete! Resources: 6 added, 0 changed, 0 destroyed.

Outputs:

dynamodb_table_name = "hugo-s3-demo-tfstate-lock"
s3_bucket_name = "hugo-s3-demo-tfstate-xxxxxxxx"

terraform fmt && terraform validate && terraform plan

hugo-s3-demo-infra/
├── backend-setup/
│   └── main.tf          # tfstate用（作成済み）
└── prod/
    ├── versions.tf      # Terraform + Provider設定
    ├── backend.tf       # S3 backend設定
    ├── variables.tf     # 変数定義
    ├── main.tf          # S3, OAC, CloudFront
    └── outputs.tf       # 出力値

mkdir -p ../prod
cd ../prod

terraform {
  required_version = ">= 1.0"
  required_providers {
    aws = {
      source  = "hashicorp/aws"
      version = "~> 5.0"
    }
    random = {
      source  = "hashicorp/random"
      version = "~> 3.0"
    }
  }
}

provider "aws" {
  region = "ap-northeast-1"
}

terraform {
  backend "s3" {
    bucket         = "hugo-s3-demo-tfstate-xxxxxxxx"  # 出力されたs3_bucket_name
    key            = "prod/terraform.tfstate"
    region         = "ap-northeast-1"
    dynamodb_table = "hugo-s3-demo-tfstate-lock"      # 出力されたdynamodb_table_name
    encrypt        = true
  }
}

variable "project_name" {
  description = "Project name for resource naming"
  type        = string
  default     = "hugo-s3-demo"
}

# バケット名の一意性を確保するためのランダム文字列
resource "random_id" "suffix" {
  byte_length = 4
}

# コンテンツ用S3バケット
resource "aws_s3_bucket" "content" {
  bucket = "${var.project_name}-content-${random_id.suffix.hex}"
}

# パブリックアクセスブロック
resource "aws_s3_bucket_public_access_block" "content" {
  bucket                  = aws_s3_bucket.content.id
  block_public_acls       = true
  block_public_policy     = true
  ignore_public_acls      = true
  restrict_public_buckets = true
}

# CloudFront OAC（Origin Access Control）
resource "aws_cloudfront_origin_access_control" "main" {
  name                              = "${var.project_name}-oac"
  origin_access_control_origin_type = "s3"
  signing_behavior                  = "always"
  signing_protocol                  = "sigv4"
}

# CloudFront Function（URLリライト）
resource "aws_cloudfront_function" "url_rewrite" {
  name    = "${var.project_name}-url-rewrite"
  runtime = "cloudfront-js-2.0"
  publish = true
  code    = <<-EOF
    function handler(event) {
      var request = event.request;
      var uri = request.uri;
      if (uri.endsWith('/')) {
        request.uri += 'index.html';
      } else if (!uri.includes('.')) {
        request.uri += '/index.html';
      }
      return request;
    }
  EOF
}

# CloudFront Distribution
resource "aws_cloudfront_distribution" "main" {
  origin {
    domain_name              = aws_s3_bucket.content.bucket_regional_domain_name
    origin_id                = "S3Origin"
    origin_access_control_id = aws_cloudfront_origin_access_control.main.id
  }

  enabled             = true
  default_root_object = "index.html"

  default_cache_behavior {
    allowed_methods        = ["GET", "HEAD"]
    cached_methods         = ["GET", "HEAD"]
    target_origin_id       = "S3Origin"
    viewer_protocol_policy = "redirect-to-https"
    cache_policy_id        = "658327ea-f89d-4fab-a63d-7e88639e58f6" # CachingOptimized

    function_association {
      event_type   = "viewer-request"
      function_arn = aws_cloudfront_function.url_rewrite.arn
    }
  }

  restrictions {
    geo_restriction {
      restriction_type = "none"
    }
  }

  viewer_certificate {
    cloudfront_default_certificate = true
  }
}

# S3バケットポリシー（CloudFrontからのアクセスを許可）
resource "aws_s3_bucket_policy" "content" {
  bucket = aws_s3_bucket.content.id
  policy = jsonencode({
    Version = "2012-10-17"
    Statement = [
      {
        Effect = "Allow"
        Principal = {
          Service = "cloudfront.amazonaws.com"
        }
        Action   = "s3:GetObject"
        Resource = "${aws_s3_bucket.content.arn}/*"
        Condition = {
          StringEquals = {
            "AWS:SourceArn" = aws_cloudfront_distribution.main.arn
          }
        }
      }
    ]
  })
}

resource "aws_cloudfront_origin_access_control" "main" {
  name                              = "${var.project_name}-oac"
  origin_access_control_origin_type = "s3"
  signing_behavior                  = "always"
  signing_protocol                  = "sigv4"
}

resource "aws_cloudfront_function" "url_rewrite" {
  name    = "${var.project_name}-url-rewrite"
  runtime = "cloudfront-js-2.0"
  publish = true
  code    = <<-EOF
    function handler(event) {
      var request = event.request;
      var uri = request.uri;
      if (uri.endsWith('/')) {
        request.uri += 'index.html';
      } else if (!uri.includes('.')) {
        request.uri += '/index.html';
      }
      return request;
    }
  EOF
}

resource "aws_cloudfront_distribution" "main" {
  # ...省略...
  
  default_cache_behavior {
    # HTTPをHTTPSにリダイレクト
    viewer_protocol_policy = "redirect-to-https"
    # AWS管理のキャッシュポリシー（静的サイトに最適）
    cache_policy_id        = "658327ea-f89d-4fab-a63d-7e88639e58f6"
    
    # CloudFront Functionを関連付け
    function_association {
      event_type   = "viewer-request"
      function_arn = aws_cloudfront_function.url_rewrite.arn
    }
  }
  
  # デフォルト証明書を使用（カスタムドメインは#5で設定）
  viewer_certificate {
    cloudfront_default_certificate = true
  }
}

resource "aws_s3_bucket_policy" "content" {
  bucket = aws_s3_bucket.content.id
  policy = jsonencode({
    # ...省略...
    Condition = {
      StringEquals = {
        "AWS:SourceArn" = aws_cloudfront_distribution.main.arn
      }
    }
  })
}

output "s3_bucket_name" {
  value = aws_s3_bucket.content.bucket
}

output "cloudfront_distribution_id" {
  value = aws_cloudfront_distribution.main.id
}

output "cloudfront_domain_name" {
  value = aws_cloudfront_distribution.main.domain_name
}

# 初期化（backend設定を読み込み）
terraform init

# 実行計画の確認
terraform plan

# 構築
terraform apply

Apply complete! Resources: 7 added, 0 changed, 0 destroyed.

Outputs:

cloudfront_distribution_id = "E2XXXXXXXXXX"
cloudfront_domain_name = "dxxxxxxxxxxxxx.cloudfront.net"
s3_bucket_name = "hugo-s3-demo-content-xxxxxxxx"

cd /path/to/hugo-s3-demo

baseURL = 'https://dxxxxxxxxxxxxx.cloudfront.net/'  # 出力されたcloudfront_domain_name
languageCode = 'en-us'
title = 'Hugo S3 Demo'
theme = 'ananke'

hugo

aws s3 sync public/ s3://hugo-s3-demo-content-xxxxxxxx/ --delete

aws cloudfront create-invalidation \
  --distribution-id E2XXXXXXXXXX \
  --paths "/*"

cd hugo-s3-demo-infra/prod

# S3バケット内のファイルを削除（空でないと削除できない）
aws s3 rm s3://hugo-s3-demo-content-xxxxxxxx/ --recursive

# Terraformリソースを削除
terraform destroy

cd ../backend-setup

# S3バケット内のファイルを削除
aws s3 rm s3://hugo-s3-demo-tfstate-xxxxxxxx/ --recursive

# バージョニング有効のため、DeleteMarkerも削除が必要な場合あり
# 削除に失敗した場合は、AWSコンソールからバケットを空にしてください

# Terraformリソースを削除
terraform destroy