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

news2024/9/21 7:39:55

🧸本篇博客作者测试上线过不下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

 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,理论上就可以了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2151712.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

什么是大模型的泛化能力?

大模型的泛化能力指的是模型在未见过的数据上表现的能力,即模型不仅能在训练数据上表现良好,也能在新的、未知的数据集上保持良好的性能。这种能力是衡量机器学习模型优劣的重要指标之一。 泛化能力的好处包括但不限于: 提高模型的适应性&a…

基于uniapp的民宿酒店预订系统(后台+小程序)

💗博主介绍💗:✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示:文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…

F28335中断系统

1 中断介绍 1.1 中断概念 1.2 TMS320F28335 中断概述

CUDA并行架构

一、CUDA简介 CUDA(Compute Unified Device Architecture)是一种由NVIDIA推出的通用并行计算架构,该架构使GPU(Graphics Processing Unit)能够对复杂的计算问题做性能速度优化。 二、串并行模式 高性能计算的关键是利用多核处理器进行并行计算。 串行模式&#…

使用LangGPT提示词让大模型比较浮点数

使用LangGPT提示词让大模型比较浮点数 背景介绍环境准备创建虚拟环境安装一些必要的库安装其他依赖部署大模型启动图形交互服务设置提示词与测试 LangGPT结构化提示词 背景介绍 LLM在对比浮点数字时表现不佳,经验证,internlm2-chat-1.8b (internlm2-cha…

Excel-时间取整,工作有效时长计算

在计算考勤时,打卡时间不是整点,上班时间是遵循整点开始计算的,员工提前打卡,所以要用到时间向上取整。 上班取整: 使用CEILING函数可实现该需求,参考以下公式,第一个参数为上班打卡时间&#…

MySQL篇(窗口函数/公用表达式(CTE))(持续更新迭代)

目录 讲解一:窗口函数 一、简介 二、常见操作 1. sumgroup by常规的聚合函数操作 2. sum窗口函数的聚合操作 三、基本语法 1. Function(arg1,..., argn) 1.1. 聚合函数 sum函数:求和 min函数 :最小值 1.2. 排序函数 1.3. 跨行函数…

一文读懂SpringCLoud

一、前言 只有光头才能变强 认识我的朋友可能都知道我这阵子去实习啦,去的公司说是用SpringCloud(但我觉得使用的力度并不大啊~~)… 所以,这篇主要来讲讲SpringCloud的一些基础的知识。(我就是现学现卖了,主要当做我学习SpringCloud的笔记吧&…

英集芯IP5902:集成电压可调异步升压转换充电管理功能的8位MCU芯片

英集芯IP5902是一款集成了9V异步升压转换、锂电池充电管理及负端NMOS管的8-bit MCU芯片,外壳采用了SOP16封装形式,高集成度和丰富的功能使其在应用时只需很少的外围器件,就能有效减小整体方案的尺寸,降低BOM成本,为小型…

Vue使用axios实现Ajax请求

1、什么是 axios 在实际开发过程中,浏览器通常需要和服务器端进行数据交互。而 Vue.js 并未提供与服务器端通信的接口。从 Vue.js 2.0 版本之后,官方推荐使用 axios 来实现 Ajax 请求。axios 是一个基于 promise 的 HTTP 客户端。 关于 promise 的介绍…

C#开源的一个能利用Windows通知栏背单词的软件

前言 今天给大家推荐一个C#开源且免费的能利用Windows通知栏背单词的软件,可以让你在上班、上课等恶劣环境下安全隐蔽地背单词(利用摸鱼时间背单词的软件):ToastFish。 操作系统要求 目前该软件只支持Windows10及以上系统&…

Scrapy爬虫实战——某瓣250

# 按照我个人的习惯,在一些需要较多的包作为基础支撑的项目里,习惯使用虚拟环境,因为这样能极大程度的减少出现依赖冲突的问题。依赖冲突就比如A、B、C三个库,A和B同时依赖于C,但是A需要的C库版本大于N,而B…

Linux系统查找文件的所属目录

在Linux下查找文件的所属目录方法较多,既可以在图形桌面系统中用搜索功能查找文件,也可以在字符终端窗口中用不同的命令查找不同类型文件并显示其所在目录,针对不同的文件类型,有不同的命令。 一、在图形桌面系统中查找 如图1&a…

利用 ARMxy边缘计算网关和 BLiotlink 软网关,实现工业智能化升级

在当今数字化、智能化的时代浪潮中,工业领域也在不断寻求创新与突破,以提高生产效率、降低成本并提升竞争力。ARM 工业计算机与 BLiotlink 协议转换软件的结合,为工业智能化带来了新的机遇和解决方案。 一、ARM 工业计算机的优势 ARM 工业计…

【4.4】图搜索算法-BFS和DFS两种方式解岛屿数量

一、题目 给你一个由 1(陆地)和 0(水)组成的的二维网格,请你计算网格中岛屿的数量。岛屿总是被水包围,并且每座岛屿只能由水平方向或竖直方向上相邻的陆地连接形成。此外,你可以假设该网格的四条…

I2C中继器TCA9517A(TI)

一、芯片介绍 本芯片是一款具有电平转换功能的双向缓冲器,适用于I2C和SMBus系统,同时支持各种拓扑结构的扩展使用。芯片支持SCL和SDA缓冲,因此允许两条总线的负载电容达到400pF。 TCA9517A的A和B侧驱动器是不同的,但是均可耐受5…

Obsidian 全部笔记共享配置文件,obsidian仓库-文件夹配置统一化

obsidian仓库-文件夹配置统一化 在每次新建obsidian仓库(vaults)时,仓库的主题和快捷键等都需要重新设置,这是因为每次创建新的仓库时 新仓库的配置文件都是默认配置但是如果通过复制粘贴旧配置文件来达到新仓库的配置和旧仓库一致的话,无法…

kafka3.8的基本操作

Kafka基础理论与常用命令详解(超详细)_kafka常用命令和解释-CSDN博客 [rootk1 bin]# netstat -tunlp|grep 90 tcp6 0 0 :::9092 :::* LISTEN 14512/java [rootk1 bin]# ./kafka-topics.s…

MVCC机制解析:提升数据库并发性能的关键

MVCC机制解析:提升数据库并发性能的关键 MVCC(Multi-Version Concurrency Control) 多版本并发控制 。 MVCC只在事务隔离级别为读已提交(Read Committed)和可重复读(Repeated Read)下生效。 MVCC是做什么用的 MVCC是为了处理 可重复读 和…

数据安全治理

数据安全治理 1.数据安全治理2.终端数据安全加密类权限控制类终端DLP类桌面虚拟化安全桌面 3.网络数据安全4.存储数据安全5.应用数据安全6.其他话题数据脱敏水印与溯源 7.UEBA8.CASB 1.数据安全治理 数据安全治理最为重要的是进行数据安全策略和流程制订。在企业或行业内经常发…