Unit 02 - 資料儲存基礎：Cloud Storage

📋 課程情境：建立個人作品集網站

🎯 情境背景

假設你是一位設計師，想建立一個個人作品集網站來展示作品。你需要：

展示 50+ 張高解析度作品照片
提供作品說明頁面（HTML/CSS/JavaScript）
降低舊作品的儲存成本（瀏覽率低）
不需要昂貴的伺服器維護

🎓 學習目標

✅ 了解 Cloud Storage 的優勢與適用場景
✅ 實作建立並設定 Bucket
✅ 上傳檔案並組織結構
✅ 設定公開存取權限
✅ 將 Bucket 變成靜態網站
✅ 透過生命週期規則優化成本

💡 學習建議

本單元採用情境導向教學，每個操作都與實際專案相關。建議邊學邊實作，完成自己的作品集網站！

1. 為什麼選擇 Cloud Storage？

🤔 傳統方式的問題

點擊查看：傳統虛擬主機 vs Cloud Storage

❌ 傳統虛擬主機

儲存空間固定（如 10GB）
流量暴增時可能當機
需要手動維護伺服器
成本固定，閒置也付費

✅ Cloud Storage

儲存空間無限制
自動擴展，永不當機
Google 負責維護
用多少付多少
內建全球 CDN 加速

🗂️ GCP 儲存服務選擇指南

應用場景	建議服務	適用原因
📸 圖片、影片、備份	Cloud Storage	物件儲存，成本低
📄 靜態網站（HTML/CSS/JS）	Cloud Storage	直接託管，免伺服器
💾 虛擬機器的硬碟	Persistent Disk	區塊儲存，高 IOPS
📊 SQL 資料庫	Cloud SQL	結構化查詢
🗄️ 共享檔案系統	Filestore	NFS 協定，多台共用

🎯 結論：為什麼選 Cloud Storage？

作品集網站是靜態內容（圖片 + HTML），不需要資料庫或後端程式。Cloud Storage 是最經濟且簡單的解決方案！

🧠 核心概念速覽

Bucket（儲存桶）

就像「雲端倉庫」，用來存放檔案。每個 Bucket 有唯一名稱（全球唯一，就像網域），可建立多個 Bucket 分類存放檔案。

my-portfolio-images    → 作品圖片
my-portfolio-website   → HTML/CSS/JS
my-portfolio-backups   → 備份檔案

Object（物件/檔案）

實際的檔案內容。每個檔案有唯一路徑：

gs://my-portfolio-website/index.html
gs://my-portfolio-website/css/style.css
gs://my-portfolio-website/images/project-01.jpg

⚠️ 注意：Cloud Storage 是扁平結構，css/style.css 只是檔案名稱的一部分，並非真的有「資料夾」。

Storage Class（儲存類別）

根據存取頻率選擇不同價位：

類別	適用情境	成本
Standard	頻繁存取（最新作品）	💰💰💰
Nearline	每月存取 1-2 次（去年作品）	💰💰
Coldline	每季存取 1 次（2-3 年前）	💰
Archive	幾乎不存取（備份）	💰

🧪 快速測驗：何時該用 Archive 類別？

A. 每週都會下載的報表

B. 網站的 CSS/JavaScript 檔案

C. 法規要求保存 7 年的財務報表

D. 作品集網站的圖片

2. 實作：建立你的第一個 Bucket

🎯 實作目標

建立一個用於託管作品集網站的 Bucket，並了解每個設定選項的意義。

📝 操作步驟

開啟 Cloud Storage

操作路徑：

開啟 GCP Console
左側選單 ☰ → Cloud Storage → 值區
點擊「建立」按鈕

設定 Bucket 名稱

命名你的 Bucket：

my-portfolio-frank-2024  ← 你的名稱
my-portfolio-tw-20240305 ← 加入地區日期
portfolio-a8f3d92c       ← 加入隨機字串

⚠️ 命名規則

✅ 只能用小寫字母、數字、連字號（-）
✅ 長度 3-63 字元
❌ 不可用底線（my_portfolio）
❌ 不可用大寫（MyPortfolio）
❌ 必須全球唯一（因為會產生公開網址）

選擇儲存位置

