0.目的

趣味で写真撮影/動画編集などを行うので、せっかくであれば全世界に公開しておこうと思いサイトを作ることにしました。
静的なサイト＋アクセスは少ない想定なので、トラフィックに対する従量課金のS3にします。

実際のサイト⇒https://toritake.tech

1. ポートフォリオサイトの準備

HTML、CSS、JavaScriptを使用してポートフォリオサイトを作成しました。

2. S3バケットの作成とファイルのアップロード

S3バケットを作成後、作成したHTML、CSS、JavaScript、サイトに載せるファイルをアップロードします。

3. S3バケットポリシーの設定

S3バケットの管理コンソールに移動します。
バケットポリシーに以下のようなポリシーを追加します。
※CloudFront設定後に設定すべきポリシーを表示できた気がするのでその後のほうが良いかもしれません。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowCloudFrontAccess",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your-bucket-name/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::your-account-id:distribution/your-distribution-id"
                }
            }
        }
    ]
}

「変更の保存」をクリックして、ポリシーを適用します。

この設定により、指定したCloudFrontディストリビューションからのみS3バケットへのアクセスが許可されます。

4. ドメインの取得

Route53でドメインを取得すると年間2000円程度かかるため、今回はお名前ドットコムでドメインを取得しました。年間費用は約1000円です。

5. Route53でホストゾーンの作成

Route53のコンソールで「ホストゾーンの作成」をクリックします。
取得したドメイン名を入力し、ホストゾーンを作成します。
作成されたNSレコードの値をメモします。

6. お名前ドットコムでのネームサーバー設定

お名前ドットコムの管理画面にログインします。
取得したドメインの「ネームサーバーの設定」を選択します。
Route53で取得したNSレコードの値を入力し、設定を保存します。

7. SSL証明書の発行（ACM）

ACM（AWS Certificate Manager）のコンソールを開きます。
「証明書のリクエスト」をクリックし、取得したドメイン名を入力します。
検証方法として「DNSの検証」を選択します。
Route53のホストゾーンに、CNAMEレコードを追加します。

8. CloudFrontの設定

CloudFrontのコンソールを開き、「ディストリビューションの作成」をクリックします。
オリジンドメインとして、先ほど作成したS3バケットを選択します。
「カスタムSSL証明書」で、ACMで発行した証明書を選択します。
「代替ドメイン名（CNAME）」に、取得したドメイン名を入力します。
ディストリビューションを作成し、デプロイが完了するまで待ちます。

9. Route53でAレコードの設定

Route53のホストゾーンに戻り、新しいレコードを作成します。
レコードタイプを「A」に設定し、「エイリアス」を選択します。
エイリアス先として、作成したCloudFrontディストリビューションを選択します。
レコードを作成します。

10.終わり

S3にはバケットの内容を静的ウェブサイトとしてホストできる静的ウェブサイトホスティングの機能があるので、HTTP配信だけであればそちらも有効です。