2024年01月19日玄貓（BlackCat）

S3 Route53 CloudFront 網頁託管設定

本文整理使用 S3、Route53 和 CloudFront 進行網頁託管的第五章重點，包含 CloudFront DistributionConfig 解析、使用 CloudFormation 建立 CloudFront 分佈、使用 AWS CLI 註冊網域至 Route53

網頁開發雲端服務

S3 Route53 CloudFront AWS 網域名稱 DNS

本章節探討如何使用 S3、Route 53 和 CloudFront 進行網頁託管的具體操作，包含設定 CloudFront 分佈、註冊網域和組態 DNS 等步驟。首先解析了 CloudFront DistributionConfig 的組成結構和重要引數，接著示範如何使用 CloudFormation 範本建立 CloudFront 分佈，並簡化佈署流程。此外，也說明瞭如何使用 AWS CLI 註冊網域至 Route 53，以及如何處理已在其他註冊商註冊的網域名稱，包含建立託管區域和組態 DNS 記錄。最後，提供使用自訂網域與 S3 靜態網站整合的步驟，以及使用 CloudFormation 範本自動化佈署的範例，讓讀者能快速上手網頁託管設定。

使用 S3、Route53 和 CloudFront 進行網頁託管的第五章節重點整理

瞭解 CloudFront 的 DistributionConfig 預設值

在建立 CloudFront 分佈後，系統會傳回一個包含 DistributionConfig 屬性的回應。這個屬性包含了分佈的詳細組態資訊，包括 Origins、DefaultCacheBehavior、CacheBehaviors 等重要設定。

DistributionConfig 結構解析

初始屬性：CallerReference、Aliases 和 DefaultRootObject（預設為 index.html）。
Origins 屬性：包含我們的 S3 儲存桶詳細資訊，用於指定內容來源。
DefaultCacheBehavior：定義了快取行為的預設設定，包括 TargetOriginId、ForwardedValues、ViewerProtocolPolicy（預設為 allow-all）等。
其他重要設定：MinTTL、AllowedMethods、DefaultTTL、MaxTTL、Compress 等，用於控制快取和內容傳輸的行為。

使用 CloudFormation 範本建立 CloudFront 分佈

與使用 AWS CLI 命令不同，透過 CloudFormation 範本建立 CloudFront 分佈時，需要明確指定 DistributionConfig 引數。以下是一個基本的範本結構：

Resources:
  MyCloudFrontDistribution:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        Origins:
          - DomainName: quizzer.cloud.s3.amazonaws.com
            Id: myS3Origin
            S3OriginConfig:
              OriginAccessIdentity: ''
        Enabled: 'true'
        Comment: 'CloudFront Distribution for S3 Bucket'
        DefaultRootObject: index.html
        DefaultCacheBehavior:
          TargetOriginId: myS3Origin
          ForwardedValues:
            QueryString: 'false'
            Cookies:
              Forward: none
          ViewerProtocolPolicy: allow-all

Outputs:
  CloudFrontDistributionId:
    Value: !Ref MyCloudFrontDistribution
    Description: 'CloudFront distribution id'
  CloudFrontDomain:
    Value: !GetAtt MyCloudFrontDistribution.DomainName
    Description: 'CloudFront distribution domain name'

重點步驟：

定義 AWS::CloudFront::Distribution 型別的資源。
指定 DistributionConfig，包括 Origins、Enabled、DefaultRootObject 和 DefaultCacheBehavior 等必要屬性。
使用 Outputs 輸出 CloudFront 分佈的 ID 和網域名稱。

使用 AWS CLI 命令註冊網域名稱至 Route 53

在進行網頁託管時，註冊一個網域名稱是基本需求。AWS Route 53 提供了網域名稱註冊服務，可以透過 AWS CLI 命令進行操作。

重點步驟：

檢查網域名稱可用性：

aws route53domains check-domain-availability --domain-name qnatime.com --profile admin

註冊網域名稱（雖然文中未直接給出註冊命令，但通常使用 register-domain 子命令）。

重點歸納

