Skip to main content

AWS 實戰：如何將 Amazon S3 設定為靜態網站託管 (Static Website Hosting)

· 3 min read

在雲端開發的時代，將 React、Vue 或純 HTML 網頁託管在 Amazon S3 是最省錢且高效的選擇。但在設定過程中，最常遇到的就是「權限被阻擋」的報錯問題。本篇文章將帶你一步步完成設定，並解決常見的錯誤。

為什麼選擇 S3 託管？​

  • 成本極低：只需支付儲存與流量費用。
  • 高可用性：由 AWS 維護基礎設施，無需擔心伺服器當機。
  • 設定簡單：不需要配置 Nginx 或 Apache。

核心步驟指南​

第一步：上傳檔案與啟用功能​

  1. 建立 Bucket：建議名稱與你的網域名稱一致（如 www.yourdomain.com）。
  2. 上傳內容：將 index.html 及相關 CSS/JS 檔案上傳。
  3. 啟用靜態網站託管：
  • 在 [屬性 (Properties)] 分頁的最下方，找到「靜態網站託管」。
  • 點選編輯並設為「啟用」，並指定索引文件為 index.html。
  • 完成後，你會得到一個 S3 網站端點網址。

第二步：解決「無法儲存政策變更」的錯誤​

許多人在設定 儲存桶政策 (Bucket Policy) 時會看到紅色報錯。這是因為 S3 預設啟動了安全保護機制。

解決方法：​

  1. 進入 [權限 (Permissions)] 頁籤。
  2. 找到 「封鎖公開存取 (儲存桶設定)」，點擊編輯。
  3. 取消勾選「封鎖所有公開存取權」。
  4. 儲存變更並在確認視窗輸入 確認。

注意： 這一點非常重要，若不解除封鎖，後續的公開政策將無法生效。

第三步：套用公開讀取政策​

解除封鎖後，我們需要正式授權「允許任何人讀取」。請在 [儲存桶政策] 處貼上以下 JSON：

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::你的儲存桶名稱/*"
    }
  ]
}

常見問題排查 (QA)​

tip

router 必需要用 hash 模式，不能用 history 模式，否則會無法訪問。

Q1：為什麼我點開網址看到 403 Forbidden？

  • 請檢查你的 Bucket Policy 是否有包含 /*（代表桶子內的所有物件）。
  • 檢查「封鎖公開存取」是否已確實關閉。

Q2：如果是 React / Vue 的 SPA 專案，重新整理會噴 404？

  • 請在 S3 的「靜態網站託管」設定中，將 「錯誤文件 (Error document)」 也填寫為 index.html。這樣所有的路由請求都會交由前端框架處理。

總結​

設定 S3 靜態網站的關鍵在於 「先解鎖、再授權」。雖然 AWS 的安全設定初看繁瑣，但這能有效保護你的資料不被意外公開。

下一步建議： 如果你希望網站支援 HTTPS 或自訂 SSL 憑證，下一步可以考慮在 S3 前面加上 Amazon CloudFront。