如何在空闲端口运行PHP站点，与localhost:8000的React应用同时运行？

别担心，这事儿其实很简单，分两步就能让你的两个应用各占各的端口，和平共处：

1. 确保React/webpack应用稳定跑在localhost:8000 #

不管你的React项目是用create-react-app初始化的还是手动配置的webpack，只要确保启动时指定8000端口就行：

• 如果是create-react-app项目：
  • 要么启动时直接加端口参数：在Atom终端里运行 npm start -- --port 8000
  • 要么一劳永逸改package.json：找到scripts里的start命令，改成 "start": "react-scripts start --port 8000"，之后直接npm start就会自动用8000端口
• 如果是手动配置webpack的项目：
  打开webpack.config.js，找到devServer配置项，添加或修改port: 8000，比如：

  module.exports = {
    // 其他配置...
    devServer: {
      port: 8000,
      // 其他devServer设置...
    }
  };
  

  然后在Atom终端启动项目，它会稳稳占住8000端口，不会被Apache挤掉。

2. 修改Apache（XAMPP/WAMP）端口为8080 #

接下来把你的PHP站点所在的Apache服务改成8080端口，分系统操作：

针对Mac系统（XAMPP） #

1. 打开XAMPP控制面板，点击Apache模块旁边的「Config」按钮，选择「Apache (httpd.conf)」
2. 在打开的配置文件里，用搜索功能（快捷键Cmd+F）找到Listen 80，把它改成Listen 8080
3. 继续搜索ServerName localhost:80，改成ServerName localhost:8080
4. 保存文件，回到XAMPP控制面板重启Apache服务

针对Windows系统（WAMP） #

1. 右键点击任务栏里的WAMP图标，依次选择「Apache」→「httpd.conf」
2. 用搜索功能（快捷键Ctrl+F）找到Listen 80，替换成Listen 8080
3. 再找到ServerName localhost:80，改成ServerName localhost:8080
4. 保存文件后，右键WAMP图标选择「Restart All Services」重启服务

最后验证访问 #

• React应用：直接访问 http://localhost:8000
• PHP站点：访问 http://localhost:8080/你的PHP项目文件夹名（比如你的项目放在XAMPP的htdocs/myphpapp里，就访问http://localhost:8080/myphpapp）

小提示：如果8080端口被占用怎么办？ #

如果修改后Apache启动失败，大概率是8080被其他程序占了：

• Mac终端运行 lsof -i :8080 查看占用进程，然后用kill -9 进程ID杀掉
• Windows终端（管理员模式）运行 netstat -ano | findstr :8080 找到进程ID，然后用taskkill /F /PID 进程ID杀掉
  要是嫌麻烦，也可以把Apache端口改成其他未被占用的，比如8081、8090都行，只要和React的8000不重复就好。

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