Skip to Content

S3 + CloudFrontを利用した静的サイト構築手順

Posted on Last updated:

概要

S3 + CloudFrontを利用した静的サイトを構築手順
ドメインはRoute53、証明書はACMを使ってHTTPSで公開サイトを作ります

構成図

manual.abashiri.cityドメイン名の静的サイトを作成します

事前準備

当手順で事前に必要なリソース

Route53のドメイン

Route53で管理しているホストゾーン（ネームサーバ）が必要になります
私は下記の記事で移管したドメインを利用します

GoogleDomainsからRoute53へドメイン移管 | infraya.work

静的サイト構築

S3

下記3個のバケットを作成します

  • S3アクセスログ用バケット
  • CloudFrontアクセスログ用バケット
  • 静的コンテンツをアップロード用バケット

S3アクセスログ用バケット

ログ配信の設定をしたバケットを作成します

  1. バケット名は任意の名前を入力しデフォルトのまま作成
    s3-accesslog-manual.abashiri.cityとしました

  2. 作成したバケットをクリック
    アクセスログからアクセスコントロールリスト

    ログ配信の○をクリック

    下記にチェック

CloudFrontアクセスログ用バケット

デフォルトのままのバケットを作成します

  1. バケット名は任意の名前を入力しデフォルトのまま作成
    cloudfront-accesslog-manual.abashiri.cityとしました

静的コンテンツをアップロード用バケット

アクセスログの保存先を設定したバケットを作成します

  1. バケット名は任意の名前を入力しデフォルトのまま作成
    manual.abashiri.cityとしました

  2. 作成したバケットをクリック
    プロパティからサーバーアクセスのログ記録をクリック
    ターゲットバケットはS3アクセスログ用バケットで作成したバケット名を指定
    ターゲットプレフィックスは任意の名前を入力
    ドメイン名のmanual.abashiri.cityとしました

  3. テストコンテンツのアップロード

index.html名前付けて保存し、内容は下記を貼り付ける

1
2
3
4
5
6
7
8
9

<html>
  <head>
    <meta charset="utf-8">
      <title>S3タイトル</title>
  </head>
  <body>
    S3本文
  </body>
</html>

アップロードをクリックして、index.htmlを保存する

ACM(AWS Certificate Manager)

CloudFrontで証明書を使用するため リージョンをバージニア北部（us-east-1） に変更します

  1. 証明のリクエストをクリック

  2. パブリック証明書のリクエストを選択して、証明書のリクエストをクリック

  3. 証明書を発行したいドメイン名を入力して、次へをクリック
    *.ドメイン名でワイルドカード証明書でも発行できます

  4. DNSの検証を選択して、次へをクリック

  5. 判別しやすいようにNameタグにドメイン名を入力して、確認をクリック

  6. 確定とリクエストをクリック

  7. ドメイン名の左横の▼をクリックして展開し、Route53でのレコード作成をクリック

  8. 作成をクリック
    Route53に検証用のCNAMEレコード追加をこのクリックだけでやってくれます

  9. 正常にレコーとが追加されたら30分ほど待期

  10. 検証されると検証状態が発行済みのステータスになります
    このときは15分ほどで反映されていました

CloudFront

Create Distributionから新規作成

  1. WebのGet Startedをクリック

Origin Settingsセクション

項目 入力内容 備考
Origin Foamin Name 静的コンテンツをアップロード用バケット -
Origin ID 自動流力 -
Restrict Bucket Access Yes 常にCloudFront経由でユーザにアクセスさせる
Origin Access Identity Create a New Identity -
Grant Read Permissions on Bucket Yes, Update Bucket Policy CloudFrontからS3バケットにアクセスする権限を与える

Default Cache Behavior Settingsセクション

項目 入力内容 備考
Viewer Protocol Policy Redirect HTTP to HTTPS HTTPアクセスはHTTPSへリダイレクト

Distribution Settingsセクション

項目 入力内容 備考
Alternate Domain Names ドメイン名を入力 -
Custom SSL Certificate ACMで作成した証明書を選択 -
Default Root Object index.html ここではテストのため
Logging On -
Bucket for Logs CloudFrontアクセスログ用バケット -
Log Prefix 任意 ここではドメイン名を入力

完成

  1. Domain NameがCloudFrontのURL

  2. WEBブラウザでアクセス
    テスト用のindex.htmlが表示され、暗号化もされています

Route53

ドメイン名でアクセスできるようにCNAMEレコードを追加します

  1. 編集したいドメイン名の○をクリック

  2. レコードセットの作成

  3. 下記を入力

項目 入力内容 備考
名前 ドメイン名を入力 -
タイプ CNAME -
値 CloudFrontのURL -

最終確認

ドメイン名でアクセス

感想

キャプチャするのに疲れた

参考

CloudFrontを使用してS3静的ウェブサイトを提供する手順 | Developers.IO