AWS CLI を使用して Hugo サイトを AWS S3 にデプロイする方法は？

hugo --gc --minify を使用して Hugo サイトを構築し、AWS CLI の資格情報を設定した後、S3 バケットを作成し、 aws s3 sync public/ s3://your-bucket-name/ --delete --cache-control max-age=60 を使用して public/ ディレクトリを S3 に同期してください。

S3にデプロイする際のキャッシュに関するベストプラクティスは何か？

同期中に適切な Cache-Control ヘッダーを設定（例: --cache-control max-age=60 ）、CloudFront の最大 TTL 値を構成し、即時更新のためにキャッシュ無効化を活用してください。重要な資産についてはコンテンツのバージョニングを検討してください。

デプロイ後に関連するCloudFrontのキャッシュを無効にするにはどうすればよいですか？

aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths "/*" を使用して、キャッシュ全体を無効化するか、特定のパスを指定してください。月ごとの最初の 1,000 件の無効化は無料です。

AWS S3 への Hugo のデプロイを自動化することはできますか？

はい、GitHub Actions、Gitea Actions、またはAWS CodePipelineなどのCI/CDパイプラインを使用して、デプロイを自動化できます。これらは、コードのコミット時にHugoサイトを構築し、自動的にデプロイすることができます。

S3ウェブサイトホスティングとCloudFrontの違いは何ですか？

S3ウェブサイトホスティングは基本的な静的ホスティングを提供する一方、CloudFrontは世界中のエッジロケーションでコンテンツをキャッシュするCDNであり、パフォーマンスの向上とレイテンシーの低減を実現します。CloudFrontはSSL/TLSの終端およびより優れたセキュリティ機能も提供します。

AWS CLI を使用して Hugo サイトを AWS S3 にデプロイする

AWS S3 への Hugo のデプロイを自動化する

AWS CLIを使用してHugo静的サイトをAWS S3にデプロイすることで、ウェブサイトをホストするための堅牢でスケーラブルなソリューションが提供されます。このガイドでは、初期設定から高度な自動化およびキャッシュ管理戦略まで、完全なデプロイメントプロセスをカバーしています。

テーブル上のカラーテトリス

AWS CLIによるデプロイメントは、Hugoの配布が標準パッケージからdeployコマンドを削除したため、g-toアプローチがなっている。ローカルで実行しhugo deployを呼びたい場合、How to Install Ubuntu 24.04 & useful toolsでextendedとwithdeployについて確認してください。

事前準備

HugoサイトをAWS S3にデプロイする前に、以下の項目を確認してください：

デプロイ用に準備されたHugoサイト（Hugoサイトの作成に手助けが必要な場合は、Hugoクイックスタートガイドを参照してください）
適切な権限を持つAWSアカウント
インストールおよび構成済みのAWS CLI
コマンドライン操作の基本的な知識

Hugoサイトのビルド

Hugoサイトをデプロイする最初のステップは、静的ファイルを生成することです。利用可能なコマンドおよびオプションについては、Hugoチートシートを参照してください。

最適化フラグを使用してサイトをビルドしてください：

hugo --gc --minify

--gcフラグは、使用されていないキャッシュファイルを削除し、--minifyフラグはHTML、CSS、JavaScriptを圧縮して最適なパフォーマンスを実現します。これにより、public/ディレクトリに静的サイトが生成され、このディレクトリをS3にデプロイします。

AWS CLIの構成

AWS CLIをまだ構成していない場合は、以下のコマンドを実行してください：

aws configure

以下を入力するよう求められます：

AWS Access Key ID: あなたのAWSアクセスキー
AWS Secret Access Key: あなたのシークレットアクセスキー
Default region: ご希望のAWSリージョン（例：us-east-1、ap-southeast-2）
Default output format: json（推奨）

プログラムによるアクセスが必要な場合は、IAMユーザーが以下の権限を持つことを確認してください：

s3:PutObject
s3:GetObject
s3:DeleteObject
s3:ListBucket
cloudfront:CreateInvalidation（CloudFrontを使用する場合）

S3バケットの作成と構成

バケットの作成

AWS CLIを使用してS3バケットを作成します：

aws s3 mb s3://your-bucket-name --region us-east-1

重要: グローバルに一意なバケット名を選択してください。カスタムドメインを使用してバケットをウェブサイトホスティングに使用する予定がある場合は、ドメイン名とバケット名が一致する必要があります。

バケットを静的ウェブサイトホスティング用に構成

静的ウェブサイトホスティングを有効にします：

aws s3 website s3://your-bucket-name \
  --index-document index.html \
  --error-document 404.html

バケットポリシーの設定

CloudFrontを使用しない場合（パブリックリードアクセスが必要な場合）、以下のバケットポリシーを作成してください：

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}

ポリシーを適用します：

aws s3api put-bucket-policy \
  --bucket your-bucket-name \
  --policy file://bucket-policy.json

セキュリティの注意点: CloudFrontを使用することをお勧めします（推奨）。CloudFrontを使用する場合、S3バケットへのアクセスをCloudFrontのみに制限できます。これにより、パブリックリードアクセスの必要性がなくなります。

AWS CLIを使用してS3にデプロイ

デプロイのコアコマンドは、aws s3 syncを使用してサイトをアップロードします：

aws s3 sync public/ s3://your-bucket-name/ \
  --delete \
  --cache-control max-age=60

主要なパラメータの説明

public/: ローカルのHugo出力ディレクトリ
s3://your-bucket-name/: S3バケットの宛先
--delete: ローカルに存在しないS3のファイルを削除し、バケットがビルドと同期されるようにします
--cache-control max-age=60: キャッシュヘッダーを設定（この例では60秒）

高度な同期オプション

デプロイメントをより細かく制御するには：

