React项目部署到Nginx的端口配置与实战指南

8 次阅读

React项目部署到Nginx时，端口配置是一个非常关键的环节。很多前端开发者在本地运行React项目时一切正常，但打包部署到服务器后，却遇到页面无法访问、刷新404、接口请求失败等问题。这些问题通常与Nginx监听端口、React静态资源路径以及代理配置有关。

掌握React项目与Nginx端口配置的关系，可以帮助开发者快速完成生产环境部署，提高项目稳定性。

一、React项目部署到Nginx的基本流程

React项目经过开发完成后，需要先进行生产环境打包。

常见构建命令如下：

Bash
npm run build

执行成功后，会生成一个build目录：

react-project
├── src
├── public
├── package.json
└── build
    ├── index.html
    ├── static
    ├── asset-manifest.json

其中：

  • index.html是项目入口文件；

  • static目录保存JS、CSS以及图片等静态资源；

  • 整个build目录就是部署到Nginx的内容。

Nginx并不会运行React代码，而是负责提供这些静态文件访问服务。

部署流程通常如下：

  1. React执行生产构建；

  2. 将build目录上传到服务器；

  3. 配置Nginx监听端口；

  4. 设置React路由支持；

  5. 配置接口反向代理；

  6. 重启Nginx服务。

二、理解React与Nginx端口之间的关系

很多初学者容易混淆React开发服务器端口和Nginx服务器端口。

1. React开发环境端口

使用：

Bash
npm start

启动React项目时，默认端口通常是：

localhost:3000

例如：

http://localhost:3000

这个端口由React脚手架提供，仅用于开发调试。

如果需要修改，可以在.env文件中配置：

PORT=3001

启动后访问：

http://localhost:3001

但是生产部署时，并不会使用这个端口。

2. Nginx生产环境端口

部署后，用户访问的是Nginx监听的端口。

例如：

server {
    listen 80;
    server_name example.com;

    root /var/www/react/build;
}

此时：

http://example.com

实际访问的是：

Nginx:80端口

React只是作为静态资源存在。

如果修改Nginx端口：

例如：

server {
    listen 8080;
    server_name example.com;

    root /var/www/react/build;
}

访问地址变为：

http://example.com:8080

因此：

  • React开发端口负责本地开发；

  • Nginx端口负责线上访问。

二者没有直接关联。

三、Nginx部署React项目核心配置

一个简单React项目部署配置如下：

Nginx
server {

    listen 80;

    server_name example.com;

    root /usr/share/nginx/html/react;

    index index.html;


    location / {

        try_files $uri /index.html;

    }

}

配置说明：

listen

定义Nginx监听端口：

Nginx
listen 80;

表示监听80端口。

如果修改：

Nginx
listen 8080;

则需要通过：

http://服务器IP:8080

访问。

root

指定React打包文件位置：

Nginx
root /usr/share/nginx/html/react;

例如：

/usr/share/nginx/html/react/index.html

就是网站首页。

try_files

React使用React Router时必须配置：

Nginx
try_files $uri /index.html;

否则访问：

/user/profile

刷新页面时，Nginx会寻找：

user/profile/index.html

导致：

404 Not Found

配置后：

所有不存在的路径都会返回：

index.html

交给React路由处理。

四、React部署到指定Nginx端口实战

假设服务器环境：

服务器IP:
192.168.1.100

React项目:
my-react-app

访问端口:
9000

第一步：构建React项目

进入项目目录：

Bash
cd my-react-app

执行：

Bash
npm run build

生成：

build/

第二步：上传build目录

例如上传到：

/data/www/react-app

目录结构：

/data/www/react-app

├── index.html
├── static
│   ├── css
│   └── js

第三步：修改Nginx配置

编辑：

Bash
vim /etc/nginx/conf.d/react.conf

添加：

Nginx
server {

    listen 9000;

    server_name _;


    root /data/www/react-app;

    index index.html;


    location / {

        try_files $uri /index.html;

    }

}

保存后检查：

Bash
nginx -t

如果显示：

syntax is ok
test is successful

说明配置正确。

