【产品】17_部署上线——从 localhost 到全世界

weelinking01

151人浏览 · 2026-06-10 22:45:55

weelinking01 · 2026-06-10 22:45:55 发布

🚀 部署上线——从 localhost 到全世界

「产品经理用 Claude 实现产品」系列 · 第17篇

localhost:3000 上好好的，但只有你自己能看到。今天是发布日——把「需求管理平台」部署到互联网上，让你的同事、朋友都能访问。用 Vercel 部署前端，用 Railway 部署后端，全程免费，Claude 帮你准备所有配置文件。

👋 关注博主，不迷路

🎯 你将获得

✅ 产品经理视角 - 从你熟悉的工作流出发
✅ 完整实战项目 - 做一个你自己日常能用的工具
✅ 即学即用 - 每篇都有可运行的阶段成果
✅ 方法论沉淀 - 掌握"AI 实现产品"的完整方法论

💬 互动交流

📢 评论区答疑 - 产品 & 技术问题都能聊
🔥 源码开放 - GitHub 同步更新
📝 踩坑日记 - 一个产品经理的真实编程之旅
🎁 提示词模板 - 可复用的 Claude 对话模板

🌟 点击右上角「关注」，不错过每一篇精彩内容！

🎬 一、前言：这是产品经理最期待的时刻

"上线"这两个字，对产品经理有特殊的意义。

你经历过多少次：需求评审 → 排期 → 开发 → 测试 → 上线——然后你站在旁边，看着开发执行那最后几个命令，产品正式对外可用。

那种感觉你懂。

今天，这最后几个命令，由你来敲。

不是看着，是真的自己来。这是「需求管理平台」正式走向"全世界"的时刻——从只有你本地能看到，到任何一台联网的设备都能访问。

💡 本系列全程使用 weelinking大模型聚合平台 访问 Claude，国内可稳定，安全使用

🔍 二、上线前的准备工作

🔎 2.1 让 Claude 做上线前检查

不要急着部署，先做一次全面检查。上线后出问题，修复成本比上线前高10倍。

你：我的项目准备部署上线了，帮我检查是否存在以下问题：

前端（React）：

有没有硬编码的 localhost 地址（比如 http://localhost:3001/api）？应该改成环境变量 process.env.REACT_APP_API_URL

package.json 里的 build 命令是否正确

有没有 console.log 调试语句忘记删

后端（Node.js）：

JWT_SECRET 是否从环境变量读取，不是写死在代码里

数据库路径是否用了绝对路径（部署环境路径不同）

port 是否从环境变量读取（process.env.PORT || 3001）

.env 文件是否在 .gitignore 里（不能提交到 git）

CORS 配置是否允许来自 Vercel 域名的请求

Claude 会逐一检查，列出需要修改的地方。最常见的问题是 API 地址硬编码和 CORS 配置遗漏。

🔧 2.2 修改常见问题

API 地址改用环境变量：

你：帮我把前端所有 http://localhost:3001 的地址，改成从环境变量 REACT_APP_API_URL 读取。同时帮我创建 .env.development 文件（开发环境用 localhost），和 .env.production.example 文件（生产环境的模板）。

// src/utils/api.js - 修改前
const BASE_URL = 'http://localhost:3001/api';

// 修改后
const BASE_URL = process.env.REACT_APP_API_URL || 'http://localhost:3001/api';

# .env.development（本地开发）
REACT_APP_API_URL=http://localhost:3001/api

# .env.production.example（生产环境模板）
REACT_APP_API_URL=https://your-backend.railway.app/api

后端 CORS 配置更新：

你：帮我更新后端的 CORS 配置，允许来自以下域名的请求：

开发环境：http://localhost:3000

生产环境：https://*.vercel.app（我的 Vercel 域名）

生产环境：https://my-custom-domain.com（如果有自定义域名）

通过环境变量 ALLOWED_ORIGINS 配置，支持逗号分隔多个域名。

// 后端 CORS 配置
const allowedOrigins = process.env.ALLOWED_ORIGINS?.split(',') || ['http://localhost:3000'];

