当前位置: 首页 > news >正文

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

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

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • vue-入门速通
  • Java基础知识扫盲
  • 【ppt2svg svg2png/jpg】ppt转图片解决方案
  • [Linux]用户管理指令
  • openai最新o1上线(2024年09月12日)
  • 研1日记15
  • PHPStorm如何调整字体大小
  • 网络信息传输安全
  • 1.《DevOps》系列K8S部署CICD流水线之部署K8S集群~version1.28.2
  • Qt_事件的介绍
  • C语言中的typedef简介
  • 达梦-华为鲲鹏ARM架构下性能测试最佳实践
  • 【字符串】介绍
  • 『功能项目』事件中心处理怪物死亡【55】
  • MyBatis 源码解析:Mapper 文件加载与解析
  • android高仿小视频、应用锁、3种存储库、QQ小红点动画、仿支付宝图表等源码...
  • Electron入门介绍
  • Laravel 中的一个后期静态绑定
  • MySQL几个简单SQL的优化
  • Tornado学习笔记(1)
  • underscore源码剖析之整体架构
  • v-if和v-for连用出现的问题
  • 初探 Vue 生命周期和钩子函数
  • 理解在java “”i=i++;”所发生的事情
  • 聊聊sentinel的DegradeSlot
  • 扫描识别控件Dynamic Web TWAIN v12.2发布,改进SSL证书
  • 听说你叫Java(二)–Servlet请求
  • 推荐一个React的管理后台框架
  • 用 vue 组件自定义 v-model, 实现一个 Tab 组件。
  • 掌握面试——弹出框的实现(一道题中包含布局/js设计模式)
  • Android开发者必备:推荐一款助力开发的开源APP
  • ​​​​​​​GitLab 之 GitLab-Runner 安装,配置与问题汇总
  • ​Linux Ubuntu环境下使用docker构建spark运行环境(超级详细)
  • ​业务双活的数据切换思路设计(下)
  • #565. 查找之大编号
  • #我与Java虚拟机的故事#连载17:我的Java技术水平有了一个本质的提升
  • (16)UiBot:智能化软件机器人(以头歌抓取课程数据为例)
  • (C语言)输入自定义个数的整数,打印出最大值和最小值
  • (C语言版)链表(三)——实现双向链表创建、删除、插入、释放内存等简单操作...
  • (HAL库版)freeRTOS移植STMF103
  • (JS基础)String 类型
  • (过滤器)Filter和(监听器)listener
  • (含笔试题)深度解析数据在内存中的存储
  • (淘宝无限适配)手机端rem布局详解(转载非原创)
  • (原創) 未来三学期想要修的课 (日記)
  • .\OBJ\test1.axf: Error: L6230W: Ignoring --entry command. Cannot find argumen 'Reset_Handler'
  • .cfg\.dat\.mak(持续补充)
  • .MyFile@waifu.club.wis.mkp勒索病毒数据怎么处理|数据解密恢复
  • .net开发时的诡异问题,button的onclick事件无效
  • .sh文件怎么运行_创建优化的Go镜像文件以及踩过的坑
  • ??eclipse的安装配置问题!??
  • []新浪博客如何插入代码(其他博客应该也可以)
  • [001-03-007].第07节:Redis中的管道
  • [04] Android逐帧动画(一)
  • [acm算法学习] 后缀数组SA