随着前端技术的发展，越来越多的应用逐渐从客户端向Web端转移，而React作为当今最流行的前端技术之一，已经被许多企业和开发者广泛应用。在项目开发完成后，如何将其部署到线上服务器上，进而为线上业务提供支持，变得尤为重要。
本篇文章主要介绍如何使用PM2和Nginx来实现React项目的自动化部署。
PM2简介
PM2是一个带有负载均衡功能的Node.js进程管理工具，它能够简化和优化Node.js应用程序的管理和部署过程。它是一个重要的工具，可以帮助我们自动化的启动、重启、停止和监控我们的Node.js程序。通过PM2，我们可以将Node.js应用程序按照不同的需求来管理，如启动多个进程、监控的CPU及内存使用情况等等。
Nginx简介
Nginx是一个高性能的HTTP反向代理服务器和电子邮件（IMAP / POP3）代理服务器。Nginx的优点在于它的高性能、稳定性以及丰富的功能。
Nginx的反向代理功能可以将客户端请求发送到后端服务器并将后端服务器的响应返回给客户端。因此，我们可以使用Nginx将浏览器中的请求路由到不同的服务，起到反向代理的作用。在本篇文章中，我们将使用Nginx来代理React应用程序。
环境准备
在我们开始使用PM2和Nginx之前，需要安装Node.js和Nginx。因此，我们需要安装Node.js和Nginx，并同时安装pm2：
npm install -g pm2
PM2部署React应用程序
- 使用
create-react-app脚手架创建一个React项目：
npx create-react-app my-app
- 将项目构建为静态文件：
cd my-app npm run build
- 启动PM2：
pm2 start serve --name "react-app" --listen 80 -- -s build
serve是一个静态服务器，在这里我们使用它来启动我们React项目中的静态文件。--name选项设置该进程的名称。--listen选项指定了服务器监听的端口。-s build选项告诉服务器静态文件存储在build目录中。
- 通过
pm2 status查看进程状态：
pm2 status
- 将PM2设置为开机启动：
pm2 startup
Nginx配置反向代理
- 首先，我们需要编辑Nginx的server配置文件。在Ubuntu上，这个文件通常被放在/etc/nginx/sites-available/default位置。
sudo nano /etc/nginx/sites-available/default
- 在server块中添加以下内容：
location /react-app {
proxy_pass http://127.0.0.1;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_cache_bypass $http_upgrade;
}- location /react-app告诉Nginx我们要将my-app的React应用程序代理到这里。
- proxy_pass http://127.0.0.1告诉Nginx这个位置的请求应该转发到本地主机上的HTTP端口（默认端口是80）。
- proxy_set_header Upgrade $http_upgrade 和 proxy_set_header Connection
upgrade告诉Nginx在升级到WebSockets时进行升级。 - proxy_set_header Host $host告诉Nginx使用原始请求中的Host头，而不是代理之后的Host头。
- 在server块末尾添加以下内容：
location / {
try_files $uri $uri/ =404;
}- 这个配置指示Nginx访问根目录时如何表现。
- 重新加载Nginx配置文件：
sudo nginx -t && sudo service nginx reload
测试自动化部署
现在，我们已经成功将React应用程序通过PM2自动化部署。我们只需要做一些简单的测试来确认这个部署是否正常工作：
在浏览器中输入服务器IP地址，可以看到React应用程序已经部署成功了。
在服务器上进行修改：
cd my-app/src nano App.js
- 停止服务：
pm2 stop react-app
- 重新构建：
cd my-app npm run build
- 重启服务：
pm2 start react-app
- 在浏览器中输入服务器IP地址，看到修改已经生效。
通过以上测试，我们验证了自动化部署可以帮助我们轻松地部署React应用程序到服务器上，而无需手动配置系统环境。
总结
本文介绍了如何使用PM2和Nginx将React应用程序部署到服务器中，从而实现自动部署。通过本文所述的方法，我们可以将React应用程序轻松地部署到生产环境中，并在应用程序进行修改时，快速更新部署的应用。这大大提升了我们的开发-部署效率。
除了本文所涉及的部署方法之外，还有其他一些方法可以部署React应用程序。但是，本文所提到的方法是最简单、最快速的一种方式，也是最易于理解和操作的一种方式。希望读者通过本文，能够更加深入地了解React应用程序的自动化部署，提升个人技能水平。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65965222eb4cecbf2da27cf2