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

简介: 本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。

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

下载地址:https://nginx.org/download/

下载“nginx-1.9.9.tar.gz”,移动到/usr/local/下

cd /usr/local/

注:也可以先进入到上述目录,然后执行下面这条命令一键下载tar包,更方便

wget http://nginx.org/download/nginx-1.9.9.tar.gz

解压

tar -zxvf nginx-1.9.9.tar.gz

进入nginx目录

cd nginx-1.9.9

进行配置

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

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

注:这里编译的时候如果出现如下图所示的错误,说明gcc把警告当成错误处理了

我们进入 /usr/local/nginx-1.9.9/objs/ 目录,找到Makefile文件,将下图所示 -Werror去掉即可

如果出现下面这个错误,则根据错误日志找到对应的文件将这一行注释即可(目前网络上搜寻的都是这种解决办法)

补:这个教程我在四台服务器上都试了,只有其中一台出现了上述两个问题,由于知识浅薄,确实没能深究原因,若有前辈知道原因,欢迎加文末联系方式或评论区指导,感激不尽!

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

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

目录
相关文章
|
10月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
984 1
|
11月前
|
移动开发 前端开发 JavaScript
Vue与React两大前端框架的主要差异点
以上就是Vue和React的主要差异点,希望对你有所帮助。在选择使用哪一个框架时,需要根据项目的具体需求和团队的技术栈来决定。
620 83
|
10月前
|
Java 关系型数据库 MySQL
在Linux平台上进行JDK、Tomcat、MySQL的安装并部署后端项目
现在,你可以通过访问http://Your_IP:Tomcat_Port/Your_Project访问你的项目了。如果一切顺利,你将看到那绚烂的胜利之光照耀在你的项目之上!
512 41
|
10月前
|
运维 前端开发 数据可视化
【CodeBuddy】挑战一句话开发一个完整项目之:React表单验证系统
本文分享了一个基于React 19构建的用户注册表单系统,采用模块化CSS和状态驱动视图更新,实现实时校验、错误提示与提交反馈等功能。核心亮点包括验证规则引擎(如密码复杂度校验)、交互反馈体系(输入框警示、按钮禁用)及加载动画优化。通过函数式更新确保状态同步,正则表达式实现多条件验证,CSS伪元素打造流畅体验。代码结构清晰,可扩展性强,适合作为React表单开发模板。文末附CodeBuddy免费下载链接,助力高效开发!
264 1
【CodeBuddy】挑战一句话开发一个完整项目之:React表单验证系统
|
10月前
|
JavaScript 前端开发 编译器
Vue与TypeScript:如何实现更强大的前端开发
Vue.js 以其简洁的语法和灵活的架构在前端开发中广受欢迎,而 TypeScript 作为一种静态类型语言,为 JavaScript 提供了强大的类型系统和编译时检查。将 Vue.js 与 TypeScript 结合使用,不仅可以提升代码的可维护性和可扩展性,还能减少运行时错误,提高开发效率。本文将介绍如何在 Vue.js 项目中使用 TypeScript,并通过一些代码示例展示其强大功能。
438 22
|
人工智能 JavaScript 前端开发
Vue 性能革命:揭秘前端优化的终极技巧;Vue优化技巧,解决Vue项目卡顿问题
Vue在处理少量数据和有限dom的情况下技术已经非常成熟了,但现在随着AI时代的到来,海量数据场景会越来越多,Vue优化技巧也是必备技能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
前端开发 应用服务中间件 nginx
docker安装nginx,前端项目运行
通过上述步骤,你可以轻松地在Docker中部署Nginx并运行前端项目。这种方法不仅简化了部署流程,还确保了环境的一致性,提高了开发和运维的效率。确保按步骤操作,并根据项目的具体需求进行相应的配置调整。
1302 25
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
372 10
|
10月前
|
应用服务中间件 Linux 网络安全
Centos 8.0中Nginx配置文件和https正书添加配置
这是一份Nginx配置文件,包含HTTP与HTTPS服务设置。主要功能如下:1) 将HTTP(80端口)请求重定向至HTTPS(443端口),增强安全性;2) 配置SSL证书,支持TLSv1.1至TLSv1.3协议;3) 使用uWSGI与后端应用通信(如Django);4) 静态文件托管路径设为`/root/code/static/`;5) 定制错误页面(404、50x)。适用于Web应用部署场景。
945 87
|
6月前
|
编解码 应用服务中间件 Linux
centos配置nginx-rtmp实现ffmpeg转码rtsp为rtmp视频流
centos配置nginx-rtmp实现ffmpeg转码rtsp为rtmp视频流
568 1