在Google Cloud VM上运行两个ReactJS前端遇端口及NPM解析问题

第一步：修复package.json的EJSONPARSE错误 #

该错误源于package.json不符合标准JSON语法，按以下步骤处理：

• 打开第二个项目的package.json，定位到第775行，排查常见问题：
  • 是否存在JavaScript风格注释（// 或 /* */），JSON不支持注释，必须删除
  • 字符串是否未正确闭合（如缺少双引号）
  • 键值对末尾是否多了逗号（如最后一个属性后多余的逗号）
• 验证JSON格式：全局安装jsonlint工具后检查文件：

  npm install -g jsonlint
  jsonlint package.json
  

  根据工具提示修复语法错误后，重新执行npm install。

第二步：解决第二个React版本无法启动的问题 #

在npm install成功后，按以下步骤排查：

• 检查端口占用：确认4000端口未被其他进程占用，运行命令：

  lsof -i :4000
  # 或备选命令
  netstat -tulpn | grep 4000
  

  若有进程占用，可杀掉该进程（kill -9 <进程ID>），或把start脚本的端口改为其他未被占用的数值（如4001）。
• 配置防火墙规则：在Google Cloud控制台为VM实例添加入站规则，允许TCP协议的目标端口（4000或自定义端口）流量，目标选择该VM实例或对应标签。
• 确认启动脚本格式：确保package.json的start脚本无语法错误：

  "scripts": {
    "start": "react-scripts start --host 0.0.0.0 --port 4000"
  }
  

• 查看启动日志：执行npm start后观察控制台输出，根据具体错误信息（如依赖缺失、端口绑定失败）针对性修复。

第三步：实现两个版本同时运行 #

• 第一个项目保持3000端口的启动脚本不变，正常启动：npm start
• 第二个项目修复完成后启动：npm start
• 如需后台运行，可使用nohup命令：

  # 第一个项目后台运行，日志输出到project1.log
  nohup npm start > project1.log 2>&1 &
  # 第二个项目后台运行，日志输出到project2.log
  nohup npm start > project2.log 2>&1 &
  

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