iT邦幫忙

2026 iThome 鐵人賽

DAY 28
0
Vibe Coding

與Claude一起從零打造產值評估工具系列 第 28

Day 28 | Claude Vibe Coding的工具成功用Vercel上線,但卻在Vercel遇到問題

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20260830/201831968Tl6gaLEDB.png

昨天在製作過程中發現了一個問題

  • 產業挑選後,進到評估模型的選擇,但模型選擇的認定只會使用默認的產業,不會變成其它的產業

因此今天首要任務是修正這個問題
然後因為之前用Claude製作的這個工具
在 localhost 執行了28天之久
那今天終於要來搬家,將工具放上 Vercel Hobby

一、今日目標

完成部署:

  • 修正模型判定之默認
  • GitHub main 分支 → Vercel 自動 build → 正式網址
  • 在正式環境跑完整條上線檢查清單

二、先進行修正

我給Claude的prompt

問題: 產業挑選後,進到評估模型的選擇,但模型選擇的認定,只會認定腳踏車產業,不會變成其他的,應該是要我產業地圖選什麼,不管前後都要能對接上才對
請修正

CLaude給我的回覆
https://ithelp.ithome.com.tw/upload/images/20260830/20183196jHze83ObEo.png

經確認結果
以下為驗收的情況

https://ithelp.ithome.com.tw/upload/images/20260830/20183196YLgCZLD1cY.png

模型選擇後跳出的儀表板介面
https://ithelp.ithome.com.tw/upload/images/20260830/20183196zxcZnfSU7k.png
終於連上線了

三、上線後的部署路徑

https://ithelp.ithome.com.tw/upload/images/20260830/201831964m7cysNU8q.png

push → Vercel 偵測 → prebuild 跑 sync-data.mjs(Day 11 的老朋友)→ next build 全靜態化 → 上 CDN。全站無伺服器端運算,Vercel 對這種站幾乎是白送。

四、上線檢查清單

正式網址(不是 localhost)逐項走:完整八步流程 ✓、手機實機的圖譜手勢與匯出 PDF ✓、meta 基準期正確顯示 ✓、示範資料警語如實顯示(誠實上線,不藏)✓、localStorage 在正式網域可寫 ✓、Lighthouse 效能與無障礙皆 ≥ 90 ✓。
https://ithelp.ithome.com.tw/upload/images/20260830/20183196z6SxhDuUID.png

五、遇到上線問題

在Github完成資料上傳,並將之鏈結到Vercel後
完成了所有設定
卻出現了一個問題
網站呈現不出來
居然 404!!!!
因此我讓Claude幫我協助看了一下
問題可能有幾個原因

https://ithelp.ithome.com.tw/upload/images/20260830/20183196DvgLrfxh6T.png

第一次檢查結果
仍然依樣
因此在嘗試了一次
第二次的檢查
終於檢查到原因
因為我貪圖方便
在Vercel中
Framework Preset 我是以 Other來進行
但這中間的問題點在於
我是用upload的方式在Vercel建立
這讓Vercel無法辨別 我上傳的資料是 Next.js

因此再次嘗試後
終於成功
https://ithelp.ithome.com.tw/upload/images/20260830/201831966uUCSOmcDv.png

六、今日小結

今天的經驗來說
首先工具內部的修正
這個是最難也是最重要的
因為需要一一驗證
才有辦法完全的顧到

另外我覺得部屬工具上線不難,但問題點就是
不能太隨興地做
因為我為了貪圖方便
所以沒有指定為 next.js
讓Vercel沒法判定
才造成上線後的問題
那後續兩天我將會在嘗試後
再次檢查工具執行結果並修正之
避免實際應用上會出現問題
當然現在的結果是能做為參考的
不過後面我還是要再來進行相關修正


上一篇
Day 27 | 工具大檢查,卻發現出現資料餵入前後的重大差異問題~
系列文
與Claude一起從零打造產值評估工具28
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言