HOME > 技術ドキュメント > AWS S3 + CloudFront 静的サイトホスティング入門
AWS S3 + CloudFront 静的サイトホスティング入門
HTML・CSS・JavaScript などの静的ファイルを Amazon S3 に置き、
Amazon CloudFront（CDN）経由で配信する構成は、
サーバーレスで高可用・低コスト・高速なサイト運営を実現します。
本ドキュメントでは S3 バケット作成から CloudFront 設定・独自ドメイン・SSL証明書の選択まで解説します。
1. 構成概要
| コンポーネント | 役割 |
|---|---|
| Amazon S3 | 静的ファイル（HTML/CSS/JS/画像）のオリジンストレージ |
| Amazon CloudFront | グローバル CDN。エッジキャッシュ・HTTPS 終端・独自ドメイン対応 |
| AWS Certificate Manager (ACM) | AWS マネージドの無料 SSL 証明書（CloudFront 専用） |
| 独自 SSL 証明書 | DV・OV・EV 証明書を IAM/ACM にインポートして使用 |
| Route 53 / 独自 DNS | カスタムドメインを CloudFront ディストリビューションに向ける |
S3 バケットは直接パブリック公開せず、CloudFront の OAC（Origin Access Control）経由のみアクセスを許可する構成が推奨です。
2. S3 バケットの作成
AWS マネジメントコンソールから S3 バケットを作成します。 OAC 経由で CloudFront のみからアクセスするため、パブリックアクセスはすべてブロックします。
# AWS CLI でバケットを作成する場合（リージョンは ap-northeast-1 を例に）
aws s3api create-bucket \
--bucket my-static-site-example \
--region ap-northeast-1 \
--create-bucket-configuration LocationConstraint=ap-northeast-1
# パブリックアクセスをすべてブロック
aws s3api put-public-access-block \
--bucket my-static-site-example \
--public-access-block-configuration \
"BlockPublicAcls=true,IgnorePublicAcls=true,BlockPublicPolicy=true,RestrictPublicBuckets=true"
静的ファイルをアップロードします。
# ローカルの dist/ ディレクトリを S3 に同期 aws s3 sync ./dist s3://my-static-site-example \ --delete \ --cache-control "public, max-age=31536000" # index.html は短いキャッシュにする aws s3 cp ./dist/index.html s3://my-static-site-example/index.html \ --cache-control "public, max-age=60"
3. CloudFront ディストリビューションの作成
コンソール → CloudFront → 「ディストリビューションを作成」から設定します。
| 設定項目 | 推奨値 |
|---|---|
| オリジンドメイン | S3 バケットを選択（バケットウェブサイトエンドポイントではなく REST API エンドポイント） |
| Origin Access | Origin Access Control (OAC) を新規作成 |
| デフォルトルートオブジェクト | index.html |
| ビューワープロトコルポリシー | Redirect HTTP to HTTPS |
| 価格クラス | 全エッジロケーション（またはアジア・日本限定） |
| 代替ドメイン名（CNAME） | www.example.com など独自ドメインを追加 |
| SSL 証明書 | ACM 証明書または IAM/ACM にインポートした独自証明書 |
OAC を作成すると、S3 バケットポリシーの追加を促されます。 コンソールに表示されたポリシーをコピーして S3 バケットのポリシーに貼り付けてください。
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AllowCloudFrontOAC",
"Effect": "Allow",
"Principal": {
"Service": "cloudfront.amazonaws.com"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::my-static-site-example/*",
"Condition": {
"StringEquals": {
"AWS:SourceArn": "arn:aws:cloudfront::123456789012:distribution/EXAMPLEDIST"
}
}
}
]
}
4. SSL 証明書の選択（ACM vs 独自証明書）
CloudFront で HTTPS を使うには、us-east-1（バージニア北部） リージョンの証明書が必要です。
| 証明書の種類 | メリット | デメリット・注意点 |
|---|---|---|
| AWS ACM（無料） | 無料・自動更新・AWS コンソールから直接発行可能 | DV のみ・AWS サービス内でしか使えない・企業情報は証明書に含まれない |
| 独自 SSL 証明書（有料） | DV・OV・EV すべて対応・企業名を証明書に記載可能（OV/EV）・他サービスへの移植性 | 費用がかかる・手動または API で更新が必要 |
個人ブログや社内ツールは ACM で十分ですが、EC サイト・企業の公式サイト・金融系では OV または EV の独自証明書で企業の実在性を証明することが信頼性向上につながります。
# 独自証明書を ACM にインポートする（us-east-1 を指定） aws acm import-certificate \ --region us-east-1 \ --certificate fileb://your_domain.crt \ --private-key fileb://your_domain.key \ --certificate-chain fileb://intermediate.crt
5. カスタムドメインの設定
Route 53 を使う場合は A レコード（エイリアス）を CloudFront ディストリビューションに向けます。 他の DNS サービスでは CNAME レコードを使います。
# Route 53 での設定例（CLI）
# Type: A, Alias: true, Target: CloudFront ディストリビューションドメイン名
aws route53 change-resource-record-sets \
--hosted-zone-id ZXXXXXXXXXXXXX \
--change-batch '{
"Changes": [{
"Action": "UPSERT",
"ResourceRecordSet": {
"Name": "www.example.com",
"Type": "A",
"AliasTarget": {
"HostedZoneId": "Z2FDTNDATAQYW2",
"DNSName": "d1234abcdefgh.cloudfront.net",
"EvaluateTargetHealth": false
}
}
}]
}'
# Route 53 以外の DNS（CNAME レコード）
# www.example.com CNAME d1234abcdefgh.cloudfront.net
6. キャッシュ設定と Invalidation
デプロイ後、CloudFront のエッジキャッシュが残っているとすぐに反映されません。 特定パスのキャッシュを削除（Invalidation）します。
# 全ファイルのキャッシュを削除（月50パスまで無料、それ以降は$0.005/パス） aws cloudfront create-invalidation \ --distribution-id EXAMPLEDIST \ --paths "/*" # index.html のみ aws cloudfront create-invalidation \ --distribution-id EXAMPLEDIST \ --paths "/index.html"
JS・CSS などの静的アセットはファイル名にハッシュを含めることで（例：app.a1b2c3.js）、
Invalidation なしにキャッシュバスティングが実現できます。
CloudFront で独自 SSL 証明書を使う
ACM 無料証明書は AWS 専用のため、他サービスへの移行や OV/EV 証明書が必要な場面では
独自 SSL 証明書を ACM にインポートして使います。
エスロジカルではデジサート・サイバートラストの正規取扱代理店として、
2009年から16年以上、RapidSSL 3,960円/1年（税込）〜でSSL証明書を販売しています。審査サポート・インストール代行も対応しています。
SSL証明書の購入はこちら / Let's Encrypt vs 有料証明書 / DV・OV・EV の違い