成功建立 CloudFront 分佈後，狀態會變更為 Deployed。
DistributionConfig 包含多個重要屬性，用於控制分佈的行為。
可以透過 CloudFormation 範本或 AWS CLI 命令來建立和管理 CloudFront 分佈。
Route 53 提供網域名稱註冊服務，可透過 AWS CLI 命令檢查網域名稱可用性及進行註冊。

如何運作

本章節展示瞭如何使用 S3、Route53 和 CloudFront 進行網頁託管的詳細步驟，包括建立 CloudFront 分佈和註冊網域名稱至 Route 53。這些服務共同協作，提供了一個高效、安全且可擴充套件的網頁託管解決方案。

使用 S3、Route53 和 CloudFront 進行網頁託管（第五章）

註冊網域

要使用 AWS 服務託管網站，首先需要註冊一個網域。AWS 提供了 Route 53 服務來實作這一點。註冊網域可以透過 AWS 管理控制檯或 AWS CLI 完成。

使用 AWS CLI 註冊網域

首先，您需要建立一個聯絡資訊 JSON 檔案，如下所示：

{
  "FirstName": "Heartin",
  "LastName": "Kanikathottu",
  "ContactType": "PERSON",
  "OrganizationName": "NA",
  "AddressLine1": "<您的地址第一行>",
  "AddressLine2": "<您的地址第二行>",
  "City": "Bengaluru",
  "State": "KA",
  "CountryCode": "IN",
  "ZipCode": "<您的郵政編碼>",
  "PhoneNumber": "+91.XXXXXXXXXX",
  "Email": "您的電子郵件"
}

請注意，+91 是印度的國家程式碼，後面跟著一個點，然後是實際的電話號碼。

接下來，使用 register-domain 子命令註冊網域：

aws route53domains register-domain \
--domain-name 'qnatime.net' \
--duration-in-years 1 \
--no-auto-renew \
--admin-contact file://resources/contact.json \
--registrant-contact file://resources/contact.json \
--tech-contact file://resources/contact.json \
--privacy-protect-admin-contact \
--privacy-protect-registrant-contact \
--privacy-protect-tech-contact \
--profile admin

#### 內容解密：

此命令將立即傳回一個操作 ID。您可以使用 get-operation-detail 子命令檢查待處理操作的狀態：

aws route53domains get-operation-detail \
--operation-id ba6b494d-9e86-4acc-8904-3ba861228916 \
--profile admin

此命令將傳回類別似以下的回應：您可以從 AWS 管理控制檯驗證付款。登入 AWS 管理控制檯，前往「我的帳單」儀錶板，然後點選「付款方式」。點選「立即付款」動作進行網域註冊費用付款。

網域註冊流程解析

在這個章節中，我們從 AWS 管理控制檯和 AWS CLI 註冊了一個網域。Route 53 可以用於註冊網域名稱、組態 DNS 路由策略，甚至檢查資源的健康狀態。Route 53 是一個全球性服務，是 Amazon 的 DNS 管理服務。DNS 代表網域名稱系統，它負責將您在網際網路上使用的網域名稱轉換為對應的主機系統 IP 位址。

Hosted Zones

Hosted zone 是特定網域的一組記錄集，包括 nameserver（NS）記錄、Start Of Authority（SOA）記錄、MX 記錄等，用於組態郵件伺服器。Hosted zones 可以是公開的（用於在網際網路上路由），也可以是私有的（用於在 Amazon VPC 內路由）。

#### 內容解密：

當您使用 AWS Route 53 網域註冊商註冊網域時，AWS 將自動為您建立一個 hosted zone，以及 NS 和 SOA 記錄。

從 AWS 管理控制檯註冊網域

您可以按照以下步驟從 AWS 管理控制檯註冊網域：

登入您的 AWS 管理控制檯，前往 Route 53 服務。
在 Route 53 控制檯中，前往「網域註冊」頁面。
點選「註冊網域」按鈕，進入「選擇網域名稱」頁面。
輸入網域名稱，選擇您要購買的副檔名，然後點選「檢查」。Route 53 將告訴您網域名稱是否可用，並提供一些建議。
將您偏好的網域名稱新增至購物車，然後點選「繼續」。

