React+Express项目部署与反代设置教程

golang学习网今天将给大家带来《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 地址。

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

首先，检查 Nginx 配置文件语法是否正确：sudo nginx -t。 其次，确认后端服务是否正常运行，可以尝试直接在服务器上用 curl http://localhost:3000/api/some-endpoint 访问后端 API。 如果后端没问题，再检查 Nginx 的 proxy_pass 配置是否正确，端口号、路径有没有错。 最后，查看 Nginx 的错误日志：/var/log/nginx/error.log，里面会有详细的错误信息。 另外，前端请求的 API 地址要和 Nginx 配置的 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。 访问你的网站，应该就能看到 HTTPS 了。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。