app.use(cors({
  origin: (origin, callback) => {
    if (!origin || allowedOrigins.some(allowed =>
      allowed.includes('*')
        ? origin.match(new RegExp(allowed.replace('*', '.*')))
        : allowed === origin
    )) {
      callback(null, true);
    } else {
      callback(new Error(`CORS: ${origin} 不在允许列表`));
    }
  },
  credentials: true
}));

📦 2.3 最后一次代码提交

确认所有修改都是好的，推送到 GitHub：

git add .
git commit -m "上线前配置：环境变量、CORS配置、清理调试代码"
git push origin main

🌐 三、前端部署——Vercel

💡 3.1 为什么选 Vercel

你可能听过 Vercel，但不一定知道它有多好用：

免费：个人项目完全免费
快：全球 CDN，中国用户访问速度也不错
自动 CI/CD：每次 git push 自动重新部署，不需要你手动操作
零配置：识别 React 项目，自动配置构建命令
HTTPS：免费自动配置 SSL 证书

📝 3.2 部署步骤

第一步：注册/登录 Vercel

打开 vercel.com，用 GitHub 账号登录（直接授权，不需要填表单）。

第二步：导入项目

点击 “Add New” → “Project”
选择你的 GitHub 仓库（前端项目）
Vercel 会自动识别出这是一个 React 项目

第三步：配置构建参数

Vercel 会自动填入默认值，确认以下配置：

Framework Preset：Create React App
Build Command：npm run build（自动填入）
Output Directory：build（自动填入）

第四步：设置环境变量（关键步骤）

在 “Environment Variables” 部分添加：

REACT_APP_API_URL = https://your-backend.railway.app/api

⚠️ 这里先填一个占位符，等后端部署好再来更新。

第五步：点击 Deploy

Vercel 开始构建，等待 1-3 分钟，完成后会给你一个链接：https://your-project.vercel.app

🎉 前端上线了！

🔄 3.3 后续更新的方式

以后每次改了代码，只需要：

git push origin main

Vercel 会自动检测到推送，自动重新构建部署。你不需要再做任何操作。

这就是 CI/CD。你以前催开发做的那套流程，现在自动帮你做了。

🔗 3.4 自定义域名（可选）

如果你有自己的域名，在 Vercel 项目设置里：

Settings → Domains → Add Domain
填入你的域名（如 pm-tool.yourname.com）
按提示在域名提供商处添加 CNAME 记录
等待 DNS 生效（5分钟到24小时不等）

没有域名的话，Vercel 默认给你的 xxx.vercel.app 域名已经够用了。

🚂 四、后端部署——Railway

💡 4.1 为什么选 Railway

后端部署比前端复杂一些，因为它需要一直运行、需要数据库。Railway 是目前对开发者最友好的选择之一：

免费额度：每月 $5 的免费额度，小项目够用
Node.js 支持完善：自动识别并运行
自带数据库服务：PostgreSQL、MySQL 都有
环境变量管理方便：UI 界面直接配置

🛠️ 4.2 后端部署步骤

第一步：注册 Railway

打开 railway.app，用 GitHub 账号登录。

第二步：创建新项目

点击 “New Project”
选择 “Deploy from GitHub repo”
选择你的后端仓库
Railway 自动识别 Node.js 项目，开始部署

第三步：配置启动命令

Railway 需要知道怎么启动你的后端。在项目设置里：

Settings → Deploy → Start Command：node src/index.js

或者更好的方式，在 package.json 里确认有 start 命令：

{
  "scripts": {
    "start": "node src/index.js",
    "dev": "nodemon src/index.js"
  }
}

第四步：设置环境变量

在 Variables 标签页添加：

JWT_SECRET = [一个随机的长字符串，至少32位]
PORT = 3001
NODE_ENV = production
DATABASE_URL = [下一步配置好数据库后填入]
ALLOWED_ORIGINS = https://your-project.vercel.app

你：帮我生成一个安全的 JWT_SECRET，要求：随机、至少64个字符、包含字母数字和特殊字符，可以直接用在生产环境。

第五步：部署完成，获取后端 URL

Railway 部署完成后，在 Settings → Networking 里，点击 “Generate Domain” 获取后端 URL：

https://your-backend-xxxx.railway.app

