作者：周彥廷
創作日期：西元2025年12月30日
點擊上方的語言選單以切換語言
從外語教學靜態作品，邁向資工全端動態系統的轉職實踐
過去我利用 GitHub Pages 創作了日文教學網站、數位樂器的性能分析、開放世界的世界觀設定、世界三大人種介紹、吸血鬼文化探討、武器數據視覺化、揭穿宗教系列等多項作品。本次專案則實現了從「靜態內容展示」到「動態數據管理」的技術跨越：
以下是將全端應用從本地端遷移至生產環境的關鍵技術細節：
將本地 PostgreSQL 結構導入雲端。透過 application.properties 配置 JDBC 連線，並利用 HikariCP 進行高效連線池管理。
撰寫 Dockerfile 以確保 JDK 17 環境一致性。將 .jar 封裝後，在 Render 平台設定環境變數（如 SPRING_DATASOURCE_URL），達成配置與程式碼分離。
利用 Vercel 託管靜態資源，並設定 vercel.json 的 Rewrites 規則以解決 Vue Router History Mode 導致的 404 問題。
在 SecurityConfig 中精確放行 Vercel 網域，並將 HttpMethod.OPTIONS 設為最優先，確保瀏覽器預檢請求通過。
實踐 Stateless 認證機制，讓使用者狀態由 JWT 承載，解決雲端重啟導致的 Session 遺失問題。
資工開發核心觀念：檔案存放 (Storage) 不等於 環境執行 (Runtime)。雖然 GitHub Pages 可存放原始碼，但無法提供程式運行的底層環境。
| 特性 / 平台 | GitHub Pages | Vercel | Render / Supabase |
|---|---|---|---|
| 託管類型 | 靜態檔案服務 (File Server) | 前端渲染環境 (Rendering) | 邏輯運算與資料持久化 |
| 代碼儲存能力 | ✅ 可存 .java / .swift 等原始碼 | ✅ 存儲前端框架代碼 | ✅ 存儲後端與 SQL 邏輯 |
| 程式執行能力 | ❌ 僅能下載，無法執行編譯後的邏輯 | △ 支援前端 JS 邏輯 | ✅ 完整支援 (JVM / Docker 執行環境) |
| 資料庫連線 | ❌ 瀏覽器端直接連線具安全性風險 | △ 需透過 API 轉發 | ✅ 原生支援 (JDBC 穩定通訊) |
| 本專案定位 | 存放技術文檔，供使用者下載與閱讀 | 運行 UI，負責與使用者互動 | 執行 Spring Boot，處理核心業務邏輯 |
從畢業於嘉大外語系到進入逢甲資工學士後專班，這不僅是職涯的轉換，更是一場思維的革命。
在開發這份全端專案的過程中，我獲得了一個核心啟發：「代碼的價值不僅在於被存放，更在於被執行。」
過去在 GitHub Pages 上的靜態作品讓我學會了如何呈現資訊，但我也深刻體會到，雖然 GitHub Pages 能存放 Spring Boot 或 Swift 的原始碼，但那裡缺乏運行的環境（Runtime）。這正是資工領域最迷人的地方——我們必須為不同的代碼尋找正確的舞台。
透過本次專案，我成功建立了具備生產等級安全性、高效運行的 外語書籍電商生態系。 我不再只是寫出漂亮的文字（外語），更開始學習建構能運轉的系統（資工）。這是我對「內容感性」與「架構理性」結合的終極實踐。