2025-07-17 Line 訂單系統- F 階段 — 部署與持續整合

發表於 分類於 閱讀次數：
2025-07-17 Line 訂單系統- F 階段 — 部署與持續整合

2025-07-17 Line 訂單系統- F 階段 — 部署與持續整合

📙 F 階段 — 部署與持續整合（CI/CD + 免費雲端方案）

這是把整個 LINE 線上訂單系統「搬上雲端、公開可用」的階段，
讓你的系統能夠 隨時更新、自動部署、對外服務。

🎯 本階段目標

模組 目標
🌐 Node.js 後端 部署到 Render / Railway（免費層）
💻 Vue3 前端 部署到 Vercel / Netlify（自動建置）
🧮 MySQL 資料庫 使用 PlanetScale（雲端版）
⚡ Redis 快取 使用 Upstash Redis（免維護雲端）
🔄 CI/CD GitHub push → 自動部署前後端
🧩 LINE Webhook 串接正式 URL，Bot 可運作於線上環境

📘 F1 — 建立 GitHub 專案結構

專案架構（建議分兩個 repo）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
line-order-system/
│
├── backend/
│   ├── package.json
│   ├── server.js
│   ├── routes/
│   ├── .env.example
│   └── db/
│       └── init.sql
│
└── frontend/
    ├── package.json
    ├── vite.config.js
    ├── src/
    └── .env.example

你可以選擇：

  • ✅ 一 repo（含 backend + frontend）
  • 或 分成兩個 repo（方便部署）

☁️ F2 — 雲端帳號申請與準備

服務 功能 連結
🌐 Render Node.js 後端 https://render.com
📦 Vercel Vue3 前端 https://vercel.com
🧮 PlanetScale 雲端 MySQL https://planetscale.com
⚡ Upstash Redis 快取 https://upstash.com
🪣 GitHub 版本控制 https://github.com
💬 LINE Developers Webhook 入口 https://developers.line.biz

🧮 F3 — 設定 PlanetScale（MySQL 雲端資料庫）

  1. 登入 PlanetScale
  2. 建立一個新資料庫 line_order_system
  3. 開啟 「Connect」→「Node.js」，取得連線字串
  4. 複製 .env 設定：
1
2
3
4
DB_HOST=aws.connect.psdb.cloud
DB_USER=xxxx
DB_PASSWORD=xxxx
DB_NAME=line_order_system
  1. 在本機執行 mysql -h ... 或使用 TablePlus 導入 init.sql。

⚡ F4 — 設定 Upstash Redis

  1. 登入 https://upstash.com
  2. 建立 Redis 專案，選擇 Free Tier
  3. 在「REST API」頁籤中，複製 URL 與 TOKEN
  4. 放入 .env：
1
2
REDIS_URL=https://us1-upstash-xxxx.upstash.io
REDIS_TOKEN=xxxxxxxxxxxxxxxxx

🔧 F5 — 部署後端（Render）

  1. 前往 Render

  2. 建立 New Web Service

  3. 連結 GitHub repo → 選擇 backend 目錄

  4. 設定：

    • Build Command：npm install
    • Start Command：npm start

  5. 加入環境變數（在 Render → Environment）：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    PORT=10000
    DB_HOST=...
    DB_USER=...
    DB_PASSWORD=...
    DB_NAME=...
    REDIS_URL=...
    REDIS_TOKEN=...
    LINE_CHANNEL_ACCESS_TOKEN=...
    LINE_CHANNEL_SECRET=...

  6. 部署完成後會得到一個網址，例如：

    1
    https://line-order-backend.onrender.com

✅ 這個網址就是你正式的 API 與 LINE Webhook 入口！

💻 F6 — 部署前端（Vercel）

  1. 登入 https://vercel.com

  2. 連結你的 GitHub 專案 → 選擇 frontend 資料夾

  3. 設定：

    • Framework：Vite
    • Build Command：npm run build
    • Output Directory：dist

  4. 環境變數（在 Vercel → Settings → Environment Variables）：

    1
    VITE_API_BASE_URL=https://line-order-backend.onrender.com

  5. 部署完成後，你會得到一個網址，例如：

    1
    https://line-order-frontend.vercel.app

🔄 F7 — 啟用 LINE Webhook（正式環境）

  1. 登入 LINE Developers

  2. 打開你現有的 Messaging API bot

  3. 在 Webhook URL 欄位填入：

    1
    https://line-order-backend.onrender.com/api/webhook

  4. 點「Verify」確認成功。

  5. 開啟「Use webhook」開關。

✅ 現在 LINE Bot 正式連上雲端 API！

🧩 F8 — CI/CD 自動部署流程

每次你在 GitHub：

1
2
3
git add .
git commit -m "update order API"
git push origin main

Vercel（前端）與 Render（後端）都會自動重新建置最新版本。
你可以在 dashboard 上看到自動部署紀錄。

🧪 F9 — 測試與驗證

測試項目 預期結果
在 LINE 聊天輸入「商品 1」 Bot 回覆商品資訊
在 LINE 輸入「購買 1」 成功建立訂單，後台即時更新
開啟前端網址（Vercel） 顯示所有訂單
修改訂單狀態 Redis 快取同步更新
手機版瀏覽 介面 RWD、可操作

✅ F 階段成果

模組 狀態
Render 後端 ✅ 已上線
Vercel 前端 ✅ 已上線
PlanetScale MySQL ✅ 已雲端化
Upstash Redis ✅ 已整合
LINE Bot Webhook ✅ 可實際運作
GitHub CI/CD ✅ Push 自動部署

🚀 下一步（📒 G 階段預告）

📒 G 階段 — 擴充與多平台版本（行動 App + 店家後台）

目標將包括：

  • 📱 PWA + Capacitor 手機 App 化
  • 🧾 店家後台登入／角色分權
  • 🛒 多商家架構（Marketplace 模式）
  • 🧠 AI 智慧客服（ChatGPT + LINE Bot）

是否要我幫你繼續進入 📒 G 階段 — 擴充與多平台版本（行動 App + 店家後台）？