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

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

📜作者首页:dream_ready-CSDN博客

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

目录

1、打包

2、将dist包上传到服务器

3、安装并配置nginx

3.1、在安装nginx前需要先安装安装gcc、pcre-devel、zlib-devel、openssl-devel

3.2、下载nginx

3.3、修改配置文件

4、启动nginx

5、当之后每次修改配置文件后,nginx都要进行重启

常见错误解决办法

403

404


1、打包前端项目

复制代码
npm run build

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

2、将dist包上传到服务器

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

3、安装并配置nginx

3.1、在安装nginx前需要先安装安装gcc、pcre-devel、zlib-devel、openssl-devel

复制代码
yum -y install gcc pcre-devel zlib-devel openssl openssl-devel

3.2、下载nginx

下载地址:Index of /download/ (nginx.org)

下载"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

3.3、修改配置文件

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

复制代码
vim /usr/local/nginx/conf/nginx.conf

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

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

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

4、启动nginx

复制代码
cd /usr/local/nginx/sbin
./nginx //启动nginx

5、当之后每次修改配置文件后,nginx都要进行重启

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

常见错误解决办法

403

权限问题

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

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

404

没找到文件夹

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

复制代码
try_files $uri $uri/ /index.html;

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

请求返回html代码

请求返回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

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

相关推荐
子兮曰4 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰4 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万4 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝4 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
A黄俊辉A4 天前
uniapp webview中实现 app和内嵌的H5双向通信
vue.js·json
三十而立洋4 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
还是大剑师兰特4 天前
解决nginx错误:http://localhost:7000正常,http://localhost:7000/map 报错404
nginx·大剑师
卡布鲁4 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
liangshanbo12155 天前
React 性能瓶颈定位面试题——原理深挖版
react·performance·profiler
只睡四小时5 天前
Canvas 弹道联机实战:700 行 + 固定时间步长
python·websocket·html5·游戏开发·canvas