前言

這次開發 OEM 代工網站會多使用 Vite 來簡化前端建構的流程與時間。，而非傳統的 Create React App (CRA)，來縮短開發與部署時間，並讓網站載入速度更快、使用體驗更流暢，打造更現代化的動態 OEM 代工網站。

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

Tech Stack

(Frontend)前端：

• React：一個 JavaScript UI 函式庫，適用於開發單頁應用（SPA），提供組件化開發模式
• Vite：前端開發與建構工具（Bundler），提升 React 開發體驗，具有快啟動、熱更新（HMR）、輕量設定等優勢
• Tailwind CSS：相較於 Bootstrap 更輕量、更容易客製化的 CSS 框架

(UI Library & Data Visualization) UI 元件庫、資料視覺化：

• lucide-react：輕量化開源 SVG icon 庫
• shadcn/ui：建立於 Radix UI 上，所有元件都可以直接在專案中編輯

(State Management) 狀態管理：

• Redux：集中化狀態管理工具，適用於處理複雜的應用狀態，經常搭配 React 進行開發
• TanStack Query(React Query)：server data 的狀態管理工具，幫我們快取來自 server 的資料，並在適當的時間內盡可能使用快取或是在過期後背景重新取得資料

(Backend)後端：

• Django：功能強大、穩定的 Python Web 框架，適用於快速開發與企業級應用
• Django REST Framework (DRF)：提供靈活且可擴展的 API 介面開發工具，方便建立 RESTful 服務
• JWT (JSON Web Token)：身份驗證和授權數據，適用於無狀態 API 身份驗證

(Database)資料庫：

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

此專案的 ER Model：

(Package Manager)套件管理工具：

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

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

• Git：分散式版本控制系統，用於專案的版本控制

(Deployment)部署：

• Linux(Ubuntu 20.04+) 主機：本專案不使用雲端 PaaS 服務(Heroku、Azure、GCP)，而是自行架設 Linux 主機進行多個專案的維護
• Systemd：管理多個系統中的服務啟動和服務管理狀態
• SSH：遠端連線管理，如 (OpenSSH)
• Nginx：Web Server，反向代理
• uWSGI：Django WSGI 伺服器，Django 與 Web Service 之間的接口

---

• ← Previous Post
• Next Post →

---

留言版

---