在上一篇文章中，我們完成了多人協作平台的資料庫單表設計，並搭建了 API 與 Lambda 來處理專案與事件資料。今天，我們先回來一下將把焦點拉回到 前端部署，學習如何將我們的前端應用程式安全、高效地部署到雲端，並透過 CloudFront 提升全球存取速度與安全性。

以往的部署方式

在我們的系列文章中，S3 靜態網站部署的方式是透過一堆權限設定還有靜態網站託管達成的。
然而這可能導致一些不太熟悉權限管理的使用者大開一通導致機密在一夕之間被分發到全球...

而在近年，AWS 官方提出了一個最推薦的最佳實踐
也就是 CloudFront + OAC !

為什麼要用 CloudFront？

CloudFront 是 AWS 的 CDN（Content Delivery Network），主要功能包括：

1. 加速資源存取：使用全球邊緣節點，減少延遲。
2. 安全性：可以搭配私有 S3 與 OAC 控制誰能存取。
3. 統一入口：使用 CloudFront URL 作為前端資源的公開端點。

Origin Access Control (OAC) 簡介

OAC 是 CloudFront 新一代的存取控制機制，用來管理 CloudFront 對 私有 S3 Bucket 的存取。它可以被理解成「CloudFront 專用的 IAM 身份」，確保只有 CloudFront 可以讀取 S3，而使用者無法直接存取。

優點：

• 安全：S3 可以保持私有，資源不直接暴露給外部。
• 可管理：與 AWS IAM 整合，更容易設定權限。
• 未來可擴展：比舊版 OAI 支援更多功能。

部署流程概覽

建立 S3 Bucket，都先套用預設值

不設定靜態網站託管，也不公開任何權限!!

將前端靜態資源上傳到 S3。

使用 react 等框架在確定環境變數設定完成後，先npm run build 輸出靜態資源

建立 CloudFront Distribution，並將 S3 Origin 綁定。

進入 Create Distribution 在 Origin 選擇你的 S3 桶

在 CloudFront 將 OAC 與 S3 Origin 綁定。

最上面的選項中打勾會幫你的 S3 Bucket 配置 CloudFront 可以讀取的權限

回到 CloudFront 的頁面找到你所創建的 Distribution

在 Origin -> Edit 中進行接下來的配置

配置 OAC ( 確認 S3 Bucket是否有配置相應的Policy，若無遵照提示複製貼上即可 )

接下來可以在 Settings 中配置 Default Root Object 這樣你的網站中/的路由就會被導到你所輸入的資源
( 記得要把/去掉只留檔案名稱，如 index.html)

可以看到前端網站的登入頁面了! 若有串接 Cognito 也可順利登入！( 記得設定 callback URL )

結語

透過以上的方式部屬S3網站的話，使用者不直接訪問 S3，而是透過 CloudFront 取得資源。
OAC 確保只有 CloudFront 端點有權限讀取 S3，這樣就不用擔心

這樣的部署方式，除了提高資源讀取速度，也能確保前端資源的安全性，為多人協作平台提供穩定且可擴展的前端架構。