# AWS S3+Cloufront 建立靜態網站
:::info
前情提要我們建立了一個文檔網站，進一步要如何讓他能夠上線閱覽
:::
[TOC]
## 學習目的
將完成的靜態網站提供服務上線
構想使用S3+Cloudfront組合建構環境，利用雲端特性最大幅度的降低管理及使用資源

## 事前準備

架設靜態網站前，需要準備以下內容：

1. AWS 帳號
2. 可用的 domain name

## 建立S3 Bucket
:::success
在S3建立託管靜態網站需要將Bucket name取名和最後公布的入口網站一致，詳細可參閱 [AWS S3 static website](https://docs.aws.amazon.com/AmazonS3/latest/userguide/websitxe-hosting-custom-domain-walkthrough.html)
:::

## 建立Cloudfront Distribution

在 Create Distribution 選擇要託管靜態網站的 S3 Bucket name

建立需要快取的內容政策 Default cache behavior、Cache key and origin requests

可以使用 AWS 免費的證書，在申請時可以包含多域名進行包裝（例如申請 top domain & wildcard domain)


將 Cloudfront 產生出來的 Domain name 在 DNS 建立 cname 紀錄


## 建立 Cloudfront 私有訪問 S3
:::success
考量到 S3 bucket 的安全性我們希望所有的訪客只能透過 Cloudfront 進行存取
:::

User-->Cloudfront: request Get!(Ｏ)
Cloudfront->S3: request Get!(Ｏ)
User--S3: request Get!(X)

這邊將運用 AWS Cloudfront OAC 的方式達成目的


### Cloudfront 配置

在 Cloudfront 先建立一個 OAC（Origin access controls）設定，Origin Type 需要選擇 S3


選擇需要私有存取 S3 的 Cloudfront Distributions 在 Origin 配置裡面調整 Origin access 改為 Origin access contorl settings，選擇剛剛建立好的 OAC 設定，並複製 policy


### S3 配置

在 S3 bucket Permissions 調整 Block public access (bucket settings)：將 Block all public access 勾選，拒絕所有的公共訪問


在 Bucket policy 編輯


貼上剛剛在Cloudfront Origin access建立好的 OAC 設定並複製的 policy

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::docs.higher-cloud.com/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::<account ID>:distribution/<distribution ID>"
                }
            }
        }
    ]
}

> Read more about [OAC](https://docs.aws.amazon.com/zh_tw/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html#oac-permission-to-access-s3)

## 驗證

正常透過 Cloudfront 可以連線，查詢可以看到在 X-cache 確實有緩存在 cloudfront 的節點上


透過 S3 Object URL 連線被拒絕訪問


## 延伸閱讀

[Doscify 架設私有文檔網站](https://hackmd.io/sXSjOGHdR_-WuyASBBIVyA)

[Git & Github 版本控制](https://hackmd.io/7eIaOpMpSt6OMaC_TVBKlA)

[Github Action + S3 小型CI/CD](https://hackmd.io/IxlHGXXkQFSHBdKyYfrLBQ)

---