假設目標觀眾在台灣，應該選擇哪個位置？

Region（單一區域）

asia-east1 (台灣)

✅ 成本最低
低延遲（台灣用戶）
區域故障時無法存取

Multi-region（多區域）

ASIA（亞洲多區複製）

✅ 高可用性（99.95%）
✅ 自動容錯移轉
成本較高

企業級應用

💡 建議：個人作品集網站選擇 asia-east1（台灣），成本低且延遲小。

選擇儲存類別

預設選擇：Standard

（稍後會學習如何用生命週期規則自動轉換為 Nearline/Coldline）

存取控制

選擇統一（建議新手使用）

統一 vs 精細 - 差異說明

模式	說明	適用情境
統一	只用 IAM 權限（簡單）	新專案、團隊協作
精細	IAM + ACL 雙重控制	複雜權限需求

資料保護（選填）

物件版本管理：保留檔案修改歷史（建議開啟，防止誤刪）
保留政策：設定檔案不可刪除期限（企業合規需求）

💡 建議：初學者可先開啟「物件版本管理」，其他選項使用預設值。

建立 Bucket

檢查設定無誤後，點擊「建立」

✅ 成功後會看到你的 Bucket 出現在列表中！

🔬 進階操作：使用 gsutil 指令建立 Bucket

開啟 Cloud Shell，執行以下指令：

# 建立 Bucket（Region 模式）
gsutil mb -c STANDARD -l asia-east1 gs://my-portfolio-frank-2024/

# 開啟物件版本管理
gsutil versioning set on gs://my-portfolio-frank-2024/

# 查看 Bucket 資訊
gsutil ls -L -b gs://my-portfolio-frank-2024/

🧪 檢查點：Bucket 命名測驗

問題：以下哪個 Bucket 名稱無效？

A. my-portfolio-2024

B. MyPortfolio_2024

C. portfolio-frank-tw

D. portfolio-123abc

3. 上傳作品集網站檔案

📂 規劃檔案結構

在上傳前，先規劃好作品集網站的檔案結構：

my-portfolio-website/
├── index.html           ← 首頁
├── about.html           ← 關於頁面
├── css/
│   └── style.css        ← 樣式表
├── js/
│   └── main.js          ← JavaScript
└── images/
    ├── project-01.jpg   ← 作品1
    ├── project-02.jpg   ← 作品2
    └── profile.jpg      ← 個人照片

📤 上傳方式選擇

🖱️ Web Console 上傳

適合少量檔案（< 100 個）
視覺化操作，新手友善
可拖放檔案

推薦新手

⌨️ gsutil 指令上傳

適合大量檔案或整個資料夾
可自動化、寫成腳本
支援並行上傳（更快）

進階功能

📝 實作步驟：Web Console 上傳

進入 Bucket

在 Cloud Storage 頁面，點擊你剛建立的 Bucket 名稱

建立資料夾結構

點擊「建立資料夾」
輸入名稱：css、js、images
點擊「建立」

💡 提醒：這些「資料夾」只是顯示上的分類，實際上 Cloud Storage 會將 css/style.css 當作完整的檔案名稱。

上傳檔案

點擊「上傳檔案」或直接拖放檔案
選擇本機的 index.html、about.html
進入 css/ 資料夾，上傳 style.css
進入 images/ 資料夾，上傳所有圖片

設定 Metadata（重要）

上傳 HTML/CSS/JS 檔案時，需設定正確的 Content-Type：

檔案類型	Content-Type
*.html	`text/html`
*.css	`text/css`
*.js	`text/javascript`
*.jpg	`image/jpeg`
*.png	`image/png`

⚠️ 常見問題：如果 Content-Type 錯誤，瀏覽器可能會下載檔案而非顯示內容！

🚀 進階：使用 gsutil 批次上傳

🔬 指令操作實驗室

# 上傳單一檔案
gsutil cp index.html gs://my-portfolio-frank-2024/