🗄️ 4.3 数据库——关键决策

这里有个重要问题：SQLite 在 Railway 上不可靠。

SQLite 是文件型数据库，数据存在一个文件里。Railway 的容器在重新部署时会重置文件系统，意味着数据库文件会消失，所有数据都没了。

有两个解决方案：

方案A：切换到 PostgreSQL（推荐）

Railway 提供免费的 PostgreSQL 服务。把数据库从 SQLite 换到 PostgreSQL，数据就持久化了。

你：帮我把后端数据库从 SQLite（better-sqlite3）迁移到 PostgreSQL（使用 pg 库）。

需要做的改动：

安装 pg 依赖，卸载 better-sqlite3

创建数据库连接（从环境变量 DATABASE_URL 读取连接字符串）

把所有 SQL 语法从 SQLite 风格改为 PostgreSQL 风格（主要是 INTEGER PRIMARY KEY AUTOINCREMENT → SERIAL PRIMARY KEY，TEXT → VARCHAR 等）

把同步查询改为异步（pg 用 async/await，better-sqlite3 是同步的）

创建数据库初始化脚本 scripts/init-db.js，用于首次部署时创建表结构

这个迁移 Claude 能帮你完成，但需要一定时间。Claude 会逐个文件修改，你按顺序应用就好。

方案B：保持 SQLite，使用 Railway Volume（快捷方案）

如果不想改数据库，可以在 Railway 添加持久化卷（Volume），把数据库文件存在卷里，重新部署不丢失。

在 Railway 项目里：New → Volume
设置挂载路径（如 /data）
把数据库文件路径改为 /data/database.db

适合快速上线，但 Railway 免费计划的 Volume 有容量限制。

🐘 4.4 在 Railway 里添加 PostgreSQL

（如果选方案A）

在 Railway 项目里，点击 “New” → “Database” → “Add PostgreSQL”
Railway 自动创建数据库，并把 DATABASE_URL 环境变量注入到你的后端服务里
运行初始化脚本创建表结构：

在 Railway 里执行一次性命令：

Settings → Deploy → 找到 Deploy Command，临时改为 node scripts/init-db.js && node src/index.js，部署一次后改回来

⚙️ 4.5 完成后端配置

后端部署完成后：

回到 Vercel，更新 REACT_APP_API_URL 环境变量为你的 Railway 后端 URL
Vercel 自动重新部署前端

现在前端和后端都上线了，打开 Vercel 的链接，功能应该正常运行。

✅ 五、上线后验证

这是你最熟悉的工作——验收。

📋 5.1 功能验证清单

□ 基础访问
  □ Vercel 链接可以正常打开
  □ 页面样式正确，没有乱码
  □ 控制台没有报错

□ 认证功能
  □ 注册新账号成功
  □ 登录成功，跳转到列表页
  □ 刷新页面，登录状态保持
  □ 退出登录成功

□ 核心功能
  □ 创建需求成功（数据真的存入数据库了）
  □ 刷新页面，需求还在（持久化验证）
  □ 编辑需求成功
  □ 删除需求成功
  □ 看板视图正常显示
  □ 拖拽状态更新成功

□ 权限功能
  □ 不同角色看到的功能不同
  □ 未登录访问被重定向到登录页

□ 数据统计
  □ 统计看板数据正确
  □ 图表正常显示

□ 移动端
  □ 手机浏览器打开正常
  □ 操作无误

🔧 5.2 常见部署问题排查

问题1：前端页面白屏

你： Vercel 部署完成，但页面打开是白屏，打开控制台看到报错：[报错内容]，帮我分析原因和解决方案。

最常见原因：构建失败（检查 Vercel Deployments 日志）、环境变量没设置、路由配置问题。

问题2：API 请求失败（CORS 错误）

浏览器控制台报错类似：Access-Control-Allow-Origin 相关。

这是因为后端 CORS 配置没有包含 Vercel 的域名。

你：后端接口报 CORS 错误，前端地址是 https://my-app.vercel.app，后端在 Railway 上，帮我检查后端 CORS 配置并修复。

修复后，在 Railway 的 Variables 里更新 ALLOWED_ORIGINS，然后 redeploy。

