Part 9：Netlify 部署實戰

Serverless Functions 雲端部署

從本機到全球可訪問的 AI 對話應用

使用鍵盤 ← → 或點擊下方按鈕切換投影片

為什麼選擇 Netlify？

🆓

免費方案

每月 125,000 次函數調用
100GB 頻寬

⚡

全球 CDN

內容分發到全球節點
訪問速度極快

🔧

Serverless

無需管理伺服器
Python 函數即可

🔄

自動部署

Git 推送自動更新
開發流程順暢

Netlify 非常適合部署包含 AI API 的靜態網頁應用！

Netlify 專案結構

.7佈署Netlify/
├── index.html           # AI 聊天介面（前端）
├── netlify.toml         # Netlify 設定檔
├── netlify/
│   └── functions/       # Serverless 函數目錄
│       ├── chat.py      # 後端 API（支援雙 AI）
│       └── requirements.txt
└── 佈署過程.txt         # 部署步驟說明
            

前端 (index.html)

聊天介面，可選擇 OpenAI 或 Google Gemini

後端 (chat.py)

Serverless Function，處理 AI API 調用

netlify.toml 設定檔

這個檔案告訴 Netlify 如何建置和部署你的應用。

# netlify.toml
[build]
  functions = "netlify/functions"   # 函數目錄
  publish = "."                     # 發布根目錄

[build.environment]
  PYTHON_VERSION = "3.10"           # Python 版本

[[redirects]]
    from = "/api/*"                 # API 路由
    to = "/.netlify/functions/:splat"
    status = 200
            

redirects 設定讓 /api/chat 自動對應到 Netlify Function！

chat.py 後端函數

import json, os
from openai import OpenAI
import google.generativeai as genai

def handler(event, context):
    # 解析請求
    data = json.loads(event['body'])
    user_message = data.get('message', '')
    provider = data.get('provider', 'openai')

    # 根據選擇呼叫不同 API
    if provider == 'google':
        ai_message = call_google_api(user_message)
    else:
        ai_message = call_openai_api(user_message)

    return {
        'statusCode': 200,
        'body': json.dumps({'message': ai_message})
    }
            

支援雙 AI 模型：OpenAI GPT-5.6 Terra 和 Google Gemini！

前端聊天介面

主要功能

AI 模型選擇器（OpenAI / Google Gemini）
即時對話介面
顯示回覆來源（哪個 AI 回答）
響應式設計，支援手機

<!-- 模型選擇器 -->
<select id="aiProvider">
    <option value="openai">OpenAI GPT-5.6 Terra</option>
    <option value="google">Google Gemini</option>
</select>
            

使用者可以即時切換不同的 AI 模型進行對話！

CLI 部署：安裝 Netlify CLI

1確保已安裝 Node.js（從 nodejs.org 下載）

2全域安裝 Netlify CLI

npm install -g netlify-cli

3驗證安裝成功

netlify --version

應該會顯示類似 netlify-cli/17.x.x 的版本號

CLI 部署：登入 Netlify

1執行登入命令

netlify login

2瀏覽器會自動開啟，登入你的 Netlify 帳號

3點擊「Authorize」授權 CLI

授權成功後，終端機會顯示「You are now logged in!」

如果還沒有 Netlify 帳號，請先到 netlify.com 註冊（可用 GitHub 登入）

CLI 部署：執行部署

1進入專案目錄

cd .7佈署Netlify

2執行部署命令

netlify deploy --prod

3依照提示選擇：

Create & configure a new site（建立新網站）
選擇 Team（通常是你的帳號名稱）
輸入網站名稱（會成為 xxx.netlify.app）

設定環境變數（API Keys）

部署成功後，需要在 Netlify 後台設定 API 金鑰。

1登入 Netlify 網站，進入你的專案

2點擊 Site configuration → Environment variables

3新增以下環境變數：

Key	Value
`OPENAI_API_KEY`	sk-proj-你的OpenAI金鑰
`GOOGLE_API_KEY`	你的Google AI金鑰（選填）

環境變數設定後需要重新部署才會生效！

替代方案：網頁後台部署

如果不想用 CLI，也可以直接在 Netlify 網站操作。

1將專案推送到 GitHub

2登入 app.netlify.com

3點擊「Add new site」→「Import an existing project」

4選擇 GitHub，授權並選擇你的 Repository

5設定 Environment variables，然後點擊 Deploy

之後每次 git push，Netlify 會自動重新部署！

測試你的 AI 應用

1開啟你的網站網址：

https://你的網站名稱.netlify.app

2在聊天框輸入訊息測試

3切換 AI 模型，測試兩種 API

測試 OpenAI

選擇 OpenAI GPT-5.6 Terra
發送「你好，請自我介紹」

測試 Gemini

選擇 Google Gemini
發送相同問題比較回覆

常見問題排解

Function 錯誤

檢查 netlify/functions/ 路徑是否正確
確認 requirements.txt 存在

API 無回應

確認環境變數已設定
重新部署讓設定生效

CORS 錯誤

chat.py 已包含 CORS 處理
檢查 OPTIONS 處理是否正確

Python 版本

確認 netlify.toml 設定
PYTHON_VERSION = "3.10"

在 Netlify 後台的 Functions 頁面可以查看執行日誌！

查看部署日誌

在 Netlify 後台查看

進入 Site → Deploys：查看部署歷史
進入 Site → Functions：查看函數執行狀態
點擊 chat 函數：查看即時日誌

本地測試

netlify dev

這會在本機啟動 Netlify 開發伺服器，模擬雲端環境進行測試。

本地測試成功後再部署到雲端，可以減少除錯時間！

恭喜完成 Netlify 部署！

你學到了

Netlify Serverless Functions 架構
netlify.toml 設定檔撰寫
CLI 部署流程（netlify deploy）
環境變數設定（API Keys）
雙 AI 模型支援（OpenAI + Gemini）
問題排解與日誌查看

你的 AI 對話應用現在全球都可以訪問了！

← 返回課程首頁