aws s3 sync public/ s3://your-bucket-name/ \
  --delete \
  --cache-control "public, max-age=31536000, immutable" \
  --exclude "*.html" \
  --cache-control "public, max-age=60" \
  --include "*.html" \
  --exclude "*.js" \
  --cache-control "public, max-age=31536000, immutable" \
  --include "*.js"

この例では、HTMLファイル（60秒）と静的アセット（JavaScriptなど）（1年）に対して異なるキャッシュ期間を設定しています。これは一般的な最適化戦略です。

CloudFront配信の設定

S3は直接静的ウェブサイトをホストできますが、Amazon CloudFrontをCDNとして使用すると、パフォーマンス、セキュリティ、グローバル配信が向上します。

CloudFront配信の作成

aws cloudfront create-distribution \
  --distribution-config file://cloudfront-config.json

基本的なCloudFront構成には以下が含まれます：

S3バケットをオリジンとして使用
デフォルトのキャッシュ動作
SSL/TLS証明書（AWS証明書マネージャーから）
カスタムドメイン構成（オプション）

キャッシュ管理戦略

CloudFrontを通じてデプロイする場合、以下のキャッシュ戦略を考慮してください：

最大TTLの設定: CloudFrontの最大TTLを設定し、エッジロケーションでのコンテンツのキャッシュ期間を制御します。
コンテンツバージョニング: ファイル名にバージョン識別子（例：style-v2.css）を使用して、キャッシュの更新を強制します。
キャッシュコントロールヘッダー: S3同期中に適切なヘッダーを設定（上記の例を参照）。
選択的な無効化: 全キャッシュではなく変更されたパスのみを無効化します。

キャッシュの無効化

更新をデプロイした後、CloudFrontキャッシュを無効化して最新のコンテンツを提供します：

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

よりターゲットを絞った無効化を行うには：

aws cloudfront create-invalidation \
  --distribution-id YOUR_DISTRIBUTION_ID \
  --paths "/index.html" "/blog/*"

コストの考慮点: 月に1,000の無効化パスまでは無料です。それ以降は、各パスあたり$0.005かかります。コストを最小限に抑えるために選択的な無効化を使用してください。

CI/CDによる自動化

小規模なプロジェクトでは手動デプロイが機能しますが、本番環境ワークフローでは自動化が不可欠です。このデプロイメントプロセスをGitea ActionsでHugoウェブサイトをAWS S3にデプロイや類似のCI/CDパイプラインと統合できます。

基本的なデプロイメントスクリプト

簡単なデプロイメントスクリプトを作成してください：

#!/bin/bash
set -e

# Hugoサイトのビルド
echo "Hugoサイトをビルドしています..."
hugo --gc --minify

# S3へのデプロイ
echo "S3にデプロイしています..."
aws s3 sync public/ s3://your-bucket-name/ \
  --delete \
  --cache-control max-age=60

# CloudFrontキャッシュの無効化
echo "CloudFrontキャッシュを無効化しています..."
aws cloudfront create-invalidation \
  --distribution-id YOUR_DISTRIBUTION_ID \
  --paths "/*"

echo "デプロイが完了しました！"

実行可能にし、実行してください：

chmod +x deploy.sh
./deploy.sh

GitHub Actionsの例

GitHubリポジトリに対して、.github/workflows/deploy.ymlを作成してください：

name: Deploy to AWS S3

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
      
      - name: Build
        run: hugo --gc --minify
      
      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v2
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: us-east-1
      
      - name: Deploy to S3
        run: |
          aws s3 sync public/ s3://your-bucket-name/ \
            --delete \
            --cache-control max-age=60          
      
      - name: Invalidate CloudFront
        run: |
          aws cloudfront create-invalidation \
            --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} \
            --paths "/*"

モニタリングと最適化

ロギングの有効化

アクセスパターンを追跡するため、S3とCloudFrontのロギングを構成してください：

# S3アクセスログの有効化
aws s3api put-bucket-logging \
  --bucket your-bucket-name \
  --bucket-logging-status file://logging.json

CloudWatchアラームの設定

デプロイメントをCloudWatchでモニタリングしてください：

aws cloudwatch put-metric-alarm \
  --alarm-name high-error-rate \
  --alarm-description "高エラーレートのアラーム" \
  --metric-name 4xxError \
  --namespace AWS/CloudFront \
  --statistic Sum \
  --period 300 \
  --threshold 10 \
  --comparison-operator GreaterThanThreshold

一般的な問題のトラブルシューティング

ファイルが更新されない

変更が反映されない場合は以下の手順を確認してください：

CloudFrontキャッシュの無効化ステータスを確認
--deleteフラグが同期コマンドで使用されているか確認
ブラウザキャッシュをクリアするか、インコグニートモードでテスト
S3バケットの権限を確認

デプロイが遅い

同期のパフォーマンスを最適化してください：

--excludeと--includeを使用して不要なファイルをスキップ
--size-onlyを使用して比較を高速化
--cli-read-timeoutと--cli-write-timeoutを使用して並列アップロードを実行

権限エラー

IAMユーザーが以下を保証していることを確認してください：

S3バケットへのアクセス権
CloudFront無効化権限（必要に応じて）
正しいバケットポリシーの設定

ベストプラクティスの要約

常に--deleteを使用することで、S3がローカルビルドと同期されるようにしてください
ファイルタイプに基づいて適切なキャッシュヘッダーを設定してください
本番環境デプロイにはCloudFrontを使用してください
CI/CDパイプラインでデプロイを自動化してください
コストをモニタリングしてください - CloudFront無効化料金に注意してください
デプロイメントをバージョニングしてください - リリースをタグ付けして簡単なロールバックを実現してください
ローカルでテストしてください - デプロイする前にHugoビルドを確認してください