DEPLOYMENT_GUIDE.md

Hugging Face Spaces 部署指南

快速部署步驟

1. 建立新的Hugging Face Space

1. 前往 https://huggingface.co/spaces
2. 點擊 "Create new Space"
3. 設定如下：
   • Space name: travel-list-app (或您喜歡的名稱)
   • License: MIT
   • SDK: Gradio
   • Hardware: CPU basic (免費)
   • Visibility: Public

2. 上傳檔案

將以下檔案上傳到您的Space：

📁 必要檔案清單：
├── app.py                    # Gradio入口檔案
├── requirements.txt          # Python依賴
├── README.md                # 專案說明
└── src/
    ├── main.py              # Flask主程式
    ├── models/
    │   └── travel.py        # 資料模型
    ├── routes/
    │   └── travel.py        # API路由
    ├── static/              # 前端檔案
    │   ├── index.html
    │   └── assets/
    └── database/
        └── app.db           # SQLite資料庫檔案

3. 使用Git上傳 (推薦)

# 1. 複製您的Space repository
git clone https://huggingface.co/spaces/YOUR_USERNAME/SPACE_NAME
cd SPACE_NAME

# 2. 複製專案檔案
cp -r /path/to/travel_list_backend/* .

# 3. 提交並推送
git add .
git commit -m "Deploy travel list app"
git push

4. 檢查部署

• 上傳完成後，Hugging Face會自動開始建置
• 在Space的 "Logs" 標籤查看建置進度
• 建置成功後，應用程式將在Space URL上可用

檔案說明

app.py

• Hugging Face Spaces的入口檔案
• 使用Gradio包裝Flask應用程式
• 在背景執行Flask服務

requirements.txt

• 包含所有必要的Python依賴
• 包括Flask、SQLAlchemy、CORS、Gradio等

src/main.py

• Flask應用程式的主要入口
• 設定路由、資料庫、CORS等

src/models/travel.py

• 定義TravelList和TravelItem資料模型
• 使用SQLAlchemy ORM

src/routes/travel.py

• 定義所有API端點
• 處理CRUD操作

src/static/

• 包含建置好的React前端檔案
• 由Flask直接提供服務

常見問題

Q: 部署後無法存取？

A: 檢查Logs標籤是否有錯誤訊息，確保所有檔案都已正確上傳。

Q: 資料庫錯誤？

A: 確保database/app.db檔案已上傳，或讓應用程式自動建立。

Q: 前端無法載入？

A: 確保static/目錄包含所有建置檔案，特別是index.html。

Q: API呼叫失敗？

A: 檢查CORS設定，確保前端使用相對路徑呼叫API。

測試清單

部署後請測試以下功能：

• 首頁正常載入
• 可以建立新清單
• 可以使用代碼進入清單
• 可以新增旅遊項目
• 核取方塊功能正常
• 完成項目移到底部
• 編輯和刪除功能正常
• 多個瀏覽器標籤同步更新

支援

如有問題，請檢查：

1. Hugging Face Space的Logs標籤
2. 瀏覽器開發者工具的Console
3. 確保所有檔案都已正確上傳