前言

恭喜你！我們已經完成了網站的設計、登入系統、儀表板與各項互動功能，接下來，就是讓大家可以「真的打開你的網站」的最後一步——上線部署。

這一篇，我們將會教你用最簡單的方法，不需要註冊帳號、不需要登入平台，直接把網站丟上網！

---

最簡單的部署方式：使用 Netlify Drop

如果你已經有一個 dist/ 或 build/ 資料夾（也就是網站打包後的結果），現在只需要三個步驟：

步驟一：打包網站

如果你使用的是 Vite、React、Next.js 等框架，通常只要在終端機執行打包指令：

npm run build

打包完後，會產生一個 dist 或 build 資料夾，裡面就是靜態網站內容。

步驟二：打開 Netlify Drop 網站

前往 https://app.netlify.com/drop 這是一個支援拖曳上傳的簡單工具。

步驟三：把 dist 資料夾拖進去

你只需要把整個資料夾（不是裡面的檔案，而是整個資料夾）直接拖進瀏覽器畫面中。

幾秒鐘後，Netlify 就會給你一個線上網址（像是 https://yourproject.netlify.app )，馬上可以開啟瀏覽、分享！

額外的步驟

若是之後有更改內容，只需要點選左方的 Deploys，拉到最下面點選 browse to upload，即可重新上傳檔案喔。

記得調整 Authgear 的設定

因為我們用了 Authgear 作為登入系統，正式上線後也要告訴 Authgear：「我的網站換網址了！」

請回到 Authgear 控制台，更新以下兩個欄位：

- Authorized Redirect URIs

- Post Logout Redirect URIs

將 http://localhost:3000/auth-redirect 換成：

https://my-first-band-system.netlify.app/

（修改成你改好的路徑）

記得按下 Save 儲存。

---

測試部署結果

請打開 Netlify 給你的網址，進行以下檢查：

- 是否可以正常顯示首頁？

- 點登入按鈕，是否會跳轉 Authgear？

- 登入後是否會進入儀表板？

- 點登出，是否會跳回首頁？

- 不同裝置下（手機／桌機）是否有排版錯亂？

---

常見測試問題

1. Authgear OAuth Redirect URI 設定錯誤

問題現象：登入時出現 redirect URI is not allowed。

原因：Authgear Portal 的 Redirect URIs 沒有加上你實際用來登入的網址（本地或 Netlify）。

解法：在 Authgear Portal 新增正確的 redirect URI（本地開發和 Netlify 上線網址都要加）。

---

2. React Router 路由未正確設置

問題現象：登入後導回 /AuthgearCallback 出現 404。

原因：React Router 沒有設置 /AuthgearCallback 路由，或 import/export 有誤。

解法：在 App.tsx 正確設置” <Route path=“/AuthgearCallback” element={} />” 並確認 import/export 元件。

---

3. Netlify SPA 404 問題（redirects 設定）

Netlify 部署 SPA 時，若沒設 _redirects，直接訪問子路由會出現 404。

解法：在 public/_redirects 檔案加入

/* /index.html 200

請注意，這一行必須完全沒有多餘空白或錯誤，內容就是：

/* /index.html 200

然後重新部署，這樣就能讓 SPA 路由在 Netlify 上正常運作！

---

4. _redirects 檔案格式錯誤

如果 _redirects 開頭有空白或格式錯誤，Netlify 不會生效。

解法：確保內容沒有多餘空白，正確格式如下：

/* /index.html 200

---

結語

雖然我們已經成功將網站部署到網路上，並解決了常見的坑，但這僅僅是網站開發的起點。未來還有許多功能、優化與挑戰等著我們去探索與克服。

不過俗話說：「千里之行，始於足下。」只要我們不斷學習、不斷嘗試，終有一天能夠登堂入室，打造出屬於自己的理想網站。