使用 AWS Kiro 與 S3 + CloudFront 打造現代化靜態網站部署流程(一)

aws kiro

xianyu 2025-12-28 21:22:32 ‧ 234 瀏覽

分享至

前言

在這篇文章中，將撰寫如何使用 AWS 所推出的 AI 輔助開發工具 Kiro，結合 Amazon S3 與 CloudFront 建立一個完整的靜態網站部署流程。本文以技術文章網站iThome 為範例!

Demo 影片

網站連結: XianYu Blog

Part 1：認識 AWS Kiro

Kiro 是 AWS 推出的 AI 輔助開發工具，基於 VS Code 架構，整合了 Amazon Q 的 AI 能力。它能夠做到以下功能：

理解自然語言指令並生成程式碼
自動化重複性開發任務
提供智慧程式碼補全與建議
直接與 AWS 服務整合

安裝 Kiro

可以在AWS Consol內部搜尋Kiro

或是由 Kiro 官方網站安裝

安裝過程，依照提示完成安裝

安裝成功後的Kiro畫面!

VS Code 匯入設定與擴充套件

第一次啟動時，可選擇從 VS Code 匯入設定與擴充套件

import from VSCode

初始設定

切換主題

相關套件匯入

跳出提示: 切換為繁體中文介面

Bonus Credit：新用戶會獲得免費額度，可用於 AI 功能

功能簡介

核心功能：

AI 對話助手(點擊右上) - 可以用自然語言描述需求，自動生成程式碼(可選擇Vibe or Spec)
檔案操作 - 直接讀取、編輯、建立專案檔案
終端機整合 - 執行 shell 命令、npm scripts
Git 整合 - 版本控制操作

特色功能：

Specs（規格） - 結構化的功能開發流程，包含需求、設計、實作任務
Steering（導引） - 在 .kiro/steering/ 放置 markdown 檔案，讓 AI 遵循團隊規範
Hooks（鉤子） - 自動化觸發，例如儲存檔案時自動執行測試
Powers - 擴充功能，可整合 MCP servers

操作模式：

Autopilot - AI 自動執行變更
Supervised - 變更後可檢視並還原

Context 功能（# 符號）：

#File / #Folder - 引用特定檔案或資料夾
#Problems - 當前檔案的錯誤
#Terminal - 終端機輸出
#Git Diff - Git 變更
#Codebase - 搜尋整個程式碼庫

Part 2：建立 Hexo 專案

環境準備

確保已安裝以下工具：

Node.js (建議 v18+)
npm 或 yarn
Git

使用範例: 開啟一個聊天欄位

網頁結果

基礎設定:

初始化專案

依序在cmd輸入以下指令:
npm install -g hexo-cli

hexo init my-blog

cd my-blog + npm install

本地預覽

開啟server: hexo server
測試連結，開啟瀏覽器輸入: http://localhost:4000/可預覽網站

按 Ctrl + C 可停止server。

Part 3：AWS 環境配置

安裝相關套件

npm install --save @string-bean/hexo-deployer-aws-s3

開啟my-blog 資料夾

3.1 建立 IAM 用戶，取得訪問密鑰

步驟 1：創建 IAM 用戶（不要用 root 帳戶操作）

為什麼？ Root 帳戶權限太大，不安全。所以需要創建一個專門用於部署的用戶。

登入 AWS Console
- 前往：AWS Console
- 使用 root 帳戶登入
進入 IAM 服務
- 在頂部搜索欄輸入 "IAM"
- 點擊 "IAM" 進入身份和訪問管理
創建新用戶
- 左側菜單點擊 "Users"（用戶、人員）
- 點擊右上角橙色按鈕 "Add users"（新增人員）
設置用戶名
- User name（用戶名）：輸入 hexo-deployer
- 點擊 "Next"（下一步）
設置權限
- 選擇 "Attach policies directly"（直接附加策略）
- 在搜索框搜索並勾選以下兩個策略：
  - AmazonS3FullAccess
  - CloudFrontFullAccess（如果要用 CDN）