#### 內容解密：

在註冊網域時，您需要輸入註冊人的聯絡資訊，並選擇註冊期限。您還可以選擇啟用隱私保護，以隱藏您的聯絡資訊不被公開在 Whois 搜尋結果中。

AWS 將向您指定的電子郵件地址傳送確認連結。點選該連結以驗證您的電子郵件地址。您需要在 15 天內完成驗證，否則您的網域將無法公開使用。

使用S3、Route53和CloudFront進行網頁寄存：處理其他註冊商註冊的網域名稱

概述

本章節將介紹如何使用AWS Route53與其他註冊商註冊的網域名稱進行網頁寄存。我們將探討如何手動建立託管區域，並組態相關的DNS設定。

準備工作

您需要在其他註冊商處註冊一個網域名稱。
具備基本的網路知識和DNS管理概念將會很有幫助。

操作步驟

使用AWS CLI命令建立託管區域

您可以使用AWS CLI的route53命令來建立託管區域。以下是一個範例：

aws route53 create-hosted-zone \
--name quizzercloud.com \
--caller-reference 2018-28-11-11:55 \
--hosted-zone-config Comment="HostedZone for quizzercloud.com" \
--profile admin

取得託管區域的狀態或詳細資訊

建立託管區域後，您可以使用以下命令來取得其狀態或詳細資訊：

aws route53 get-hosted-zone --id <HostedZoneId>

使用CloudFormation範本建立託管區域

您也可以使用CloudFormation範本來建立託管區域。以下是一個範例範本：

Resources:
  CloudMaterialsHostedZone:
    Type: "AWS::Route53::HostedZone"
    Properties:
      HostedZoneConfig:
        Comment: "HostedZone for CloudMaterials.com"
      Name: cloudmaterials.com

Outputs:
  HostedZoneId:
    Value: !Ref CloudMaterialsHostedZone
    Description: "HostedZone for cloudmaterials.com"
  HostedZoneNameservers:
    Value: !Join [",", !GetAtt CloudMaterialsHostedZone.NameServers]
    Description: "HostedZone Nameservers for cloudmaterials.com"

佈署CloudFormation堆積疊

使用deploy-stack命令佈署堆積疊，並使用describe-stacks命令驗證佈署結果。

操作原理

當您在Route53中使用其他註冊商註冊的網域名稱時，需要手動建立託管區域。AWS會自動為您的網域名稱建立NS和SOA記錄。然後，您需要在其他註冊商的控制台中更新NS記錄。

DNS傳播

DNS是一個涉及多個伺服器的階層系統。當您在網域控制台中更新NS記錄時，通常需要24-72小時才能生效，這段時間稱為DNS傳播時間。

其他資訊

AWS Route53支援多種路由策略，例如簡單路由策略、容錯移轉路由策略、地理位置路由策略等。在使用S3時，我們通常使用簡單路由策略。

從AWS管理控制檯組態DNS

登入AWS管理控制檯，前往Route53儀錶板，然後進入託管區域頁面。
點選「建立託管區域」按鈕。
輸入網域名稱、註解和型別，然後點選「建立」。

內容解密：

上述步驟展示瞭如何在Route53中為其他註冊商註冊的網域名稱建立託管區域。
create-hosted-zone命令用於建立託管區域，get-hosted-zone命令用於取得託管區域的詳細資訊。
CloudFormation範本可以用於自動化建立託管區域的過程。
在其他註冊商的控制台中更新NS記錄是必要的步驟，以使DNS變更生效。
DNS傳播時間是DNS變更生效所需的時間，通常為24-72小時。

PlantumlDNS解析流程

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

title S3 Route53 CloudFront 網頁託管設定

package "AWS 雲端架構" {
    package "網路層" {
        component [VPC] as vpc
        component [Subnet] as subnet
        component [Security Group] as sg
        component [Route Table] as rt
    }

    package "運算層" {
        component [EC2] as ec2
        component [Lambda] as lambda
        component [ECS/EKS] as container
    }

    package "儲存層" {
        database [RDS] as rds
        database [DynamoDB] as dynamo
        storage [S3] as s3
    }

    package "服務層" {
        component [API Gateway] as apigw
        component [ALB/NLB] as lb
        queue [SQS] as sqs
    }
}

