如何在服务器上运行ReactJS项目 实现访问URL无需带端口号

浏览器默认HTTP请求走80端口、HTTPS走443端口，访问这两个端口的服务时不需要在URL中显式携带端口号，要实现你的需求，可根据部署场景选择以下方案：

方案1：修改React开发服务启动端口（仅适合本地/测试场景） #

如果当前是直接用React内置的开发服务器对外提供服务，可直接修改启动命令指定监听端口为80（HTTP）或443（HTTPS）：

• Linux/macOS 环境：PORT=80 npm start
• Windows CMD 环境：set PORT=80 && npm start
• Windows PowerShell 环境：($env:PORT=80) -and (npm start)

注意：1024以下的端口属于系统特权端口，绑定需要管理员/root权限，Linux环境下执行命令时可前缀sudo获取权限

方案2：反向代理部署（生产环境首选） #

React内置的开发服务器性能、稳定性都不足以支撑生产环境使用，更推荐先打包静态资源，再用Nginx、Caddy等Web服务托管，示例操作如下：

1. 执行打包命令生成静态资源：npm run build，打包后的资源会存储在项目根目录的build文件夹下
2. 以Nginx为例，新增站点配置：

server {
    listen 80;
    server_name example.site.com; # 替换为你自己的域名
    root /www/your-project/build; # 替换为你本地build文件夹的绝对路径
    index index.html index.htm;

    location / {
        try_files $uri $uri/ /index.html; # 适配React路由的history模式
    }
}

3. 保存配置后重启Nginx服务，直接访问域名即可正常打开站点，无需携带端口。

方案3：端口转发（临时快速适配） #

如果不想改动现有服务配置，Linux环境下可以用iptables做端口转发，把80端口的请求全部转发到3000端口：

• 执行命令：iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-port 3000
• 该方案仅适合临时测试使用，生产环境仍推荐使用反向代理方案。

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