问题：https://zhangyuehan321.github.io/api/boards 接口404，为什么本地的接口数据可以用data.json，线上不行

原因：GitHub Pages 和本地根本不是同一套架构

1. 本地

其实是 两个服务 在跑：

• pnpm server 启动 Node，处理 GET/POST/PATCH /api/*
• server/index.mjs 读写 server/data.json
• Vite 把 /api 转发到 localhost:3001

所以本地 /api/boards 是真实 API，不是直接读静态 JSON 文件。

2. 线上

GitHub Pages 只能托管静态文件（dist/ 里的 HTML / JS / CSS）

Deploy workflow 只上传了前端构建产物，没有部署：

• server/index.mjs（Node 服务）
• server/data.json（后端数据）

访问 https://zhangyuehan321.github.io/api/boards 时，GitHub 只是在找有没有叫 api/boards 的静态文件，找不到就 404。
Pages 不会执行 Node 代码，也没有 API 路由

3. 推荐方案

把 server/ 部署到Render, Railway, Fly.io等

下面是部署到Render的步骤

1. server/的实现

server/index.mjs

/** 云平台会注入 PORT，本地默认 3001 */
const PORT = Number(process.env.PORT) || 3001;
const HOST = process.env.HOST || '0.0.0.0';
/** 允许跨域的前端地址（GitHub Pages / 本地 Vite） */
const ALLOWED_ORIGINS = (
    process.env.ALLOWED_ORIGINS ??
    'http://localhost:5173,https://zhangyuehan321.github.io'
)
    .split(',')
    .map(origin => origin.trim())
    .filter(Boolean);

function setCors(req, res) {
    const origin = req.headers.origin;
    if (origin && ALLOWED_ORIGINS.includes(origin)) {
        res.setHeader('Access-Control-Allow-Origin', origin);
    }
    res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PATCH,OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
}
//仅限修改处
const server = createServer(async (req, res) => {
    setCors(req, res);

    // 浏览器跨域预检请求
    if (req.method === 'OPTIONS') {
        res.writeHead(204);
        res.end();
        return;
    }

    const url = new URL(req.url, `http://${req.headers.host ?? 'localhost'}`);
}
//仅限修改处
server.listen(PORT, HOST, () => {
    console.log(`Kanban API server running at http://${HOST}:${PORT}`);
});

package.json

  "scripts": {
    //新增
    "start": "node server/index.mjs",
   }

render.yaml

services:
    - type: web
      name: kanban-api
      runtime: node
      plan: free
      buildCommand: echo "No build step"
      startCommand: node server/index.mjs
      envVars:
          - key: NODE_ENV
            value: production
          - key: ALLOWED_ORIGINS
            value: https://zhangyuehan321.github.io,http://localhost:5173

Dockerfile

FROM node:20-alpine

WORKDIR /app

COPY server ./server

ENV NODE_ENV=production
ENV PORT=3001
ENV HOST=0.0.0.0

EXPOSE 3001

CMD ["node", "server/index.mjs"]

2. Render部署

1. 确认代码已在 GitHub

在本地执行：

git add render.yaml server/

git commit -m "add Render deploy config"

git push origin main

在 GitHub 仓库根目录应能看到 render.yaml。

---

2. 注册并登录 Render

1. 打开 https://dashboard.render.com
2. 用 GitHub 账号 登录
3. 授权 Render 访问你的 GitHub 仓库（至少勾选 kanban）

---

3. 用 Blueprint 创建服务

1. 点击右上角 New +

2. 选择 Blueprint

3. 在仓库列表里找到并选择 zhangyuehan321/kanban（或你的仓库名）

4. Render 会自动扫描并显示 render.yaml 里的内容，大致如下：

   字段	值
   Service name	kanban-api
   Start Command	node server/index.mjs
   Plan	Free

5. 点击 Apply（或 Create Blueprint）开始部署

---

4. 等待部署完成

1. 进入 Dashboard，打开 kanban-api 服务

2. 顶部 Events / Logs 里看日志，成功时类似：

   Kanban API server running at http://0.0.0.0:10000

3. 状态变为 Live 表示部署成功

---

5. 获取 API 地址并验证

1. 在服务页顶部复制 URL，例如：
   https://kanban-api.onrender.com
   （实际域名以 Render 分配的为准）

2. 浏览器访问：

   https://kanban-api.onrender.com/api/boards

   应返回 JSON 分组数据，而不是 404。

---

6. 让 GitHub Pages 前端连上 API

1. GitHub 仓库 → Settings → Secrets and variables → Actions
2. New repository secret：
   • Name：VITE_API_URL
   • Value：https://kanban-api.onrender.com（不要末尾 /）
3. 重新 push 到 main，或到 Actions 手动运行 Deploy workflow

部署完成后访问：
https://zhangyuehan321.github.io/kanban/board
看板应能加载数据。