# 上傳整個資料夾（遞迴）
gsutil -m cp -r ./website/* gs://my-portfolio-frank-2024/

# 設定 Content-Type（批次）
gsutil -m setmeta -h "Content-Type:text/html" \
  gs://my-portfolio-frank-2024/*.html

# 同步本機資料夾到 Bucket（增量更新）
gsutil -m rsync -r -d ./website gs://my-portfolio-frank-2024/

💡 參數說明：

-m：多執行緒並行上傳（加速）
-r：遞迴處理子資料夾
-d：刪除遠端多餘的檔案（同步模式）

🧪 實作測驗：檔案上傳

問題：你有 500 個圖片檔案要上傳，應該使用哪種方法最有效率？

A. Web Console 逐一上傳

B. gsutil -m cp -r（並行上傳）

C. 壓縮成 ZIP 後上傳

D. 使用 FTP 上傳

4. 讓全世界看到你的作品集

🔒 目前狀況

剛上傳的檔案預設是私有的，只有你能存取。要讓訪客瀏覽網站，需要設定公開存取權限。

🔑 權限管理的兩種方式

IAM（身份與存取管理）

套用到整個 Bucket
統一管理所有檔案
適合作品集網站

推薦使用

ACL（存取控制清單）

針對個別檔案設定
精細但複雜
特殊需求時使用

進階功能

📝 實作：設定公開存取（IAM 方式）

開啟 Bucket 權限設定

進入你的 Bucket
點擊上方「權限」分頁
點擊「授予存取權」

新增公開存取

在「授予存取權」對話框中：

新增主體：輸入 allUsers
角色：選擇「Storage 物件檢視者」
點擊「儲存」

⚠️ 安全警告

系統會顯示警告訊息：「此 Bucket 將對所有人公開」。確認後點擊「允許公開存取」。

驗證公開存取

測試檔案是否能公開存取：

點擊 Bucket 中的任一檔案（如 index.html）
複製「公開 URL」
在瀏覽器中開啟該網址

✅ 應能直接看到檔案內容！

公開 URL 格式：
https://storage.googleapis.com/my-portfolio-frank-2024/index.html

🛡️ 安全性考量

⚠️ 公開存取的風險

任何人都能存取檔案（包括搜尋引擎）
檔案網址會被索引到 Google 搜尋
如果流量過大會產生費用

🔒 防護措施

✅ 不要上傳敏感資料（密碼、API 金鑰）
✅ 設定 Cloud CDN 降低流量成本
✅ 使用 Signed URL 進行限時存取（進階）

🔬 進階：指令設定公開存取

使用 gsutil 設定權限

# 將整個 Bucket 設為公開讀取
gsutil iam ch allUsers:objectViewer \
  gs://my-portfolio-frank-2024

# 僅將特定檔案設為公開
gsutil acl ch -u AllUsers:R \
  gs://my-portfolio-frank-2024/index.html

# 查看 Bucket 權限
gsutil iam get gs://my-portfolio-frank-2024/

🧪 檢查點：權限測驗

問題：如果訪客存取你的檔案時出現 403 錯誤，最可能的原因是？

A. 未設定公開存取權限

B. 檔案格式錯誤

C. Bucket 名稱錯誤

D. 瀏覽器不支援

5. 靜態網站託管：把 Bucket 變成網站

🌐 何謂靜態網站託管？

靜態網站指的是不需要後端伺服器處理的網頁（HTML/CSS/JavaScript）。Cloud Storage 可以直接託管這類網站，無需租用虛擬機器！

適用場景：

個人作品集、履歷網站
公司官網（無動態功能）
文件網站（如 API 文件）
單頁應用（SPA）前端

📝 設定步驟

準備網站檔案

確保 Bucket 中有以下檔案：

index.html（首頁，必須）
404.html（錯誤頁面，選填）

啟用網站設定

進入 Bucket 的「設定」分頁
找到「網站設定」區塊
點擊「編輯」
設定：
- 主頁尾碼：index.html
- 找不到頁面：404.html
點擊「儲存」

使用網站網址

啟用後，訪客可透過簡化網址存取：

# 原本的物件 URL（長）
https://storage.googleapis.com/my-portfolio-frank-2024/index.html

# 網站 URL（短，會自動載入 index.html）
https://storage.googleapis.com/my-portfolio-frank-2024/

✅ 網址結尾不需要 /index.html，更簡潔！

測試 404 錯誤頁面

訪問不存在的網址：

https://storage.googleapis.com/my-portfolio-frank-2024/nonexistent

✅ 應該會顯示你的自訂 404.html 頁面

🚀 進階：使用自訂網域

點擊查看：自訂網域設定（進階）

如果你擁有自己的網域（如 www.myportfolio.com），可以設定指向 Cloud Storage：

前置條件

擁有網域（從 GoDaddy、Namecheap 等購買）
Bucket 名稱必須與網域名稱相同

設定步驟

建立名為 www.myportfolio.com 的 Bucket

到你的 DNS 供應商設定 CNAME 記錄：

名稱：www
類型：CNAME
值：c.storage.googleapis.com

等待 DNS 生效（可能需要 1-48 小時）
訪問 http://www.myportfolio.com（注意：HTTP only，需用 Load Balancer 啟用 HTTPS）

⚠️ 限制：直接使用 Cloud Storage 的自訂網域無法使用 HTTPS。若需 HTTPS，必須搭配 Cloud Load Balancer 或 Cloud CDN。

📊 網站效能優化

優化項目	方法	效果
圖片壓縮	使用 WebP 格式、降低解析度	減少 70% 檔案大小
啟用快取	設定 Cache-Control metadata	減少重複下載
使用 CDN	啟用 Cloud CDN	全球快取，延遲降低
最小化 CSS/JS	使用 minify 工具	減少 30-50% 大小

🔬 指令設定網站託管

# 設定主頁尾碼與 404 頁面
gsutil web set -m index.html -e 404.html \
  gs://my-portfolio-frank-2024/

# 設定 Cache-Control（瀏覽器快取 1 小時）
gsutil -m setmeta -h "Cache-Control:public, max-age=3600" \
  gs://my-portfolio-frank-2024/*.html

# 查看網站設定
gsutil web get gs://my-portfolio-frank-2024/

🧪 測驗：靜態網站託管

問題：以下哪種網站無法使用 Cloud Storage 託管？

A. 個人履歷網站（HTML/CSS）

B. 產品展示頁面（含 JavaScript 特效）

C. 需要會員登入的電商網站

D. React/Vue 單頁應用（SPA）

6. 降低成本：生命週期管理

💰 成本結構分析

Cloud Storage 費用主要包含：

儲存費用：每 GB 每月（依儲存類別計價）
操作費用：每次讀取/寫入/列表操作
網路費用：資料傳出到網際網路

$0.02

Standard 每 GB/月（台灣）

$0.01

Nearline 每 GB/月

$0.004

Coldline 每 GB/月

$0.0012

Archive 每 GB/月

🔄 什麼是生命週期管理？

🎯 核心概念

生命週期規則可以自動將檔案從昂貴的儲存類別轉換到便宜的類別，或在特定條件下刪除檔案。

典型場景：

舊作品圖片 30 天後轉為 Nearline（節省 50% 成本）
備份檔案 90 天後轉為 Coldline（節省 80% 成本）
暫存檔案 7 天後自動刪除

📝 實作：設定生命週期規則

進入生命週期設定

進入 Bucket 的「生命週期」分頁
點擊「新增規則」

設定規則動作

選擇要執行的動作：

設定儲存類別為：Nearline / Coldline / Archive
刪除物件：永久刪除檔案

設定觸發條件

常用條件：

條件	說明	範例
天數	檔案建立後經過的天數	30 天後轉 Nearline
建立日期	特定日期之前的檔案	2023-01-01 前建立
較新版本數	保留最新 N 個版本	保留最新 3 版
自訂中繼資料	符合特定 metadata	status=archived

範例：三層成本優化策略

為作品集網站設定多層規則：

規則 1：最近作品

條件：0-30 天

動作：保持 Standard

月費：$0.02/GB

規則 2：半年內作品

條件：31-180 天

動作：轉為 Nearline

月費：$0.01/GB（省 50%）

規則 3：舊作品

條件：181-365 天

動作：轉為 Coldline

月費：$0.004/GB（省 80%）

規則 4：封存

條件：超過 365 天

動作：轉為 Archive 或刪除

月費：$0.0012/GB（省 94%）

儲存並啟用規則

檢查規則設定無誤後，點擊「建立」

⚠️ 注意事項

規則每天執行一次（非即時）
無法復原（建議先在測試 Bucket 驗證）
轉換為 Archive 後，取回需要額外費用

💡 成本優化最佳實踐

✅ 該做的事

分析存取模式後再設計規則
測試環境先驗證規則效果
定期檢視 Cloud Monitoring
舊備份轉為 Archive

❌ 不該做的事

將頻繁存取的檔案轉 Coldline
忽略資料取回費用
過早刪除重要檔案
未開啟版本管理就刪除

🔬 使用 JSON 設定生命週期規則

建立規則設定檔 lifecycle.json：

{
  "lifecycle": {
    "rule": [
      {
        "action": {"type": "SetStorageClass", "storageClass": "NEARLINE"},
        "condition": {"age": 30, "matchesStorageClass": ["STANDARD"]}
      },
      {
        "action": {"type": "SetStorageClass", "storageClass": "COLDLINE"},
        "condition": {"age": 180, "matchesStorageClass": ["NEARLINE"]}
      },
      {
        "action": {"type": "Delete"},
        "condition": {"age": 365}
      }
    ]
  }
}

套用規則：

gsutil lifecycle set lifecycle.json gs://my-portfolio-frank-2024/

# 查看目前規則
gsutil lifecycle get gs://my-portfolio-frank-2024/

🧪 成本優化測驗

問題：你有 100GB 圖片，每月存取 5 次。使用 Standard 月費 $2，轉為 Nearline 可省多少？（Nearline 儲存 $1/月 + 取回費 $0.01/GB × 5 次）

A. 省 $0.50

B. 省約 $0.50（$2 - $1 - $0.50）

C. 省 $1.00

D. 不划算，反而更貴

🎉 單元總結與檢查清單

🏆

恭喜完成 Unit 02！

你已掌握 Cloud Storage 的核心技能，可以建立並優化作品集網站了！

✅ 你已經學會

✅ 了解 Cloud Storage 的優勢與適用情境
✅ 建立 Bucket 並選擇合適的儲存類別與位置
✅ 上傳檔案並組織資料夾結構
✅ 設定公開存取權限（IAM vs ACL）
✅ 將 Bucket 設定為靜態網站託管
✅ 使用生命週期規則優化成本（最多省 94%）
✅ 使用 gsutil 指令進行批次操作

🎓 知識檢查清單

確認你能回答以下問題：

能說明 Standard、Nearline、Coldline、Archive 的差異與選用時機
理解 IAM 與 ACL 權限管理的差別
知道如何設計生命週期規則節省成本
了解靜態網站託管的設定步驟
能使用 gsutil 指令進行批次檔案操作
理解公開存取的安全風險與防護措施

💡 實際應用場景

案例 1：新創公司官網

Cloud Storage（靜態託管）+ Cloud CDN

成本：約 $1-3/月

優勢：免維護、自動擴展

案例 2：媒體檔案管理

Cloud Storage + 生命週期規則

策略：90 天後轉 Coldline

效果：節省 70% 成本

案例 3：電商產品圖

Standard（新品） → Nearline（6個月） → Coldline（1年）

搭配：Cloud CDN 全球加速

🔧 實作挑戰

挑戰 1：建立個人履歷網站（基礎）

建立 Bucket 並上傳 resume.html、style.css、photo.jpg
設定靜態網站託管
設定生命週期：365 天後轉 Nearline
分享公開連結

挑戰 2：設計成本優化方案（中階）

分析 Bucket 的存取模式（使用 Cloud Monitoring）
設計分層生命週期規則
計算預估節省成本

挑戰 3：建立多語系網站（進階）

建立資料夾：/en/、/zh-tw/、/ja/
上傳不同語言版本
設定適當的 Metadata
使用 gsutil 批次上傳

🐛 常見錯誤回顧

錯誤現象	原因	解決方法
403 Forbidden	權限不足	檢查 IAM 或 allUsers 設定
404 Not Found（靜態網站）	未設定 index.html	確認首頁檔案已上傳且名稱正確
生命週期規則沒生效	未達觸發條件	規則需等待檔案達到設定天數
gsutil 無法執行	未認證	執行 gcloud auth login
網站樣式沒載入	Content-Type 錯誤	檢查 CSS/JS 的 Content-Type