如何使用 AWS CloudFront 和 S3 託管無服務器網站

如果您想在 AWS 上運行網站，您甚至可能不需要服務器！CloudFront CDN AWS 可以直接從 S3 存儲桶提供靜態 Web 內容，讓您只需為請求和傳輸的數據付費（甚至可能是免費的）。

無服務器託管如何工作？

“無服務器”是指無需自行管理專用 Linux 服務器即可運行應用程序的概念，通常通過 AWS App Runner 或 Lambda Functions 等平台即服務解決方案。雖然您可以在 EC2 虛擬機中運行像 NGINX 這樣的普通應用程序，但您通常可以在不運行服務器的情況下為相同的應用程序提供服務。

這種特殊的無服務器解決方案使用 AWS 的簡單存儲服務 (S3) 來託管網站的靜態內容，而不是自己從 NGINX 服務器提供服務。“靜態”僅僅意味著您正在提供文件，而不是創建包含簡單 HTML + CSS 網站和完整客戶端 JavaScript Web 應用程序的頁面。值得注意的是，這不包括服務器端託管框架，例如 WordPress (PHP)、Ruby on Rails 和 ASP.NET，但許多網站只會包含靜態內容。

此解決方案的優點是對您自己的服務器的零依賴 – S3 將始終響應請求，因此您可以讓盡可能多的人訪問您的站點。在 S3 之前，您可以使用 CloudFront，這是一種 AWS 內容分發網絡 (CDN) 解決方案。CloudFront 使用數百個邊緣緩存，全部在 S3 中為您緩存，增加延遲和吞吐量，同時降低成本。

在這個網絡設置中，處理用戶請求的一切都是完全無服務器的。CloudFront 服務器由 AWS 管理，並自動緩存內容並將用戶定向到只是一個 S3 存儲桶的終端節點。

如果您需要運行某種後端或 API 來連接您的 Web 應用程序，您可以使用其他無服務器工具（如 Lambda 函數）來執行此操作。這種設置甚至更好，因為 S3 和 API 請求將分別擴展。

如果您想了解有關使用 API Gateway 作為 Lambda 函數前端的更多信息，可以閱讀我們的設置指南。

雖然簡單，但這實際上是在 AWS 上託管靜態內容的良好企業級設置。它將是強大的、高度可擴展的，甚至可以與 CodePipeline 自動部署一起使用，以從源文件更新您的站點。

它要多少錢？

因為無服務器託管完全可以根據您的使用進行擴展，所以您只需為使用的內容付費。這可以為您在原本大部分空閒的服務器上節省大量資金。通常，與您自己做相比，您每處理器小時支付的費用要多一點，但這通常與您為準確使用支付公平的事實相平衡。

但是，它很有可能是免費的。AWS 始終免費套餐包括 100 GB 帶寬和 1 TB 的 CloudFront 帶寬。相比之下，靜態站點託管服務（如 Github Pages 和 Firebase）的大多數其他免費層級將為您提供大約 10GB 的空間。

1TB 的免費帶寬當然非常好，因為這意味著大多數不提供大量內容的網站在被收取大量費用之前都會有很大的緩衝區。

但是，您仍然需要為將加起來的 S3 請求付費，如果您的網站存儲了數百 GB 的內容，您可能還會看到為此收取的高額費用。但是，在可能的情況下有效使用 CloudFront 緩存可以減少對源 (S3) 所需的請求數量，並且大多數站點將非常小。

設置靜態 S3 Bucket 網站

要開始使用，請轉到S3 管理控制台並創建一個新存儲桶。 您必須禁用“阻止公共訪問”才能使其可見。AWS 警告說，除了靜態網站託管等用例之外，這是一個壞主意。由於這正是我們正在做的事情，您可以忽略它，但您絕對不想將秘密加載到垃圾箱中——它們都是可讀的。

它只是刪除了上面的塊；您還需要通過“權限”部分中的垃圾策略明確允許公開閱讀。請務必將此處的資源名稱替換為正確的存儲桶。

{

“版本”：“2012-10-17”，

陳述：[

{

“Sid”:”PublicReadGetObject”,

“效果”：“允許”，

“主要的”： ”*”，

“動作”:[“s3:GetObject”],

“資源”:[“arn:aws:s3:::example-bucket/*”]

}

]

}

接下來，您需要上傳您的內容。您可以拖放，但如果您想手動傳輸整個文件夾，您可以使用 AWS CLI 將您的 S3 存儲桶同步到本地目錄。您還可以將此存儲桶設置為 CodePipeline 部署的輸出，該部署可以從源存儲庫構建您的工件。

我們將使用 S3 API 並加載基本create-react-app 模板。同步後，您將index.html 在 S3 中看到。

aws s3 sync. s3://bucket-name

在準備好之前，您需要轉到購物車屬性，向下滾動以找到靜態虛擬主機，然後將其打開。您將需要設置索引和錯誤文檔，這也是您可以編寫重定向規則的地方。

之後，您將在屬性中看到網站端點。

連接 CloudFront CDN

CloudFront 有很多選項，但默認設置適用於簡單的 S3 網站，因此設置起來非常簡單。轉到CloudFront 控制台  並創建一個新分配。

您可以調整緩存設置，但默認行為應該適合大多數人。

您需要連接自己的域，這包括生成可以使用 AWS Certificate Manager (ACM) 管理的 SSL 證書。您可以單擊此按鈕來申請證書，如果您不使用 AWS Route 53 DNS，這可能需要一些時間來驗證 DNS。

當然，您還需要使用指向 CloudFront 終端節點的 CNAME 記錄來配置 DNS。

設置證書和 DNS 後，創建一個分配並等待大約 15 分鐘，讓 CloudFront 部署它。完成此操作後，您可以訪問 CloudFront 終端節點或您的自定義域，並查看 S3 存儲桶如何為您的站點提供服務。