linux安装nginx+前端部署vue项目（实际测试react项目也可以）

🧸本篇博客作者测试上线过不下5个项目，包括单纯的静态资源，vue项目和react项目，包好用，请放心使用

📜作者首页：dream_ready-CSDN博客

📜有任何问题都可以评论留言，作者将会实时回复

1、打包前端项目

npm run build

执行完后会在根目录下生成一个dist文件夹，这个dist文件夹就是我们需要的东西

自己建一个目录，上传即可（尽量不要在root目录下，可能涉及权限问题）

yum -y install gcc pcre-devel zlib-devel openssl openssl-devel

下载"nginx-1.9.9.tar.gz"，移动到/usr/local/下

解压

tar -zxvf nginx-1.9.9.tar.gz

进入nginx目录

cd nginx-1.9.9

进行配置

下面三条命令依次执行，上一个执行完后再执行下一个

./configure --prefix=/usr/local/nginx

 make

make install

进入下面这个目录进行修改

vim /usr/local/nginx/conf/nginx.conf

需要修改以下四处，当然，你自己会的话随意，不会的话按我的来

需要注意的是dist文件夹尽量放在根目录下自己建的文件夹里，不要放在root里，可能会涉及权限问题，导致前端报错403

注：如果抓包发现请求返回html页面，不是正常返回响应 ，说明你不是幸运儿，你需要正常写请求转发的配置文件，看文末

cd /usr/local/nginx/sbin
./nginx //启动nginx

# 未配置环境变量使用绝对路径运行
/usr/local/nginx/sbin/nginx -s reload

权限问题

估计你的dist项目放在root目录里了

在根目录下创建一个文件夹，将dist文件夹放到这个文件夹下，记得修改配置文件，然后重启nginx

没找到文件夹

先自己看一下配置文件，dist文件夹位置，index等是否正确，如果都正确，先重启一下nginx，清除浏览器缓存，再尝试访问，如果依然不行，则在nginx配置文件中加入下面这句话

try_files $uri $uri/ /index.html;

注意我的位置，不要添加错误，添加完后保存配置文件，然后重启nginx，理论上就可以了

请求返回html代码，不是正常返回响应，说明请求没正常到达后端，需要配置请求转发，如下：

/auth/表示请求中带atuh的请求都将其转发到 http://192.168.17.128:5000

假如我正常的url是

http://192.168.17.128:5173/auth/user/doLogin?validCode=308

那么转发后的url就是

http://192.168.17.128:5000/auth/user/doLogin?validCode=308

根据自己的项目合理配置即可