【Day 7】用 Amazon S3 架靜態網站

2025 iThome 鐵人賽

DAY 7

Build on AWS

無法成為片師也想拍 Vlog？！個人影音小工具的誕生！系列第 7 篇

17th鐵人賽 aws aws s3 cloudfront cdn

二坪山小弱砲

團隊在峴港裸泳咕嚕咕嚕咕嚕曹軍團

2025-09-17 23:58:02

145 瀏覽

分享至

前言

要實現串流服務，勢必有大量影音資料要丟出去給使用者。如果老老實實的都從 EC2 往外丟，除了延遲高，傳輸費也高。透過 Amazon S3 靜態網站託管功能，結合 CDN 去降低成本，提升體驗吧！

常見方案比較

傳統架法	用 S3 架網站
架 EC2 + Nginx	❌ 要維運、要費用
架 VPS / Heroku	❌ 費用不穩、可能冷啟動
用 Netlify / Vercel	✅ 不錯，但有流量限制
✅ S3 Static Hosting	✅ 穩、便宜、可綁網域、配 CloudFront

使用者瀏覽器
   ↓
https://exsky-vlog-web.s3-website-ap-northeast-1.amazonaws.com
   ↓
S3 Bucket（靜態網站模式開啟）
   ↓
HTML / JS / CSS / 圖片

作法概述

這邊建議，新建一個專門的 bucket 放網頁
不要跟前面幾回建立的 stream bucket 混用
這樣比較容易管理不同用途，各別的規則

建立 S3 Bucket

上傳網頁到 Bucket

先上傳一個簡單版本文字網頁

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <title>影片上傳平台</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="upload-container">
    <h2>上傳影片</h2>
    <form id="uploadForm">
      <input type="file" id="fileInput" accept="video/*" required><br>
      <button type="submit">開始上傳</button>
    </form>
    <div class="progress-container">
      <div class="progress-bar" id="progressBar"></div>
    </div>
    <div class="status" id="status"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

啟用 Static Website Hosting (在 S3 Bucket / Properties 內)
儲存後得到一個網址，如 http://exsky-vlog-web.s3-website-ap-northeast-1.amazonaws.com
修改 Bucket Policy

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