react 项目打包部署nginx

在 React 项目开发完成后,可以将其打包并通过 Nginx 部署到服务器上。以下是详细步骤:

1. 打包 React 项目

生成生产环境文件

在 React 项目的根目录运行以下命令:

bash 复制代码
npm run build

这会在项目目录中生成一个 build/ 文件夹,包含优化后的静态资源文件。

2. 上传打包文件到服务器

将 build/ 文件夹上传到目标服务器的指定路径,例如 /var/www/react-app。

使用 scp 命令上传

bash 复制代码
scp -r build/ user@server_ip:/var/www/react-app

3. 配置 Nginx

3.1 安装 Nginx

如果服务器未安装 Nginx,可以先安装:

Ubuntu/Debian:

bash 复制代码
sudo apt update
sudo apt install nginx

CentOS:

bash 复制代码
sudo yum install nginx

3.2 配置 Nginx 站点

编辑 Nginx 配置文件,为 React 项目创建一个站点配置文件:

bash 复制代码
sudo nano /etc/nginx/sites-available/react-app

配置内容示例:

bash 复制代码
server {
    listen 80;
    server_name your-domain.com; # 替换为你的域名或服务器 IP

    root /var/www/react-app; # 指向 React 打包文件的路径
    index index.html;

    location / {
        try_files $uri /index.html;
    }

    error_page 404 /index.html; # React 路由处理
}

启用站点配置

bash 复制代码
sudo ln -s /etc/nginx/sites-available/react-app /etc/nginx/sites-enabled/

测试 Nginx 配置

bash 复制代码
sudo nginx -t

重启 Nginx

bash 复制代码
sudo systemctl restart nginx

4. 配置防火墙

确保服务器的 HTTP 端口(80)是开放的:

允许 HTTP 流量:

bash 复制代码
sudo ufw allow 80

检查防火墙状态:

bash 复制代码
sudo ufw status

5. 验证部署

在浏览器中访问:

bash 复制代码
http://your-domain.com

如果显示 React 应用,则部署成功!

6. 配置 HTTPS(可选)

为了提高安全性,建议为网站配置 HTTPS。

使用 Let's Encrypt 配置免费 HTTPS

安装 Certbot:

bash 复制代码
sudo apt install certbot python3-certbot-nginx

生成并配置 HTTPS 证书:

bash 复制代码
sudo certbot --nginx -d your-domain.com

Certbot 会自动更新 Nginx 配置文件并启用 HTTPS。

7. 单页面应用路由处理

React 是单页面应用,所有路由(如 /about, /contact)都需要返回 index.html。Nginx 的 try_files 配置已处理此问题:

bash 复制代码
location / {
    try_files $uri /index.html;
}

确保此配置生效。

完整流程总结

打包项目:

bash 复制代码
npm run build

上传文件:

bash 复制代码
scp -r build/ user@server_ip:/var/www/react-app

配置 Nginx:

创建 /etc/nginx/sites-available/react-app,并配置站点。

重启 Nginx:

bash 复制代码
sudo systemctl restart nginx

配置防火墙和 HTTPS(可选):

打开端口 80 和 443。

使用 Certbot 配置免费 HTTPS。

完成后,访问网站即可查看 React 应用。

注意事项

如果是单页面应用(如 React 或 Vue),需要确保 index.html 处理路由,使用 try_files 或 error_page 将所有路径重定向到 index.html。

生产环境下尽量不要将项目放置在 /root 目录中,推荐使用 /var/www 或其他非 root 用户目录。

检查目录权限

确保 Nginx 用户(通常是 www-data 或 nginx)有权限访问目标目录和文件。

更改权限

bash 复制代码
sudo chmod -R 755 /root/platform/manager
sudo chown -R www-data:www-data /root/platform/manager

检查 Nginx 日志是否仍然报错:

bash 复制代码
sudo tail -f /var/log/nginx/error.log

重新加载 Nginx 配置

如果修改了配置,保存后重新加载:

bash 复制代码
sudo nginx -t   # 检查配置是否正确
sudo systemctl reload nginx

完整nginx配置示例

bash 复制代码
server {
    listen 80;
    server_name platform.xx.com;

    root /root/platform/manager;
    index index.html;

    location / {
        try_files $uri /index.html;
    }

    error_page 404 /index.html;
}
相关推荐
_丿丨丨_4 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20154 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
hbrown9 小时前
Flask+LayUI开发手记(十一):选项集合的数据库扩展类
前端·数据库·python·layui
猫头虎9 小时前
什么是 npm、Yarn、pnpm? 有什么区别? 分别适应什么场景?
前端·python·scrapy·arcgis·npm·beautifulsoup·pip