如何托管前端非React的Node.js+MongoDB网站至Netlify与Heroku

一、后端部署到Heroku #

• 部署前本地代码校验
  • 检查package.json：start脚本必须用node启动入口文件，比如node server.js，不要用nodemon等开发依赖作为启动命令；所有运行时依赖必须装在dependencies字段下，不要只放在devDependencies里
  • 端口配置不要写死：代码中监听的端口必须改为process.env.PORT || 你的本地开发端口，Heroku会自动分配运行端口
  • 数据库替换为云服务：不要使用本地MongoDB服务，申请MongoDB Atlas免费集群，将数据库连接串存在环境变量中，不要硬编码在代码里
  • 跨域配置：提前把后续Netlify分配的域名加入cors允许源列表，不要只放行localhost本地地址
• 部署操作流程
  1. 本地安装Heroku CLI，终端执行heroku login完成账号登录
  2. 进入后端项目根目录，执行heroku create 自定义的后端应用名称创建应用
  3. 进入Heroku后台对应应用的Settings - Config Vars页面，添加所有需要的环境变量，包括MONGODB_URI、项目用到的JWT密钥、其他自定义配置项
  4. 确认根目录存在.gitignore文件，将node_modules、.env等不需要提交的文件加入忽略列表
  5. 提交代码后执行git push heroku main（本地分支为master则替换为master），等待构建流程跑完
  6. 构建完成后执行heroku open打开后端默认域名，测试接口是否能正常响应、数据库是否连通
• 常见报错排查

  部署后接口返回503错误时，直接在终端执行heroku logs --tail查看实时日志，优先排查三类问题：端口是否写死、运行时依赖是否漏装、数据库连接串是否配置正确

二、前端（原生HTML/CSS/JS）部署到Netlify #

• 部署前代码校验
  • 全局替换接口地址：将代码中所有写死的本地后端请求前缀（比如http://localhost:5000/api）替换为刚才部署完成的Heroku后端域名，建议抽成全局常量统一管理
  • 资源路径检查：所有CSS、JS、图片的引用路径使用相对路径，避免写绝对路径导致部署后资源404
• 部署操作流程
  1. 将前端所有文件整理到单独文件夹，确认入口文件index.html在文件夹根目录
  2. 登录Netlify账号，选择新增站点，支持两种部署方式：手动拖拽上传前端文件夹直接部署，或者关联GitHub仓库开启自动部署
  3. 关联GitHub仓库部署时，构建命令留空（原生静态文件不需要编译构建），发布目录选择前端文件所在的文件夹路径，点击触发部署即可
  4. 等待1分钟左右部署完成，平台会自动分配可访问的默认域名，也可以在站点设置里自定义域名
• 常见报错排查

  页面打开后样式、脚本加载404，优先检查Netlify部署配置里的发布目录是否选对；接口请求报跨域错误，回到Heroku后端的cors配置，把当前Netlify分配的域名加入允许源列表后重新部署后端

三、部署完成校验 #

• 访问Netlify分配的前端域名，测试博客列表浏览、内容发布、评论提交等全量功能
• 打开浏览器开发者工具控制台，确认无红色报错，所有接口请求返回200状态码
• 新增测试博客内容后，去MongoDB Atlas后台核对数据是否正常写入，确认数据库链路通畅

内容的提问来源于stack exchange，提问作者Md Reyaz