如何部署集成Stripe支付的React构建应用与Node.js后端？

混合内容错误解决 #

浏览器拦截请求是因为前端通过HTTPS加载，但后端接口用HTTP协议，浏览器禁止这种跨协议的不安全请求，解决方法二选一：

• 给后端配置HTTPS证书（用免费的Let's Encrypt证书即可），将前端请求地址改为https://你的域名/checkout（或对应子路径）
• 用反向代理（比如Nginx）将前端和后端统一到同一个HTTPS域名下：前端托管在根域名https://你的域名，后端接口用子路径（如https://你的域名/api/checkout），避免跨协议请求

部署疑问解答 #

1. 从localhost切换到自有域名 #

• 前端：替换所有硬编码的localhost:XXX请求地址为你的域名（建议用环境变量区分开发/生产环境，生产环境配置域名地址）；执行npm run build打包React项目，得到可部署的静态文件
• 后端：修改服务监听地址为0.0.0.0（允许外部访问），在域名服务商的DNS管理后台添加A记录，将域名指向你的服务器公网IP
• 服务器端：开放后端服务对应的端口（或通过反向代理映射到80/443端口），确保防火墙允许外部访问

2. 仅需VPS还是其他配套服务 #

• 核心必备：VPS（或云服务器）、已解析的域名、HTTPS证书（涉及支付必须配置，否则浏览器会拦截支付相关请求）
• 推荐配套：
  • Nginx：做反向代理，托管前端静态文件、处理HTTPS、转发后端接口请求
  • PM2：Node.js进程管理器，确保后端服务崩溃后自动重启
  • 服务器防火墙：限制不必要的端口访问，提升安全性

3. 是否需要分别为前端和后端配置两个主机 #

不需要，同一个VPS即可搞定：
用Nginx做反向代理，配置路由规则：

• 根路径（/）的请求转发到React打包后的静态文件目录
• 接口路径（如/api/*）的请求转发到Node.js后端服务的监听端口
  这种方式成本更低，管理更方便，完全满足小流量应用需求

4. VPS vs 支持Node.js的共享主机（cPanel） #

更推荐入门级VPS：

• VPS权限更高，可自由配置Nginx、HTTPS、进程管理，适配你的前后端分离架构，可控性强
• 共享主机（cPanel）对Node.js版本、端口、自定义路由限制较多，处理支付相关的HTTPS配置和接口转发会很麻烦
• 入门级VPS（1核2G内存）成本低，完全能承载小流量的支付应用

内容的提问来源于stack exchange，提问作者Daniel Sanchez Islas