經過 30 天的持續努力，我們已經完成了專案的開發。今天，作為最終章，我們將重點介紹如何將整個專案部署到 Vercel，讓它真正上線供使用者訪問。除了部署，我們還將回顧這 30 天中應用到的核心技術，總結關鍵學習成果。

技術成果回顧

在過去 30 天的開發旅程中，我們逐步構建並優化了應用的各個部分，這些技術成果包括：

1. 前端架構設計：從專案初始化到樣式管理、路由設置，我們通過 Webpack、React Router、CSS Modules 等技術工具來建立一個穩固的應用架構。
2. 多語言支持 (i18n)：使用 i18next 和 API 結合，優化多語言的切換與動態資料加載，並通過單例模式提升效能。
3. UI 設計與互動：實現了響應式設計、CSS Grid 佈局以及卡片式的動態展示頁面，並結合 Framer Motion 增強了應用的動態效果。
4. 表單功能整合：結合 react-hook-form 實現了表單驗證與提交功能，並通過 EmailJS 服務無需後端即可發送郵件。
5. 性能優化：通過 Lazy Loading、Context 渲染優化、日誌控制等方式來提升應用性能。
6. 資料加密與持久化：使用 CryptoJS 對表單數據進行加密，並通過 sessionStorage 實現數據的安全存儲與持久化。

這些技術構成了我們專案的核心，使應用在功能、效能和安全性方面達到了預期的效果。

將專案部署到 Vercel

在專案開發完成後，我們需要將應用部署到線上環境。Vercel 是一個專為前端專案提供的快速部署平台，支持簡單的 Git 集成和環境變數設置。

Step 1: 註冊並登入 Vercel

1. 前往 Vercel 官網 註冊一個帳號，或直接使用 GitHub 授權登入。
2. 進入 Vercel 控制台後，點擊 New Project，選擇你的 GitHub 儲存庫進行連接。

Step 2: 設置環境變數

部署專案時，我們需要保護敏感的 API Key 和其他密鑰。以下是設定步驟：

1. 到在 Vercel 專案項目Setting中
2. 找到 Environment Variables，添加以下變數和其值：
   • EMREACT_APP_I18N_API_URL
   • Google_Analytics_ID
   • EMAILJS_PUBLIC_KEY
   • EMAILJS_SERVICE_ID
   • EMAILJS_TEMPLATE_ID
   • REACT_APP_SECRET_KEY（加密密鑰）

Step 3: 自動部署應用

1. 完成設置後，Vercel 會自動開始部署過程。稍等片刻，你將獲得專案的線上 URL。
2. 可以直接在瀏覽器中訪問這個 URL，並進行應用的測試。
   

結語

透過這 30 天的開發，我們從應用初始化、UI 設計、多語言支持、表單整合到最終部署，全面實踐了現代前端開發中常用的技術和工具。這段旅程不僅幫助我們構建了一個完整的應用，也讓我們掌握了如何靈活應用這些技術來解決實際問題。

這次專案的完結並不意味著學習的結束，反而是一個新的開始。我們將繼續優化應用、探索新的技術，讓這個應用變得更加高效和強大。

✨ 流光館Luma<∕> ✨ 期待與你繼續探索更多技術知識！