經過連續 16 天的奮戰，我們的「AI 智慧用藥監測系統」已經在本地端（Localhost）具備了完整的功能與流暢的 UI/UX。但身為一個現代網頁開發者，作品只留在自己的電腦裡太可惜了。

今天，我們要把這套系統正式部署（Deploy）到網路上，讓你能夠把網址傳給朋友、家人，甚至是未來的面試官，讓大家都能在自己的手機或電腦上實際使用你的作品！我們將使用目前在前端界非常受歡迎、對 React 與 Vite 支援度極高的免費託管平台：Vercel。

Step 1：確保程式碼已同步至 GitHub

1. 在 Codespaces 左側的活動列，點擊「原始碼控制」(Source Control) 的分支圖示。
2. 在訊息框輸入你的提交紀錄（例如：feat: 完成用藥系統核心與排序功能）。
3. 點擊「提交 (Commit)」後，再點擊「同步變更 (Sync Changes)」，將程式碼完整推送到 GitHub 上。
   

Step 2：登入 Vercel 並匯入專案

1. 請開啟瀏覽器，前往 Vercel 官方網站。
2. 點擊右上角的「Sign Up」或「Log In」，並選擇 Continue with GitHub，授權 Vercel 存取你的 GitHub 帳號。
3. 登入成功後，在 Dashboard 儀表板點擊右上角的「Add New...」 ➔ 「Project」。
4. 在 Import Git Repository 的區塊中，找到你這次鐵人賽的專案（例如 medication-tracker-ai），點擊旁邊的「Import」按鈕。

Step 3：確認建置設定與一鍵發布

進入設定畫面後，會發現 Vercel 非常聰明，它已經自動偵測到專案是使用Vite打包工具所建立的。

1. Project Name：你可以自訂一個喜歡的網址前綴，或者直接使用預設名稱。
2. Framework Preset：確認這裡顯示的是 Vite。
3. Build and Output Settings：完全不需要修改，Vercel 知道 Vite 的預設打包指令是 npm run build，輸出的資料夾是 dist。
4. 點擊最下方的「Deploy」 按鈕

跑好之後就會出現以下，就代表今天的任務完成