AI 商用網站開發跟著步驟，做出自己的作品

跟著步驟操作，實際結果自己確認。

返回剛才的步驟

在自己的電腦開啟 HTTP 預覽

第16堂的草稿練習統一使用本機 HTTP。這是自己的練習預覽，不是公開發布；第1–15堂能正常直接開檔時仍可沿用原方式。

1．先確認 Node.js

在 Cursor 選單開啟「終端機／Terminal → 新增終端機／New Terminal」，輸入：

node --version

看到 v22 或以上可繼續。若顯示找不到命令，先到 Node.js 官方下載選擇自己系統的 LTS 安裝程式：Windows 使用 .msi、macOS 使用 .pkg。安裝後關閉並重開 Cursor，再執行相同命令。不要只因終端顯示錯誤就貼入來路不明的安裝指令。

2．下載工具與整理位置

下載本機預覽工具，解壓後將 preview-tools 放進自己的 student-work。工具不需 npm install、不會修改網站，不需要提供帳密。

student-work/
├── preview-tools/
│   ├── preview.mjs
│   └── START_PREVIEW.html
├── service-site/
│   └── frontend/
│       ├── index.html
│       └── inquiry.html
└── fault-L16/
    └── service-site/
        └── frontend/
            ├── inquiry.html
            └── draft-test.html

用 Cursor「開啟資料夾」選 student-work，再新增終端機；終端提示的位置應是 student-work。先核對目錄名稱；若資料夾名稱與圖不同，指令的 --root 要改成自己實際的位置。含空白的路徑用雙引號包住。以下命令在 macOS/Linux 與 Windows PowerShell 相同。

3．啟動正常表單

node preview-tools/preview.mjs --root service-site/frontend --port 8791

保持這個終端開啟。看到預覽網址後，在瀏覽器開 http://127.0.0.1:8791/inquiry.html。若自己的正常作品在 L16/service-site/frontend，改用 --root L16/service-site/frontend；不要移走原資料。

4．另開故障練習

下載第16堂故障包，整個 service-site 放入 fault-L16。在 Cursor 另開第二個終端，仍從 student-work 執行：

node preview-tools/preview.mjs --root fault-L16/service-site/frontend --port 8792

開 http://127.0.0.1:8792/draft-test.html 放入虛構資料，再按頁面中的連結去故障表單。故障表單及資料測試頁使用專屬 qinghe.inquiryDraft.faultL16.v1，不會改正常表單的 qinghe.inquiryDraft.v1；不同埠也分開瀏覽器來源。請一直用同一個故障網址測試，避免把 127.0.0.1 換成 localhost 造成看不到原測試草稿。

5．檢查與停止

  1. 正常表單存一份虛構草稿A；在故障頁放壞JSON；回正常頁按還原，仍應得到A。
  2. 儲存HTML/CSS/JS後重整對應網址；重新整理不會自動重建程式。
  3. 網址404：核對 --root 指向含 inquiry.html 的 frontend，不是外層 service-site。工具不會列出整個資料夾內容。
  4. 埠被占用：回該工具的終端按 Ctrl+C，再重新啟動。不要關掉不認識的服務。
  5. 做完後在兩個預覽終端各按 Ctrl+C；只停止工具，檔案與草稿不會被刪除。

第17堂起改用提供的 Node 教學後端（預設8780），不用這個靜態工具取代API。8791／8792是本堂操作位置，不需要購買主機或上傳到網路。

返回剛才的步驟