apigw --> lambda
apigw --> lb
lb --> ec2
lb --> container
lambda --> dynamo
lambda --> s3
ec2 --> rds
container --> rds
vpc --> subnet
subnet --> sg
sg --> rt

@enduml

此圖示展示了DNS解析的基本流程，從使用者請求網域到最終存取網站的過程。

圖表內容解密：

DNS解析器負責接收使用者的請求並啟動DNS解析過程。
根DNS伺服器、頂級網域名稱伺服器和權威DNS伺服器共同協作，以找到網域對應的IP地址。
最終，使用者的請求被導向正確的IP地址，從而存取網站。

使用S3、Route53和CloudFront進行網站託管：自訂網域名稱設定

在前面的章節中，我們已經瞭解如何使用Amazon S3建立靜態網站。本章節將探討如何使用自訂網域名稱與S3靜態網站整合，以及如何利用Route53進行網域名稱解析。

使用自訂網域名稱與S3靜態網站

要使用自訂網域名稱與S3靜態網站，需要滿足以下條件：

網域名稱（包括WWW子網域名稱）必須與S3儲存桶名稱一致。
可以為裸網域名稱（例如：qnatime.com）建立一個S3儲存桶，為其WWW子網域名稱（例如：www.qnatime.com）建立另一個S3儲存桶。
WWW子網域名稱的S3儲存桶可以設定為將請求重新導向至裸網域名稱。

準備工作

擁有一個公開的網域名稱，並且在Route53中組態了HostedZone。
熟悉如何建立S3靜態網站，可以參考前面的章節或提供的程式碼檔案。

操作步驟

建立S3儲存桶：為主網域名稱（例如：qnatime.com）和WWW子網域名稱（例如：www.qnatime.com）各建立一個S3儲存桶。

# 建立主網域名稱的S3儲存桶
aws s3 mb s3://qnatime.com --region ap-south-1

# 建立WWW子網域名稱的S3儲存桶
aws s3 mb s3://www.qnatime.com --region ap-south-1

設定靜態網站：為主網域名稱的S3儲存桶上傳index.html和error.html，並設定網站組態。

# 上傳index.html和error.html到主網域名稱的S3儲存桶
aws s3 cp index.html s3://qnatime.com/index.html
aws s3 cp error.html s3://qnatime.com/error.html

# 設定主網域名稱的S3儲存桶為靜態網站
aws s3 website s3://qnatime.com --index-document index.html --error-document error.html

設定WWW子網域名稱的重新導向：將WWW子網域名稱的S3儲存桶設定為重新導向至主網域名稱。

// redirection.json
{
  "RedirectAllRequestsTo": {
    "HostName": "qnatime.com",
    "Protocol": "http"
  }
}

# 設定WWW子網域名稱的S3儲存桶為重新導向
aws s3api put-bucket-website --bucket www.qnatime.com --website-configuration file://redirection.json

更新Route53的DNS記錄：為主網域名稱和WWW子網域名稱在Route53中建立別名記錄。

// change-resource-record-sets.json
{
  "Comment": "change batch request for qnatime",
  "Changes": [
    {
      "Action": "CREATE",
      "ResourceRecordSet": {
        "Name": "qnatime.com",
        "Type": "A",
        "AliasTarget": {
          "HostedZoneId": "Z11RGJOFQNVJUP",
          "DNSName": "s3-website.ap-south-1.amazonaws.com",
          "EvaluateTargetHealth": false
        }
      }
    },
    {
      "Action": "CREATE",
      "ResourceRecordSet": {
        "Name": "www.qnatime.com",
        "Type": "A",
        "AliasTarget": {
          "HostedZoneId": "Z11RGJOFQNVJUP",
          "DNSName": "s3-website.ap-south-1.amazonaws.com",
          "EvaluateTargetHealth": false
        }
      }
    }
  ]
}

# 更新Route53的DNS記錄
aws route53 change-resource-record-sets --hosted-zone-id YOUR_HOSTED_ZONE_ID --change-batch file://change-resource-record-sets.json

