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

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

目录
相关文章
|
4月前
|
JavaScript 前端开发 API
对比Vue框架与React库的主要区别
在选择Vue还是React时,考虑项目的需求、团队的熟悉程度和个人偏好至关重要。如果项目需要快速原型开发和较小的学习曲线,Vue可能是更好的选择。相反,如果项目需要更大的灵活性,或者项目团队已经有React的经验,那么React可能是更合适的选择。
227 13
|
7月前
|
移动开发 前端开发 JavaScript
Vue与React两大前端框架的主要差异点
以上就是Vue和React的主要差异点,希望对你有所帮助。在选择使用哪一个框架时,需要根据项目的具体需求和团队的技术栈来决定。
448 83
|
9月前
|
存储 人工智能 编译器
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
540 10
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
|
7月前
|
SQL 缓存 关系型数据库
MySQL8.4 Enterprise安装Firewall及测试
MySQL8.4 Enterprise安装Firewall及测试
223 0
|
8月前
|
JavaScript 前端开发 算法
vue和react 哪个更强大
vue和react 哪个更强大
237 3
|
8月前
|
人工智能 测试技术 API
Windows用户必备:Postman v11详细安装指南与API测试入门教程(附官网下载
Postman是全球领先的API开发与测试工具,支持REST、SOAP、GraphQL等协议调试。2025年最新版v11新增AI智能生成测试用例、多环境变量同步等功能,适用于前后端分离开发、自动化测试、接口文档自动生成及团队协作共享API资源。本文详细介绍Postman的软件定位、核心功能、安装步骤、首次配置、基础使用及常见问题解答,帮助用户快速上手并高效利用该工具进行API开发与测试。
|
10月前
|
弹性计算 Ubuntu Java
OS-Copilot-ubuntu镜像版本的具体测试使用(安装方式有单独注明)
作为一名个人开发者,我主要负责云资源的运维和管理。在使用OS Copilot的过程中,我遇到了一些配置问题,特别是在ECS实例中设置AccessKey时,但最终成功解决了。通过使用OS Copilot的-t/-f/管道功能,我大大提升了效率,减少了命令编写的工作量,特别是在搭建Java运行环境时效果显著。此外,| 功能帮助我快速理解文档,整体体验非常流畅,推荐给其他开发者使用。
250 6
|
应用服务中间件 Linux nginx
Linux系列——Nginx的安装、测试详解以及关于Nginx的常用命令介绍
Linux系列——Nginx的安装、测试详解以及关于Nginx的常用命令介绍
|
tengine 应用服务中间件 Linux
【Linux环境】如何在Nginx(或Tengine)服务器上安装ssl证书----介绍nginx服务器类型证书的下载与安装操作
【Linux环境】如何在Nginx(或Tengine)服务器上安装ssl证书----介绍nginx服务器类型证书的下载与安装操作
856 0
|
应用服务中间件 Linux 网络安全
Linux日记本_07:Nginx安装SSL证书并配置http转https
https 上次写过一篇Linux下Nginx的搭建文章,这篇是补充SSL证书的安装与http请求转换成https请求. SSL证书是什么? ssl证书 当你点击证书的时候已经给了很明确的说明 1.保证远程计算机的身份 2.向远程计算机证明你的身份 证书信息 如果你很熟悉Nginx的话,那么在Nginx下安装SSL证书将会是一件很简单的事情.当然证书的安装方式有很多种,需要根据系统和所使用的软件不同来下载相关的资源,这里我们就不在赘述,我们只关注Nginx下相关的就OK了。
2120 0