先進到 S3，選到你昨天辛辛苦苦建的 Bucket，結果畫面一堆按鈕，搞得比 VS Code 插件還多。
記得先確認 Region，別笑，真的有人部署到東京，結果客戶在美東開網頁慢得像是用 2G 網路。是沒有慢到這種程度啦，說得嚴重一點才能引起你的注意不是嗎？要是真遇到這種情況也別怕，我們後面再來聊聊 CDN(Content Delivery Network )。
在 S3 Bucket 的設定中，選擇 選擇 Properties
滑到最下面，找到 Static website hosting，點 Edit → Enable，
在 Index document(索引文件)中，輸入索引文件的名稱，通常是 index.html。這邊大小寫敏感，不要隨便「Index.html」或「INDEX.HTML」，不然你會在 demo 當天得到一個乾淨俐落的 404。
順便還可以設定 Error document，比如 error.html。這樣至少用戶看到的不是 Amazon 原味 404，而是你自己設計的「不好意思系統壞掉了，工程師正在加班修復」的網頁。
在設定頁面的最右下角，選擇 Save changes。
完成設定後，在 Static website hosting 下會出現 Bucket website endpoint，請把這個網址先記錄下來。這就是這個 Bucket 的 Amazon S3 網站端點。等之後全部完成將 Bucket 設為靜態網站之後，就可以使用此端點來測試您的網站。
S3 預設超嚴格，檔案誰都不能看。這時候你就會想：
「欸我明明檔案都上傳了，怎麼還是 404？」
還記得前面說過預設設定建立的 Bucket 是鎖住外部取存的嗎？那我們既然是要做網站提供內容給大眾讀取，必然要把權限打開讓大家都可以讀取到。
接下來一樣到選到指定的 Bucket 中，選擇 Permissions (許可)
在 Block public access (bucket settings) 下，選擇 Edit (編輯)。
清除 Block all public access (封鎖所有公開存取)，然後選擇 Save changes (儲存變更)。
最後一步確認，在文字欄位中依提示輸入 confirm 進行確認，最後選擇右下角的 Confirm 完成設定
AWS 這招真的有點像你在刪資料庫前要打「DROP」，就是怕有誰手滑把公司整個網站公開，然後隔天被資安部門 call 早八會議。
光解鎖還不夠，還要再加一段 Bucket Policy，不然瀏覽器還是會跟你說：「兄弟你沒權限」。
官方提供的 JSON 長這樣：
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::Bucket-Name/*"
]
}
]
}
重點來了：Bucket-Name 一定要改成自己的，別傻傻複製貼上。S3 的 Bucket 名稱全球唯一，
你要是忘了改，會發現「這誰寫的 code？」變成全公司的人在笑你。
來吧！！讓我們一步步完成
選擇指定的 S3 Bucket 後，選擇 Permissions (許可)
在 Bucket Policy 設定的位置，選擇 Edit (編輯)
以我的範例來說，就會改成以下的內容
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::website-838002ef-a248-46d4-a89b/*"
]
}
]
}
最後選擇 Save changes (儲存變更)。
index.html來了，終於要寫網頁了（雖然只是貼一個 hello world 等級的東西）。
請將以下的人內容保存成 index.html ，務必要注意大小寫。檔案要和前面設定 Index document 時相同，不然會找不到檔案哦！
<html>
<head>
<title>Amazon S3 架站教學</title>
</head>
<body>
<h1>這是首頁哦!!!!</h1>
<p>如果你看到這個說明，就表示你成功啦!!!</p>
</body>
</html>
index.html 建立好後，上傳到指定 S3 Bucket 的第一層。
最後，把之前抄下來的 Bucket website endpoint 丟進瀏覽器，假如你真的看到那個「這是首頁哦!!!!」，
恭喜，你不但省下一台 EC2，還順便向老闆證明你是省錢小能手
當然，等到流量一來，你會立刻被問：「為什麼這個網站不能跑 PHP？」
到時候就可以回答：「老闆，這不是 Bug，這是 Feature，S3 就是純靜態。」
眼尖的小夥伴可能會發現網址列那個紅色告警的不安全三個字，我們後來聊到 SSL 憑證時會解決這個問題的。
用 S3 架靜態網站就是這樣，便宜、快速、沒後端。適合拿來做 Landing Page、文件站、甚至「工程師個人履歷」。
缺點就是一旦老闆說：「要有會員登入」、「要能下單付款」，你就會立刻陷入 AWS 服務深淵（API Gateway、Lambda、DynamoDB 通通來）。
所以記得，S3 靜態網站就是：能用就好，拿來 demo 一級棒，拿來做 production？那就準備爆肝吧。
參考資料：Amazon S3 使用者指南官方文件 - https://docs.aws.amazon.com/zh_tw/AmazonS3/latest/userguide/Welcome.html
iThome鐵人賽
看影片追技術