前言

這次開發 OEM 代工網站用 Vite作為開發伺服器 ，而非傳統的 Create React App (CRA)，來縮短前端建構、開發與部署時間，不用每次修改都要等數十秒才能看到新的畫面，讓開發體驗更好。

• 前端以 React + TypeScript + Vite 為核心，結合 Tailwind CSS 及 UI 元件庫（如 shadcn/ui, lucide-react）
• 後端則用 Django + DRF 快速開發 API 服務，在已瞭解 Redux 底層原理及為了在開發速度取得優勢的情況下，用 TanStack Query 來管理 Server Data 的狀態。

這次僅記錄重要的或比較困難的狀況，不會像之前筆記每個步驟都寫得很詳細，避免重複性的內容

Tech Stack

UI/UX 設計工具

• Figma：線上 UI/UX 設計工具，很適合團對進行 APP、網站原型設計
• Canva：線上設計工具，快速製作簡單的圖像、海報、社群媒體圖片用
• Adobe Photoshop：P、修圖用

(Frontend)前端：

• React：前端三巨頭之一，常用來開發單頁 APP（SPA），提供組件化開發模式，由 Meta 的社群維護
• TypeScript：微軟的開源程式語言，提供靜態類型檢查，適用大型專案開發
• Vite：前端開發與建構工具（Bundler），提升 React 開發體驗，具有快啟動、熱更新（HMR）、輕量設定等優點
• Tailwind CSS：相較於 Bootstrap 更輕量，高度靈活，採用「Utility First」理念的 CSS 框架

(UI Library & Data Visualization) UI 套件：

• lucide-react：輕量化開源 SVG ICON 元件庫
• shadcn/ui：建立於 Radix UI 上，所有元件都可直接在專案中編輯
• react-i18next：支援 SSR，基於 React / React Native 的 i18n 框架，核心的概念為 ”Learn once — translate everywhere.”
• Swiper JS：有非常多樣式、很方便使用的輪播套件
• react-vertical-timeline-component：React 的垂直時間軸元件，用於顯示時間序列資料
• GSAP：相見恨晚的 JavaScript 動畫套件，可開發客製化、複雜動畫與交互效果

(State Management) 狀態管理：

• Redux：狀態管理工具
• TanStack Query(React Query)：Server data 的狀態管理工具，幫我們快取來自 server 的資料，並在適當的時間內盡可能使用快取或是在過期後背景重新取得資料

(Backend)後端：

• Django：Python Web 框架，可快速開發與企業級專案，提供 ORM、身份驗證、管理介面等功能
• Django REST Framework (DRF)：靈活、擴展性高的 API 介面開發工具，方便建立 RESTful 服務
• JWT (JSON Web Token)：身份驗證和授權數據，適用於無狀態 API 身份驗證
• Martor：好用的輕量化 Markdown 編輯器套件，支援圖片上傳、Markdown 語法、預覽、等功能

(Database)資料庫：

• MySQL：正式環境的關聯式資料庫，而非開發階段用的 SQLite

(Package Manager)套件管理工具：

• pip：Python 套件管理工具，要使用虛擬環境內的 pip
• npm：Node.js 套件管理工具，用於安裝前端相關套件

(Version control Tool)版本控制工具：

• Git：分散式版本控制系統，支援多人協作與版本管理。

(Deployment)部署：

• Linux(Debian 12) 主機：部署於自架 Linux 主機，不使用雲端 PaaS
• Systemd：Linux 系統服務管理工具，負責後端與排程服務的啟動與監控。
• SSH (OpenSSH)：遠端連線管理，如 (OpenSSH)
• Nginx：反向代理伺服器（Reverse Proxy），Nginx 接收外部請求，然後將請求轉發給內部的伺服器（例如 Django），再把伺服器的回應傳回給使用者
• uWSGI：應用伺服器（橋接 Web Server ↔ Django App），Django 與 Web Service 之間的接口

---

• ← Previous Post
• Next Post →

---

留言版

---