使用CloudFormation範本自動化佈署

以下是使用CloudFormation範本來自動化佈署S3靜態網站和使用自訂網域名稱的範例：

AWSTemplateFormatVersion: '2010-09-09'

Parameters:
  RootDomainName:
    Description: Domain name for your website (e.g., quizzer.cloud)
    Type: String
  SubDomainName:
    Description: Sub-domain name for your website (e.g., www.quizzer.cloud)
    Type: String

Resources:
  RootBucket:
    Type: 'AWS::S3::Bucket'
    Properties:
      BucketName: !Ref RootDomainName
      AccessControl: PublicRead
      WebsiteConfiguration:
        IndexDocument: index.html
        ErrorDocument: error.html

  WebsitePublicAccessPolicy:
    Type: 'AWS::S3::BucketPolicy'
    Properties:
      Bucket: !Ref RootBucket
      PolicyDocument:
        Statement:
          - Effect: Allow
            Principal: '*'
            Action: s3:GetObject
            Resource: !Join ['', ['arn:aws:s3:::', !Ref RootBucket, '/*']]

  WWWBucket:
    Type: 'AWS::S3::Bucket'
    Properties:
      BucketName: !Ref SubDomainName
      AccessControl: BucketOwnerFullControl
      WebsiteConfiguration:
        RedirectAllRequestsTo:
          HostName: !Ref RootDomainName

  myDNS:
    Type: 'AWS::Route53::RecordSetGroup'
    Properties:
      HostedZoneName: !Sub '${RootDomainName}.'
      RecordSets:
        - Name: !Ref RootDomainName
          Type: A
          AliasTarget:
            HostedZoneId: 'Z11RGJOFQNVJUP'
            DNSName: 's3-website.ap-south-1.amazonaws.com'
        - Name: !Ref SubDomainName
          Type: A
          AliasTarget:
            HostedZoneId: 'Z11RGJOFQNVJUP'
            DNSName: 's3-website.ap-south-1.amazonaws.com'

Outputs:
  RootDomainURL:
    Value: !Sub 'http://${RootDomainName}'
    Description: URL for root domain
  SubDomainURL:
    Value: !Sub 'http://${SubDomainName}'
    Description: URL for redirect (sub) domain

#### 內容解密：

此CloudFormation範本定義了兩個S3儲存桶（用於主網域名稱和WWW子網域名稱）、相應的存取政策以及在Route53中的DNS記錄。範本引數化了網域名稱輸入，使得範本可以在不同環境中重複使用。資源的建立和組態完全透過CloudFormation進行管理，大大簡化了佈署流程並減少了人為錯誤。

使用 S3、Route53 和 CloudFront 進行網頁託管的第五章節重點整理

瞭解 CloudFront 的 DistributionConfig 預設值

DistributionConfig 結構解析

使用 CloudFormation 範本建立 CloudFront 分佈

重點步驟：

使用 AWS CLI 命令註冊網域名稱至 Route 53

重點步驟：

重點歸納

如何運作

更多資訊

程式碼解析：

內容解密：

使用 S3、Route53 和 CloudFront 進行網頁託管（第五章）

註冊網域

使用 AWS CLI 註冊網域

#### 內容解密：

網域註冊流程解析

Hosted Zones

#### 內容解密：

從 AWS 管理控制檯註冊網域

#### 內容解密：

使用S3、Route53和CloudFront進行網頁寄存：處理其他註冊商註冊的網域名稱

概述

準備工作

操作步驟

使用AWS CLI命令建立託管區域

取得託管區域的狀態或詳細資訊

使用CloudFormation範本建立託管區域

佈署CloudFormation堆積疊

操作原理

DNS傳播

其他資訊

從AWS管理控制檯組態DNS

內容解密：

PlantumlDNS解析流程

圖表內容解密：

使用S3、Route53和CloudFront進行網站託管：自訂網域名稱設定

使用自訂網域名稱與S3靜態網站

準備工作

操作步驟

使用CloudFormation範本自動化佈署

#### 內容解密：