问题3：数据库连接失败

Error: connection to server failed: password authentication failed

检查 Railway 的 DATABASE_URL 是否正确注入到后端环境变量里。在 Railway 里，PostgreSQL 服务和后端服务需要在同一个项目里，Railway 才会自动注入。

问题4：部署成功但数据查不到

如果数据库是 PostgreSQL，检查表是否已创建（初始化脚本是否跑了）。

你：后端部署完成，API 能访问，但所有查询返回空数组，可能原因是表没有创建。帮我生成一个检查脚本，连接 PostgreSQL，列出所有已存在的表，验证数据库表结构是否正确。

📢 六、分享你的产品！

部署完成，你的产品正式上线了。现在做一件产品经理最擅长的事：

收集第一批用户反馈。

你：帮我设计一个简短的产品反馈问卷，适合发给第一批试用用户（5-10人，同事/朋友）：

问卷不超过5个问题

重点收集：核心功能是否满足需求、哪里用起来困难、最期望增加什么功能

有一个开放性问题：如果你用过类似产品，觉得我们比它好在哪里/差在哪里

同时，你可以用你自己做的「需求管理平台」来管理收集到的反馈——没有比用自己的工具更爽的事了。

🎉 七、里程碑：产品正式上线了

你刚刚完成了一件事：

作为产品经理，你亲手把一个产品从零做到上线。

不是委托开发做的，不是找外包做的，是你自己，用 Claude，一步一步做出来的。

前端用 Vercel，后端用 Railway，数据库用 PostgreSQL，全程免费。这个产品：

有完整的用户认证和角色权限
有需求的增删改查和看板视图
有实时更新的数据统计看板
有经过打磨的 UI/UX 体验
现在，已经在互联网上运行了

这不是 Demo，不是原型，是一个真实的、可以给真实用户使用的产品。

下一篇，我们来聊聊：这段旅程，你真正得到了什么。

📝 八、总结与下期预告

🎯 本篇核心要点

1. 上线前检查比上线本身更重要。 硬编码地址、环境变量遗漏、CORS 配置——这些问题在本地永远不会暴露，但一上线就全来了。

2. Vercel + Railway 是当下最省心的免费部署方案。 对个人项目和小团队来说，没有比这更好的选择了。

3. SQLite 不适合生产环境。 迁移到 PostgreSQL 是正确的选择，虽然有点麻烦，但 Claude 可以帮你完成绝大部分工作。

4. CI/CD 让上线不再是大事。 git push → 自动部署——以后的每次迭代，你只需要推代码。

5. 验收是产品经理的强项。 部署完成后，用你熟悉的验收思维逐项检查，不要"觉得应该没问题就算了"。

📌 记住这句话

你主导过多少次上线，今天第一次自己动手。那些"最后几个命令"，终于由你来敲了。

📣 下期预告

第18篇：《产品经理的新身份——你已经是一个"技术型PM"了》

18篇走到这里，产品做出来了，也上线了。

最后一篇不讲技术，讲你这段旅程真正得到了什么：不只是一个产品，而是一种新的工作方式，和一个新的身份。

💡 本系列全程使用 weelinking大模型聚合平台 访问 Claude，国内可稳定使用

📎 配套资源

📋 上线前检查清单

□ 代码检查
  □ 无 localhost 硬编码（全部改为环境变量）
  □ 无 console.log 调试语句
  □ .env 文件在 .gitignore 里
  □ package.json 的 start 命令正确

□ 安全检查
  □ JWT_SECRET 足够长且随机
  □ 数据库密码不在代码里
  □ CORS 配置只允许必要的域名

□ 前端部署（Vercel）
  □ GitHub 仓库已连接
  □ 构建命令正确（npm run build）
  □ 环境变量已设置（REACT_APP_API_URL）
  □ 部署成功，可以访问

□ 后端部署（Railway）
  □ GitHub 仓库已连接
  □ 启动命令正确
  □ 所有环境变量已设置
  □ 数据库已创建（PostgreSQL）
  □ 数据库表已初始化
  □ 部署成功，可以访问

□ 联调验证
  □ 前端能正常调用后端 API
  □ 无 CORS 错误
  □ 数据能正常读写