第四步：重新加载Nginx

执行：

Bash
systemctl reload nginx

访问：

http://192.168.1.100:9000

即可打开React应用。

五、React接口请求与Nginx端口代理配置

实际项目通常不仅有前端，还有后端API服务。

例如：

React：

http://example.com:9000

后端：

http://example.com:8080

如果直接请求：

JavaScript
axios.get("http://example.com:8080/api/user")

可能出现跨域问题。

更推荐使用Nginx代理。

配置：

Nginx
server {

    listen 9000;


    root /data/www/react-app;


    location / {

        try_files $uri /index.html;

    }


    location /api/ {

        proxy_pass http://127.0.0.1:8080/;

        proxy_set_header Host $host;

        proxy_set_header X-Real-IP $remote_addr;

    }

}

此时React请求：

JavaScript
axios.get("/api/user")

实际会转发：

9000/api/user
        |
        |
        v
8080/api/user

优点：

  • 避免跨域；

  • 隐藏后端端口；

  • 统一入口管理。

六、多个React项目使用不同端口部署

服务器可能同时运行多个前端项目。

例如：

项目A：

http://example.com:9000

项目B：

http://example.com:9001

Nginx配置：

项目A：

Nginx
server {

    listen 9000;

    root /data/project-a/build;

    location / {

        try_files $uri /index.html;

    }

}

项目B：

Nginx
server {

    listen 9001;

    root /data/project-b/build;

    location / {

        try_files $uri /index.html;

    }

}

两个项目互不影响。

七、使用域名部署时的端口优化

生产环境通常不会让用户访问：

example.com:9000

而是使用：

https://example.com

此时Nginx监听：

Nginx
listen 443 ssl;

或者：

Nginx
listen 80;

然后通过域名解析访问。

例如：

Nginx
server {

    listen 80;

    server_name www.example.com;


    root /data/www/react/build;


    location / {

        try_files $uri /index.html;

    }

}

用户无需关注具体端口。

八、React部署Nginx常见问题排查

1. 页面打开显示404

原因：

React Router路径无法匹配。

解决：

添加：

Nginx
try_files $uri /index.html;

2. 静态资源加载失败

例如：

Failed to load resource
/static/js/main.js

检查React配置。

如果项目部署在子目录：

例如：

http://example.com/app/

需要修改：

package.json

增加：

JSON
{
  "homepage": "/app"
}

重新构建：

Bash
npm run build

3. 修改端口后无法访问

检查：

Nginx是否监听端口

执行：

Bash
netstat -tunlp | grep 9000

或者：

Bash
ss -tunlp | grep 9000

防火墙是否开放

例如Linux：

Bash
firewall-cmd --add-port=9000/tcp --permanent

重新加载：

Bash
firewall-cmd --reload

4. Nginx配置修改后没有生效

检查：

Bash
nginx -t

确认无误后：

Bash
systemctl reload nginx

不要直接重启生产环境服务，避免造成短暂中断。

九、React项目部署Nginx端口配置最佳实践

实际生产环境中，建议遵循以下方案：

  1. 开发环境使用React默认3000端口；

  2. 生产环境统一交给Nginx管理；

  3. 前端静态资源使用80或443端口；

  4. 后端接口通过Nginx反向代理；

  5. 使用HTTPS保护线上访问；

  6. 配置gzip压缩提升加载速度；

  7. 使用缓存策略优化静态文件访问。

例如：

Nginx
location /static/ {

    expires 30d;

    add_header Cache-Control public;

}

可以让浏览器缓存静态资源，提高访问速度。

十、总结

React项目部署到Nginx时，端口配置的核心并不是修改React运行端口，而是正确配置Nginx监听端口以及静态文件目录。

开发阶段：

React -> localhost:3000

生产阶段：

用户 -> Nginx端口 -> React静态文件

如果涉及后端接口：

用户
 |
Nginx
 |
React静态资源
 |
API服务

通过合理配置listen、root、try_files以及proxy_pass，可以快速完成React项目稳定部署。

文章标签
React部署 Nginx配置 前端项目部署 Nginx端口 React Router