- 點擊 "Next"（下一步）
審查並創建
- 檢查信息
- 點擊 "Create user"（創建用戶）
創建訪問密鑰
- 點擊剛創建的用戶 hexo-deployer
- 點擊 "Security credentials"（安全憑證）標籤
- 向下滾動到 "Access keys"（訪問密鑰）部分
- 點擊 "Create access key"（創建訪問密鑰）
- 選擇 "Command Line Interface (CLI)"
- 勾選底部的確認框
- 點擊 "Next"
- 點擊 "Create access key"
重要：保存密鑰
- 你會看到：
  - Access key ID（訪問密鑰 ID）：類似 AKIA****************
  - Secret access key（私密訪問密鑰）：****************************************
- 立即複製並保存到安全的地方！
- 這是唯一一次可以看到 Secret access key！
- 點擊 "Download .csv file"（下載 CSV 文件）備份
- 點擊 "Done"

3.2 建立 S3 Bucket

步驟：

進入 S3 服務
- 在頂部搜索欄輸入 "S3"
- 點擊 "S3" 進入
創建 Bucket
- 點擊橙色按鈕 "Create bucket"（創建儲存桶）
基本設置
- 右上角 AWS Region（區域）：選擇離你最近的
  - 在台灣可以使用：ap-northeast-1（東京）或：ap-southeast-1（新加坡）
- Bucket name（儲存桶名稱）：輸入唯一名稱
  - 例如：xian-hexo-blog-2025（必須全球唯一，只能小寫字母、數字、連字符）
  - ⚠️ 記住這個名稱，後面會用到！
公開訪問設置
- 取消勾選 "Block all public access"（阻止所有公開訪問）
- 會出現警告，勾選確認框：
  ✅ "I acknowledge that the current settings might result in this bucket and the objects within becoming public"
其他設置保持默認
- Bucket Versioning：保持 Disabled
- Tags：可以不填
- Default encryption：保持默認
創建
- 滾動到底部，點擊橙色按鈕 "Create bucket"

啟用靜態網站託管：

進入你的 Bucket
- 在 S3 列表中點擊你剛創建的 bucket 名稱
進入屬性設置
- 點擊 "Properties"（屬性）標籤
啟用靜態網站託管

Hosting a static website using Amazon S3 User Guide

滾動到最底部找到 "Static website hosting"（靜態網站託管）
點擊右側 "Edit"（編輯）
選擇 "Enable"（啟用）
Hosting type：選擇 "Host a static website"
Index document：輸入 index.html
Error document：輸入 404.html
點擊 "Save changes"（保存更改）

記錄網站端點
- 返回 Properties 標籤
- 在 "Static website hosting" 部分
- 看到 "Bucket website endpoint"（儲存桶網站端點）
- 類似：http://xian-hexo-blog-2025.s3-website-ap-northeast-1.amazonaws.com
- 這是目前的網站地址！

尚未配置完成，現在直接點選會有403 Forbidden 問題

設定 Bucket Policy：

進入權限設置
- 點擊 "Permissions"（權限）標籤
編輯 Bucket Policy
- 滾動到 "Bucket policy"（儲存桶策略）部分
- 點擊 "Edit"（編輯）

添加策略

在編輯器中貼上以下內容：

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