□ 功能验收
  □ 注册/登录
  □ 创建/编辑/删除需求
  □ 数据刷新后持久
  □ 移动端可用

📋 部署常见问题 FAQ

Q1：Vercel 构建失败，报错 “Module not found”

本地可以跑，部署失败通常是因为包名大小写不一致（Linux 区分大小写，Mac 不区分）。检查 import 语句里的路径是否和文件名完全一致。

Q2：API 请求 CORS 错误

在后端更新 ALLOWED_ORIGINS 环境变量，加入 Vercel 的域名，然后在 Railway 手动 Redeploy。

Q3：Railway 部署成功但接口返回 500

查看 Railway 的日志（Deployments → 点击具体的部署 → View Logs），找到具体报错信息，给 Claude 看。

Q4：数据库数据消失了（SQLite 方案）

这是 SQLite 在 Railway 上的已知问题。迁移到 PostgreSQL，或者使用 Railway Volume 挂载持久化存储。

Q5：Vercel 域名访问慢

Vercel 有中国大陆的节点，速度一般还可以。如果太慢，可以考虑国内的 CDN 或者将前端部署到腾讯云静态网站。

📋 部署相关提示词模板

上线前检查：

我的项目准备部署了，帮我检查以下文件是否存在上线问题：
[粘贴你的关键文件内容，如 api.js、cors 配置、package.json]

重点检查：
1. 是否有硬编码的开发地址（localhost等）
2. 敏感信息是否在代码里
3. 生产环境的配置是否完整

CORS 问题排查：

前端报错：[粘贴报错信息]
前端地址：[xxx.vercel.app]
后端地址：[xxx.railway.app]
后端 CORS 配置代码：[粘贴]

帮我分析问题并给出修复方案。

数据库迁移：

帮我把后端从 SQLite（better-sqlite3）迁移到 PostgreSQL（pg 库）：
现有数据库初始化代码：[粘贴]
现有查询代码（随机一个controller）：[粘贴]

请给出完整的迁移步骤和改动的代码。

🌟 如果这篇文章对你有帮助，请点赞👍 收藏⭐ 关注🔔

你的支持是我持续更新的最大动力！

💬 评论区聊聊：你的产品上线之后，第一个用户是谁？他的反馈是什么？

📌 系列导航： 产品经理用 Claude 实现产品 · 系列目录

⏪ 上一篇： 第16篇：数据可视化——用图表讲述产品数据的故事

⏩ 下一篇： 第18篇：产品经理的新身份——你已经是一个"技术型PM"了

所有评论(0)

查看更多评论

weelinking01

@weelinking01

已为社区贡献33条内容

【产品】17_部署上线——从 localhost 到全世界

weelinking01

🚀 部署上线——从 localhost 到全世界

👋 关注博主，不迷路

🎯 你将获得

💬 互动交流

🌟 点击右上角「关注」，不错过每一篇精彩内容！

🎬 一、前言：这是产品经理最期待的时刻

🔍 二、上线前的准备工作

🔎 2.1 让 Claude 做上线前检查

🔧 2.2 修改常见问题

📦 2.3 最后一次代码提交

🌐 三、前端部署——Vercel

💡 3.1 为什么选 Vercel

📝 3.2 部署步骤

🔄 3.3 后续更新的方式

🔗 3.4 自定义域名（可选）

🚂 四、后端部署——Railway

💡 4.1 为什么选 Railway

🛠️ 4.2 后端部署步骤

🗄️ 4.3 数据库——关键决策

🐘 4.4 在 Railway 里添加 PostgreSQL

⚙️ 4.5 完成后端配置

✅ 五、上线后验证

📋 5.1 功能验证清单

🔧 5.2 常见部署问题排查

📢 六、分享你的产品！

🎉 七、里程碑：产品正式上线了

📝 八、总结与下期预告

🎯 本篇核心要点

📌 记住这句话

📣 下期预告

📎 配套资源

📋 上线前检查清单

📋 部署常见问题 FAQ

📋 部署相关提示词模板

推荐阅读

所有评论(0)

温馨提示：您尚未绑定手机号

weelinking01