Day 11 輕鬆上手 AWS S3 網站架設

2025 iThome 鐵人賽

DAY 11

Build on AWS

來都來了，那就做一個AWS從0到100的微服務AI小平台！系列第 11 篇

17th鐵人賽

Benson

團隊Cyber Edge Runners

2025-09-25 00:19:52

13 瀏覽

分享至

步驟 1：登入 AWS 並進入 S3 服務

登入 AWS Management Console
在搜尋欄輸入「S3」或從服務列表中選擇「S3」
進入 S3 儲存貯體管理頁面

步驟 2：建立 S3 儲存貯體 (Bucket)

點擊「建立儲存貯體」按鈕
設定儲存貯體基本資訊：
- 儲存貯體名稱：輸入唯一的名稱（例如：my-website-bucket-2025）
  - 注意：名稱必須全球唯一，只能包含小寫字母、數字和連字號
物件所有權設定：
- 選擇「ACL 已停用」（建議選項）
封鎖公開存取設定：
- 取消勾選「封鎖所有公開存取」
- 勾選確認聲明，允許公開存取（網站需要）
儲存貯體版本控制：
- 保持「停用」（初學者可先不啟用）
加密設定：
- 保持預設的「使用 SSE-S3 加密」
點擊「建立儲存貯體」

步驟 3：上傳網站檔案

點擊剛建立的儲存貯體名稱
點擊「上傳」按鈕
並先建立好index.html 檔案
上傳您的網站檔案：
- index.html（必要，首頁檔案）
- 也可以有 CSS、JavaScript、圖片等其他資源檔案
點擊「上傳」完成

範例 index.html：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個 S3 網站</title>

</head>
<body>
    <h1>歡迎來到我的 S3 網站！</h1>
    <p>這是使用 AWS S3 架設的靜態網站</p>
</body>
</html>

步驟 4：啟用靜態網站託管

在儲存貯體頁面，點擊「屬性」標籤
捲動到最下方找到「靜態網站託管」區塊

3. 點擊「編輯」
4. 設定靜態網站託管：
- 靜態網站託管：選擇「啟用」
- 託管類型：選擇「託管靜態網站」
- 索引文件：輸入 index.html

點擊「儲存變更」
再捲動到最下方找到「靜態網站託管」區塊記下「儲存貯體網站端點」URL（例如：http://my-website-bucket-2024.s3-website-ap-northeast-1.amazonaws.com）/)

基本設定已經完成，但此時若點擊儲存貯體網站端點，會無法連線並顯示「403 Forbidden」錯誤。這是因為 AWS S3 預設會封鎖所有公開存取，我們還需要透過「儲存貯體政策」來調整權限，允許訪客讀取網站內容。

步驟 5：設定儲存貯體政策（公開訪問）

點擊「許可」標籤
捲動到「儲存貯體政策」區塊
點擊「編輯」

貼上以下政策（記得替換 your-bucket-name 為您的儲存貯體名稱）：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your-bucket-name/*"
        }
    ]
}

點擊「儲存變更」

步驟 6：測試您的網站

複製「儲存貯體網站端點」URL
在瀏覽器中開啟該 URL
您應該能看到您的網站內容！

步驟 7：（選用）設定自訂網域

因為 S3 網站預設只提供 HTTP 連線，沒有 SSL/TLS 憑證，因此無法使用安全的 HTTPS 協定。

解決方案

為了讓網站顯示為「安全」並使用 HTTPS，您需要透過 AWS CloudFront 來為網站加上 SSL 憑證。

設定步驟簡單說明：

建立 CloudFront 分發 (Distribution)
- CloudFront 是 AWS 的內容傳遞網路 (CDN) 服務
- 它可以為您的網站提供免費的 SSL 憑證
設定來源 (Origin)
- 將 CloudFront 的來源指向您的 S3 儲存貯體
- CloudFront 會從 S3 取得網站內容，並透過 HTTPS 提供給訪客