重要：請將 your-bucket-name替換為你的 bucket 名稱
- 例如：arn:aws:s3:::xian-hexo-blog-2025/*
點擊 "Save changes"（保存更改）

3.3 安裝與配置 AWS CLI

安裝：

下載 AWS CLI
- 前往：AWS 命令列界面官方安裝指南
- 點擊 Windows 標籤
- 下載 MSI 安裝程序（64 位)
- 運行安裝程序，按默認選項安裝
驗證安裝
- 打開命令提示符（CMD）
- 輸入：
```
aws --version
```
- 可以看到版本信息
配置 AWS CLI
- 在 CMD 中輸入：
```
aws configure
```
- 按提示輸入：
  - AWS Access Key ID：輸入步驟 1 保存的 Access Key ID
  - AWS Secret Access Key：輸入步驟 1 保存的 Secret Access Key
  - Default region name：輸入你的 bucket 區域（如 ap-northeast-1）
  - Default output format：輸入 json

Part 4：配置 Hexo 部署

安裝部署套件

在cmd輸入

npm install --save @string-bean/hexo-deployer-aws-s3

打開項目文件夾
- 在 CMD 中進入你的 Hexo 項目目錄
```
cd 你的專案路徑
```

編輯 _config.yml

用文本編輯器打開 _config.yml
找到最底部的 deploy: 部分
修改為：

deploy:
  type: aws-s3
  bucket: your-bucket-name  # 改為你的 bucket 名稱
  region: ap-northeast-1      # 改為你的區域

3. 更新網站 URL

在同一個 _config.yml 文件中
找到頂部的 url: 設置
修改為你的 S3 網站端點(目前的網站URL)：

url: http://xian-hexo-blog-2025.s3-website-ap-northeast-1.amazonaws.com

4. 保存文件

部署指令

清理舊文件
在cmd輸入
```
# 清理快取
npm run clean
```

生成靜態文件
在cmd輸入
```
# 生成靜態檔案
npm run build
```

你會看到生成了 public 文件夾
這裡面是你的網站所有文件

部署到 AWS
在cmd輸入
```
# 部署至 S3
npm run deploy
```
- 第一次可能需要幾分鐘
- 你會看到上傳進度
- 完成後會顯示成功信息
開啟網站
- 打開瀏覽器
- 訪問你的 S3 網站端點
- 你的網站成功上線了！

基礎Hexo語法統整

創建新文章
```
npx hexo new post "我的第一篇文章"
```
- 會在 source/_posts/ 創建新的 markdown 文件
- 編輯這個文件寫內容
本地預覽
```
npm run server
```
- 打開瀏覽器訪問 http://localhost:4000
- 檢查效果
- 按 Ctrl+C 停止服務器
部署更新
```
npm run clean
npm run build
npm run deploy
```
- 等待上傳完成
- 刷新你的網站查看更新

Part 5：配置 CloudFront CDN

什麼是 CloudFront？

CloudFront 是 AWS 的 內容傳遞網路 (CDN)，它將你的網站內容快取到全球各地的邊緣節點，讓用戶可以從最近的伺服器獲取內容，大幅提升載入速度。

核心概念

Distribution（分發）

一個 CloudFront Distribution 就是一個 CDN 配置，包含：

Origin（來源）：內容的原始位置（如 S3 bucket）
快取設定
SSL/HTTPS 設定
地理限制等

Origin（來源）

內容的原始儲存位置，可以是：

Amazon S3 bucket
EC2 實例
Elastic Load Balancer
任何 HTTP 伺服器

Edge Location（邊緣節點）

全球超過 400 個節點，分布在：

北美洲
歐洲
亞洲（包含東京、新加坡、香港等）
南美洲
澳洲

為什麼需要 CloudFront？

功能	說明
HTTPS	S3 靜態網站僅支援 HTTP，CloudFront 提供免費 SSL
全球加速	內容快取至全球邊緣節點
DDoS 防護	內建 AWS Shield Standard
壓縮	自動壓縮 HTML/CSS/JS

範例: 本專案的 CloudFront 設定

項目	值
Distribution Domain	`dkjuqtsbwj2f8.cloudfront.net`
Origin	`xian-hexo-blog-2025.s3-website-ap-northeast-1.amazonaws.com`
Protocol	HTTPS（自動重定向 HTTP）
Price Class	使用全部邊緣節點

網站網址

HTTPS（推薦）

https://dkjuqtsbwj2f8.cloudfront.net

原始 S3 網址（HTTP）

http://xian-hexo-blog-2025.s3-website-ap-northeast-1.amazonaws.com

常用操作

清除快取（Invalidation）

當你更新網站內容後，需要清除 CloudFront 快取：

進入 CloudFront Console
選擇你的 Distribution
點擊「無效判定」(Invalidations) 標籤
點擊「建立無效判定」
輸入路徑：/*（清除所有快取）
點擊「建立」

查看統計數據

CloudFront 提供詳細的統計數據：

請求數量
資料傳輸量
快取命中率
熱門物件
訪客地理分布

建立 Distribution

進入 CloudFront 服務
點擊 Create distribution 按鈕
選擇 free plan
輸入distribution名稱
配置Origin: 在 Origin domain 欄位輸入： your-bucket.s3-website-ap-northeast-1.amazonaws.com
- 不需要選 WAF
按下建立

查詢 Distribution 狀態

使用 CloudShell 或本地終端機查詢狀態

aws cloudfront list-distributions \
  --query "DistributionList.Items[*].[Id,DomainName,Status]" \
  --output table

清除Cache（Invalidation）

當網站內容更新後，需清除 CDN Cache：

aws cloudfront create-invalidation \
  --distribution-id YOUR_DISTRIBUTION_ID \
  --paths "/*"

提示：在瀏覽器按 Ctrl + Shift + R 可強制刷新頁面。

Part 6：進階功能 - 自訂主題

建立主題目錄結構

# 建立主題資料夾
mkdir -p themes/fast-theme/layout/partial
mkdir -p themes/fast-theme/source/css
mkdir -p themes/fast-theme/source/js

主題配置

在 _config.yml 中指定主題：

theme: fast-theme

常見問題排解

Q1: 部署後網站顯示 403 Forbidden

原因：Bucket Policy 未正確設定或 Block Public Access 未關閉。

解決方案：

確認已取消勾選 Block Public Access
確認 Bucket Policy 中的 Resource ARN 正確

Q2: CloudFront 更新後內容未變化

原因：CDN 快取尚未過期。

解決方案：

aws cloudfront create-invalidation \
  --distribution-id YOUR_ID \
  --paths "/*"

Q3: hexo deploy 失敗

原因：AWS 憑證未正確配置。

解決方案：

aws configure
# 重新輸入 Access Key 與 Secret Key

成本估算

服務	免費方案	超出後費用
S3	5GB 儲存 / 20,000 GET	~$0.023/GB
CloudFront	1TB 傳輸 / 10M 請求	~$0.085/GB
Route 53	-	$0.50/hosted zone

對於小型部落格，通常可維持在免費方案範圍內。

熱門推薦

{{ item.channelVendor }} | {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

902 組

團體組數

37 組

累計文章數

19854 篇

完賽人數

528 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react

IT邦幫忙

使用 AWS Kiro 與 S3 + CloudFront 打造現代化靜態網站部署流程(一)

前言

Demo 影片

Part 1：認識 AWS Kiro

安裝 Kiro

安裝過程，依照提示完成安裝

VS Code 匯入設定與擴充套件

初始設定

功能簡介

核心功能：

特色功能：

操作模式：

Context 功能（# 符號）：

Part 2：建立 Hexo 專案

環境準備

基礎設定:

初始化專案

本地預覽

Part 3：AWS 環境配置

開啟my-blog 資料夾

3.1 建立 IAM 用戶，取得訪問密鑰

步驟 1：創建 IAM 用戶（不要用 root 帳戶操作）

3.2 建立 S3 Bucket

步驟：

啟用靜態網站託管：

設定 Bucket Policy：

3.3 安裝與配置 AWS CLI

安裝：

Part 4：配置 Hexo 部署

安裝部署套件

部署指令

基礎Hexo語法統整

Part 5：配置 CloudFront CDN

什麼是 CloudFront？

核心概念

Distribution（分發）

Origin（來源）

Edge Location（邊緣節點）

為什麼需要 CloudFront？

範例: 本專案的 CloudFront 設定

網站網址

HTTPS（推薦）

原始 S3 網址（HTTP）

常用操作

清除快取（Invalidation）

查看統計數據

建立 Distribution

查詢 Distribution 狀態

清除Cache（Invalidation）

Part 6：進階功能 - 自訂主題

建立主題目錄結構

主題配置

常見問題排解

Q1: 部署後網站顯示 403 Forbidden

Q2: CloudFront 更新後內容未變化

Q3: hexo deploy 失敗

成本估算

尚未有邦友留言

標記使用者