react 项目打包部署nginx

news/2024/12/22 21:52:48 标签: react.js, nginx, 前端

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

1. 打包 React 项目

生成生产环境文件
在 React 项目的根目录运行以下命令:

npm run build

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

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

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

使用 scp 命令上传

scp -r build/ user@server_ip:/var/www/react-app

3. 配置 Nginx

3.1 安装 Nginx

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

Ubuntu/Debian:

sudo apt update
sudo apt install nginx

CentOS:

sudo yum install nginx

3.2 配置 Nginx 站点

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

sudo nano /etc/nginx/sites-available/react-app

配置内容示例:

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 路由处理
}

启用站点配置

sudo ln -s /etc/nginx/sites-available/react-app /etc/nginx/sites-enabled/

测试 Nginx 配置

sudo nginx -t

重启 Nginx

sudo systemctl restart nginx

4. 配置防火墙

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

允许 HTTP 流量:

sudo ufw allow 80

检查防火墙状态:

sudo ufw status

5. 验证部署

在浏览器中访问:

http://your-domain.com

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

6. 配置 HTTPS(可选)

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

使用 Let’s Encrypt 配置免费 HTTPS

安装 Certbot:

sudo apt install certbot python3-certbot-nginx

生成并配置 HTTPS 证书:

sudo certbot --nginx -d your-domain.com

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

7. 单页面应用路由处理

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

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

确保此配置生效。

完整流程总结

打包项目:

npm run build

上传文件:

scp -r build/ user@server_ip:/var/www/react-app

配置 Nginx:

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

重启 Nginx:

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)有权限访问目标目录和文件。

更改权限

sudo chmod -R 755 /root/platform/manager
sudo chown -R www-data:www-data /root/platform/manager

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

sudo tail -f /var/log/nginx/error.log

重新加载 Nginx 配置

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

sudo nginx -t   # 检查配置是否正确
sudo systemctl reload nginx

nginx_212">完整nginx配置示例

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;
}


http://www.niftyadmin.cn/n/5795947.html

相关文章

读书笔记~管理修炼

GRAI复盘法:学会正确复盘 复盘是管理者最重要的能力。 GRAI复盘法包括四要素: G—Goal(回顾目标):目标永远是最重要的要素,每次复盘或制定战略,请多问自己几次,你的目标是…

SAP PP ECN CSAP_MAT_BOM_MAINTAIN

刚开始的时候ECN总是加不上, 参考kimi给出的案例 点击链接查看和 Kimi 智能助手的对话 https://kimi.moonshot.cn/share/cth1ipmqvl7f04qkggdg 效果 加上了 FUNCTION ZPBOM_PLM2SAP. *"------------------------------------------------------------------…

如何缩放组件

文章目录 1 概念介绍2 使用方法3 示例代码我们在上一章回中介绍了Checkbox Widget相关的内容,本章回中将介绍Transform Widget.闲话休提,让我们一起Talk Flutter吧。 1 概念介绍 我们在这里说的Transform是一种容器类widget,它和Container组件类似。它可以包含其它的组件,并…

R机器学习:朴素贝叶斯算法的理解与实操

最近又看了很多贝叶斯算法的一些文章,好多的文章对这个算法解释起来会放一大堆公式,对代数不好的人来说真的很头疼。本文尝试着用大白话写写这个算法,再做个例子,帮助大家理解和运用。 Naive Bayes is a probabilistic machine le…

几个常见的Jmeter压测问题

🍅 点击文末小卡片,免费获取软件测试全套资料,资料在手,涨薪更快 根据在之前的压测过程碰到的问题,今天稍微总结总结,以后方便自己查找。 一、单台Mac进行压测时候,压测客户端Jmeter启动超过20…

HIPT论文阅读

题目《Scaling Vision Transformers to Gigapixel Images via Hierarchical Self-Supervised Learning》 论文地址:[2206.02647] Scaling Vision Transformers to Gigapixel Images via Hierarchical Self-Supervised Learning 项目地址:mahmoodlab/HI…

攻防世界easyphp

<?php highlight_file(__FILE__); $key1 0; $key2 0;$a $_GET[a]; $b $_GET[b];if(isset($a) && intval($a) > 6000000 && strlen($a) < 3){if(isset($b) && 8b184b substr(md5($b),-6,6)){$key1 1;}else{die("Emmm...再想想&quo…

LeetCode 2545.根据第 K 场考试的分数排序:考察编程语言的排序

【LetMeFly】2545.根据第 K 场考试的分数排序&#xff1a;考察编程语言的排序 力扣题目链接&#xff1a;https://leetcode.cn/problems/sort-the-students-by-their-kth-score/ 班里有 m 位学生&#xff0c;共计划组织 n 场考试。给你一个下标从 0 开始、大小为 m x n 的整数…