React + Express 全栈项目部署指北（含反向代理配置）

部署 react + express 全栈项目需在服务器上配置前后端并使用反向代理实现无缝衔接；2. 准备云服务器并安装 node.js 和 npm；3. 部署 express 后端：上传代码、安装依赖、使用 pm2 管理进程；4. 部署 react 前端：构建静态文件并上传至服务器目录；5. 配置 nginx 反向代理，将前端请求与后端 api 路径分离，解决跨域问题；6. 通过域名解析绑定域名，并使用 certbot 配置 https 证书实现安全访问；7. 排查反向代理错误时依次检查 nginx 语法、后端服务状态、proxy_pass 配置及错误日志。最终用户可通过域名经 https 访问完整应用，前后端通过 nginx 协同工作，整个部署流程完成且稳定运行。

React + Express 全栈项目部署，说白了就是让你的代码从本地跑起来，到能让别人通过网络访问。关键在于服务器配置、前后端分离部署，以及反向代理，让前端和后端“无缝衔接”。

解决方案

1. 服务器准备： 搞一台服务器，阿里云、腾讯云、AWS都行，选个合适的配置。操作系统推荐 Ubuntu 或者 CentOS，稳定。

2. 安装 Node.js 和 npm： 这是后端运行的基础。直接用 nvm 安装，方便切换版本。

   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
   nvm install node
   nvm use node

   登录后复制

3. 后端 Express 项目部署：

   • 把你的 Express 项目代码上传到服务器。可以用

     scp

     登录后复制
     命令，或者 Git。
   • 安装依赖：

     npm install

     登录后复制
   • 启动项目：

     npm start

     登录后复制
     或者

     node server.js

     登录后复制
     （看你的启动脚本）。
   • 用

     pm2

     登录后复制
     管理进程，防止崩溃自动重启：

   npm install -g pm2
   pm2 start server.js --name my-backend
   pm2 startup systemd
   pm2 save

   登录后复制

4. 前端 React 项目部署：

   • npm run build

     登录后复制
     生成静态文件。
   • 把

     build

     登录后复制
     目录下的文件上传到服务器的某个目录，比如

     /var/www/react-app

     登录后复制
     。
   • 可以用

     nginx

     登录后复制
     或者

     apache

     登录后复制
     托管这些静态文件。

5. 反向代理配置（Nginx 为例）： 这是核心。让 Nginx 把前端的请求转发到后端的 Express 服务。

   • 安装 Nginx：

     sudo apt update && sudo apt install nginx

     登录后复制
   • 编辑 Nginx 配置文件：

     /etc/nginx/sites-available/default

     登录后复制
     (或者创建一个新的配置文件)

   server {
       listen 80;
       server_name yourdomain.com; # 你的域名
   
       location / {
           root /var/www/react-app; # 前端静态文件目录
           index index.html index.htm;
           try_files $uri $uri/ /index.html; # 解决 React Router 的问题
       }
   
       location /api/ { # 后端 API 的路径
           proxy_pass http://localhost:3000; # 后端 Express 服务地址和端口
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection 'upgrade';
           proxy_set_header Host $host;
           proxy_cache_bypass $http_upgrade;
       }
   }

   登录后复制
   • 重启 Nginx：

     sudo systemctl restart nginx

     登录后复制

6. 域名解析： 把你的域名解析到服务器的 IP 地址。

   

   琅琅配音

   全能AI配音神器

   208

   查看详情

Nginx 反向代理配置错误排查思路？

首先，检查 Nginx 配置文件语法是否正确：

sudo nginx -t

curl http://localhost:3000/api/some-endpoint

proxy_pass

/var/log/nginx/error.log

location /api/

为什么需要反向代理，直接让前端访问后端不行吗？

直接让前端访问后端，会有跨域问题。浏览器出于安全考虑，不允许跨域请求。 反向代理相当于让 Nginx 充当中间人，前端请求 Nginx，Nginx 再请求后端，这样就避免了跨域问题。 另一个好处是，可以隐藏后端的真实地址，提高安全性。 还有就是，可以做负载均衡，把请求分发到多台后端服务器。

HTTPS 证书如何配置？

用 Let's Encrypt 免费证书。

• 安装 Certbot：

sudo apt update
sudo apt install certbot python3-certbot-nginx

• 运行 Certbot：

sudo certbot --nginx -d yourdomain.com

Certbot 会自动配置 Nginx，并申请和安装证书。它还会自动续期证书。 只需要按照提示操作即可。 完成后，Nginx 配置文件会自动添加 HTTPS 的配置。 然后重启 Nginx：

sudo systemctl restart nginx

以上就是React + Express 全栈项目部署指北（含反向代理配置）的详细内容，更多请关注php中文网其它相关文章！