經過前面一連串的實作，AI Recipe 已經具備基本的食譜推薦、條件選擇和收藏功能。

不過，目前網站主要還是在自己的電腦上執行。

今天要認識網站部署，讓專案可以透過網路被其他人使用。

一、什麼是網站部署？

網站部署（Deployment）就是將自己開發完成的網站放到伺服器或雲端平台，讓其他人可以透過網址連線使用。

這次的專案包含：

• HTML、CSS、JavaScript 前端。
• Node.js、Express 後端。
• Dify AI API。

因此，部署時需要同時考慮前端和後端。

二、準備專案資料夾

目前專案可以整理成以下結構：

AI-Recipe/
│
├── public/
│   ├── index.html
│   ├── style.css
│   └── script.js
│
├── server.js
├── package.json
├── package-lock.json
├── .env
└── .gitignore

在 server.js 中，加入提供前端靜態檔案的設定：

app.use(express.static("public"));

這樣 Express 就能提供 public 資料夾中的網頁檔案。

三、準備啟動指令

在 package.json 中設定：

{
  "scripts": {
    "start": "node server.js"
  }
}

之後就可以透過：

npm start

啟動後端伺服器。

四、部署前要注意什麼？

部署時需要確認：

1. 前端檔案有放在正確的資料夾。
2. 後端可以正常啟動。
3. 雲端平台已設定環境變數。
4. API 請求網址使用相同網站的 /api/recipe 路徑。
5. 部署平台支援目前使用的 Node.js 版本。

完成設定後，就可以將專案部署到支援 Node.js 的雲端平台。

五、今天的成果

今天整理了專案結構，也了解前端與後端部署的差異。

網站部署不只是把 HTML 檔案放到網路上，還需要讓後端和 AI API 能夠正常運作。

下一篇要進行完整測試，確認網站各項功能是否都能正常使用。