はじめに

つくるもの

白い背景に「あ」って表示されているだけのホームページをつくる。
最初の一歩だ！

概要

AWSのアカウントをつくろう

以下から「無料でAWSを開始」と書かれたボタンをクリックしてアカウント登録する。

ドメインを取ろう

自分専用の「アドレス」を手に入れよう。

Route53 を検索

ピン留め
⭐︎マークを押すとサービスをピン留めできる。

ピン留めされたサービスはここから簡単にアクセスできるようになる。

Route53の画面に遷移

Route53コンソールに遷移

「ドメインを登録」ボタンをクリック

利用可能なドメインを検索する

ドメイン名には、英数字および末尾と先頭以外のハイフンのみを含めることができる。

任意のドメインを選択

####「チェックアウトに進む」をクリックして進む

必要情報を入力し、最後に「送信」ボタンを押す。

Route53/リクエスト画面

この時点で認証メールが届いているのでチェックを忘れずに！迷惑メールに届いてしまうことが多いぞ！

この画面でしばらく待機。リロードして「ステータス: 成功」となればドメイン取得完了！

ACM

ACMは必ずリージョンを US East 1 にして取るべきだ

「パブリック証明書をリクエスト」にチェックが入っていることを確認し、次へすすむ。

まずは「完全就職ドメイン名」に
<対象ドメイン>を入力。その後
「この証明書に別の名前を追加」ボタンをクリックし、
*.<対象ドメイン>
を取っておこう。

これで stg.<対象ドメイン> や
dev.<対象ドメイン>でも証明書が効くようになるぞ！

「Route53でレコードを作成」をクリック。

対象のドメインが選択されていることを確認して「レコードを作成」をクリック、次へ進む

「DNSレコードが正常に作成されました」と出る。
証明書のステータス、ドメインのステータスが「保留中の検証」となっている。これが変化するまで待機。

証明書のステータスが「発行済み」
ドメインのステータスがそれぞれ「成功」に
なったら完了！

S3

バケットをつくろう

バケットとは？: ファイルを置いておく場所

「S3」を検索

バケットを作成

バケット作成画面に移動したらおすすめ設定

一般的な設定

AWSリージョン: アジアパシフィック(東京)ap-northeast-1
バケットタイプ: 「汎用」で良い。「ディレクトリ」は2023年に登場した高スペックサービス。単一 AZ にのみ配置され、遅延が数ミリ秒短縮。ストレージクラスは S3 Express One Zone 限定。可用性 99.95 %、価格は Standard より高め過剰。
バケット名: わかりやすければなんでもOK

オブジェクト所有者

ACL: ACL無効

このバケットのブロックパブリックアクセス設定

パブリックアクセスをすべてブロック: チェックが入ったままで良い。
バケットのバージョニング: 有効にするを選択（迷う場合は無効でも稼働は可。あとから有効化できる）
タグ: そのままでよい。

デフォルトの暗号化

暗号化タイプ: SSE-S3で良い。他は過剰スペック
詳細設定: デフォルトでよい

「バケットを作成」をクリックでページ遷移

正常に作成された旨、緑色の通知がでてくる。先ほど作成したS3バケットが表示されるのでクリック

「アップロード」をクリックする

適当なファイルをアップロードする。

「あ」ってかいたファイルでもアップロードしてみよう。
ファイルをドラッグ&ドロップしたら、「アップロード」ボタンを押せば完了。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>あ</p>
</body>
</html>

アップロード完了時の表示

CloudFront

検索バーからCloudFrontを検索してCloudFrontコンソールに遷移しよう

OACを作成する

セキュリティ - オリジンアクセスをクリック

「コントロール設定を作成」をクリック

必要項目を入力したら「Create」をクリック

名前: 一意ならなんでもよい
説明: なんでもよい
署名動作: CloudFront → S3 のリクエストに署名ヘッダーを付ける方式。推奨設定なのでそのまま選択で OK。
認証ヘッダーを上書きしない: ほとんどの静的サイトでは不要なので未チェックで OK。
オリジンタイプ: S3

ディストリビューションを作成

先ほどのCloudFrontトップ画面に戻り「ディストリビューションを作成」をクリックする

Origin domain

最初に作成したドメインを選択

Origin path

名前

自動入力される

オリジンアクセス

**Origin access control settings (recommended):**先ほど作成したOACを選択する

デフォルトのキャッシュビヘイビア

ビューワープロトコルポリシー: Redirect HTTP to HTTPS

WAF

セキュリティ設置。有効にすると高額になりがちなので任意

Custom SSL certificate - optional

最初に作ったACMを設定

代替ドメイン名 (CNAME) - オプション

Route53で取得したドメインを設定する

デフォルトルートオブジェクト - オプション

index.htmlでよい。

ほかはデフォルトで「ディストリビューションを作成」をクリック。

S3 バケットポリシーを追加

バケットの Permissions → Bucket policy に、次のテンプレートを貼り付けてとを置き換えます。

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowCloudFrontRead",
      "Effect": "Allow",
      "Principal": {
        "Service": "cloudfront.amazonaws.com"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::<YOUR BUCKET ID>/*",
      "Condition": {
        "StringEquals": {
          "AWS:SourceArn": "arn:aws:cloudfront::<YOUR AWS ID>:distribution/<YOUR DIST ID>"
        }
      }
    }
  ]
}

「変更を保存」をクリックして、以下の表示が出れば成功

Route53でDNSを切り替える

ホストゾーンに A レコード (Alias) と AAAA レコード (Alias) を追加して CloudFront ディストリビューションを選択すれば完了

↓実際にアクセスしてみると、このような表示が出れば成功！「あ」って書かれたホームページをつくることができたね。

このあとの設定

いまのままだと、S3のファイルを更新しても、キャッシュがCloudFront側に残ってしまう。
つまり、「あ」を「い」に変えたファイルをサーバーにアップロードしても、表示が「あ」から変わr。
そこで、以下の設定を行うことを推奨する。

このあとにおすすめの記事

画像生成AI Bedrockも超低料金で使えるのでWEBサイトのヘッダー画像などに使ってみよう