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

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

目录
相关文章
|
11月前
|
NoSQL 关系型数据库 Linux
ERPNext 搭建教程:Linux 一键部署与维护
ERPNext 是一款开源免费的企业资源计划系统,适用于中小企业信息化管理。基于 Python 和 Frappe 框架开发,支持财务、销售、人力、库存等模块,具备高度可定制性。本文介绍如何通过 Websoft9 在 Linux 下快速部署 ERPNext,并提供环境配置、系统维护等实用建议,适合开发者和企业用户快速上手。
2126 7
ERPNext 搭建教程:Linux 一键部署与维护
|
11月前
|
Java Linux 网络安全
Linux云端服务器上部署Spring Boot应用的教程。
此流程涉及Linux命令行操作、系统服务管理及网络安全知识,需要管理员权限以进行配置和服务管理。务必在一个测试环境中验证所有步骤,确保一切配置正确无误后,再将应用部署到生产环境中。也可以使用如Ansible、Chef等配置管理工具来自动化部署过程,提升效率和可靠性。
1048 13
|
11月前
|
关系型数据库 Linux Nacos
Rocky Linux 部署 Docker 和 NACOS 实例
本文介绍在阿里云环境下基于 Rocky Linux 搭建 Docker 并部署 Nacos 的完整流程。涵盖 Docker 安装、镜像加速配置、网络设置及 MySQL 与 Nacos 容器的创建,适用于开发与生产环境。
1406 1
|
9月前
|
Linux 应用服务中间件 Shell
二、Linux文本处理与文件操作核心命令
熟悉了Linux的基本“行走”后,就该拿起真正的“工具”干活了。用grep这个“放大镜”在文件里搜索内容,用find这个“探测器”在系统中寻找文件,再用tar把东西打包带走。最关键的是要学会使用管道符|,它像一条流水线,能把这些命令串联起来,让简单工具组合出强大的功能,比如 ps -ef | grep 'nginx' 就能快速找出nginx进程。
989 1
二、Linux文本处理与文件操作核心命令
|
9月前
|
Linux
linux命令—stat
`stat` 是 Linux 系统中用于查看文件或文件系统详细状态信息的命令。相比 `ls -l`,它提供更全面的信息,包括文件大小、权限、所有者、时间戳(最后访问、修改、状态变更时间)、inode 号、设备信息等。其常用选项包括 `-f` 查看文件系统状态、`-t` 以简洁格式输出、`-L` 跟踪符号链接,以及 `-c` 或 `--format` 自定义输出格式。通过这些选项,用户可以灵活获取所需信息,适用于系统调试、权限检查、磁盘管理等场景。
597 137
|
9月前
|
安全 Ubuntu Unix
一、初识 Linux 与基本命令
玩转Linux命令行,就像探索一座新城市。首先要熟悉它的“地图”,也就是/根目录下/etc(放配置)、/home(住家)这些核心区域。然后掌握几个“生存口令”:用ls看周围,cd去别处,mkdir建新房,cp/mv搬东西,再用cat或tail看文件内容。最后,别忘了随时按Tab键,它能帮你自动补全命令和路径,是提高效率的第一神器。
1546 58
|
JSON 自然语言处理 Linux
linux命令—tree
tree是一款强大的Linux命令行工具,用于以树状结构递归展示目录和文件,直观呈现层级关系。支持多种功能,如过滤、排序、权限显示及格式化输出等。安装方法因系统而异常用场景包括:基础用法(显示当前或指定目录结构)、核心参数应用(如层级控制-L、隐藏文件显示-a、完整路径输出-f)以及进阶操作(如磁盘空间分析--du、结合grep过滤内容、生成JSON格式列表-J等)。此外,还可生成网站目录结构图并导出为HTML文件。注意事项:使用Tab键补全路径避免错误;超大目录建议限制遍历层数;脚本中推荐禁用统计信息以优化性能。更多详情可查阅手册mantree。
1101 143
linux命令—tree
|
8月前
|
存储 安全 Linux
Linux卡在emergency mode怎么办?xfs_repair 命令轻松解决
Linux虚拟机遇紧急模式?别慌!多因磁盘挂载失败。本文教你通过日志定位问题,用`xfs_repair`等工具修复文件系统,三步快速恢复。掌握查日志、修磁盘、验重启,轻松应对紧急模式,保障系统稳定运行。
1408 2
|
9月前
|
Unix Linux 程序员
Linux文本搜索工具grep命令使用指南
以上就是对Linux环境下强大工具 `grep` 的基础到进阶功能介绍。它不仅能够执行简单文字查询任务还能够处理复杂文字处理任务,并且支持强大而灵活地正则表达规范来增加查询精度与效率。无论您是程序员、数据分析师还是系统管理员,在日常工作中熟练运用该命令都将极大提升您处理和分析数据效率。
766 16