wordpress_blog

This is a dynamic to static website.

聯絡我

Build & Deploy Full Stack E-commerce Website | Redux | MERN Stack – 05

gee.hsu

學習來自 YT: compiletab
影片: Build & Deploy Full Stack E-commerce Website | Redux | MERN Stack Project
Github assets: 連結
Thank you, teacher

建立 & 部署全端商業網站

影片時間戳

00:00:00 – Introduction
00:01:56 – Demo
00:05:26 – Installation & set up
05:50:25 – Admin UI
07:20:25 – Backend setup
07:32:40 – user routes
08:05:40 – Products routes
09:18:56 – cart routes
10:13:26 – checkout routes
10:57:55 – Admin routes
11:58:30 – Redux

部署

  • 使用 Vercel 部署這個專案

Github 部署流程

  • 在後端專案資料夾建立 vercel.json 檔案
  • 在前端專案資料夾建立 vercel.json 檔案
  • 在 rabbit 專案資料夾建立 .gitignore 檔案
  • 打開新的終端機，在 rabbit 專案根目錄下
    git init – 初始化一個新的 Git 儲存庫
  • git add . – 加入到 Git 的暫存區
  • git commit -am “initial commit” – 將所有已修改的已跟蹤檔案自動加入暫存區並提交，並附上一條提交訊息
  • 在 Github 建立新的儲存庫
    Repository name: Rabbit
    影片示範是使用 Public，我這裡選擇 Private 嘗試
    Create Repository – 建立儲存庫
  • 複製 Github 命令行的程式碼 – git branch -M master
    在終端機 rabbit 根目錄下貼上、執行
  • 複製 Github 命令行的程式碼 – git remote add origin https://github.com/GeeHsu/Rabbit.git
    在終端機 rabbit 根目錄下貼上、執行
  • 複製 Github 命令行的程式碼 – git push -u origin master
    在終端機 rabbit 根目錄下貼上、執行
  • 重新整理 Github 頁面可以看到程式碼已經順利上傳

Vercel 部署流程

  • 打開 Vercel 儀錶板
  • 新增專案
  • 匯入 Git 儲存庫
  • 新增 Github 帳號
  • 指定儲存庫 > 安裝
  • Import – 匯入
  • Edit – 編輯
    選擇 backend > 繼續
  • Environment Variables – 環境變數
    打開後端資料夾 .env 檔案
    MONGO_URI
    JWT_SECRET
    CLOUDINARY_CLOUD_NAME
    CLOUDINARY_API_KEY
    CLOUDINARY_API_SECRET
  • Deploy – 部署
  • 點擊圖片確認後端部署是否成功
  • Continue to Dashboard – 繼續儀錶板
  • 新增專案
  • Import – 匯入
  • Edit – 編輯
    選擇 frontend > 繼續
  • Framework Preset – 框架預設
    沒有自動選取的話，選擇 Vite
  • Environment Variables – 環境變數
    打開前端資料夾 .env 檔案
    VITE_BACKEND_URL=server URL – 伺服器網址 (自己的伺服器網址)
    VITE_PAYPAL_CLIENT_ID
  • Deploy – 部署
  • 示範影片是使用 Mac 出現錯誤，刪除 node_modules 資料夾、package-lock.json 檔案，然後重新安裝、上傳到 Github 儲存庫
  • 編輯修正前端環境變數 VITE_BACKEND_URL 網址最後不用斜線
  • 前端專案重新部署
  • 測試功能是否正常運作
// backend/vercel.json
{
  "version": 2,
  "name": "backend",
  "builds": [
    {
      "src": "server.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "server.js"
    }
  ]
}

// frontend/vercel.json
{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": { "distDir": "dist" }
    }
  ],
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

// .gitignore
#Logs
logs
*.logs

# Node Modules
frontend/node_modules/
backend/node_modules/

# Environment variables
frontend/.env
backend/.env

# 忽略 .DS_Store 檔案 (Mac)
.DS_Store
# 忽略 Thumbs.db 檔案 (Windows)
Thumbs.db

// /rabbit
// 打開新的終端機
// 初始化一個新的 Git 儲存庫
git init

// /rabbit
// 加入到 Git 的暫存區
git add .

// /rabbit
// 將所有已修改的已跟蹤檔案自動加入暫存區並提交，並附上一條提交訊息
git commit -am "initial commit"

// /rabbit
// 在終端機 rabbit 根目錄下貼上、執行
git branch -M master
// /rabbit
// 在終端機 rabbit 根目錄下貼上、執行
git remote add origin https://github.com/GeeHsu/Rabbit.git

// /rabbit
// 在終端機 rabbit 根目錄下貼上、執行
git push -u origin master

Personal Access Token (PAT)

  • 步驟 1：登錄 GitHub 並進入設置頁面
  • 步驟 2：創建 Personal Access Token (PAT)
  • 步驟 3：選擇權限（Scopes）
  • 步驟 4：選擇有效期限（Optional）
  • 步驟 5：生成並複製 PAT

步驟 2：創建 Personal Access Token (PAT)

  1. 在 Settings 頁面左側選擇 Developer settings。
  2. 在 Developer settings 頁面，選擇 Personal access tokens。
  3. 點擊 Generate new token 按鈕，這會引導您創建新的 PAT。

步驟 3：選擇權限（Scopes）

必要常見範圍 (Scopes):

  • repo
  • workflow
  • read:org
  • user

以上完成這個專案所有內容。