Liunx(CentOS-6-x86_64)使用Nginx部署Vue项目

一:编译vue项目和上传到linux系统

通过本地编译器编译后的文件
在这里插入图片描述
上传服务器后的
在这里插入图片描述

二:安装 node(版本 v16.20.2)和npm( 8.19.4或 9.6.5)

备注一:安装nodejs就是安装node和npm,

sudo yum install -y nodejs

检测node安装是否成功

node -v

检测npm 是否成功

npm -v

在这里插入图片描述

2.1:node安装失败解决方法(成功跳过)

注意:在使用sudo yum install -y nodejs时显示下方的内容时使用,如果正常安装则无需使用该命令

已加载插件:fastestmirror Loading mirror speeds from cached hostfile 没有可用软件包
nodejs。 错误:无须任何处理

解决方法:添加 Node.js 官方仓库

curl -fsSL https://rpm.nodesource.com/setup_16.x | sudo bash -

在这里插入图片描述

2.2:npm安装失败解决方法(成功跳过)

为什么要安装9.6.5版本?因为最新版的npm与nodeV16版本不相容。

解决方法:

#  配置npm安装库
curl -L https://www.npmjs.com/install.sh | sudo sh#  使用npm命令安装9.6.5版本的npm
npm install -g npm@9.6.5

三:安装 Yarn(1.22.22)

npm install -g yarn

检测yarn安装是否成功

yarn -v

四:安装nginx

sudo yum install -y nginx

检测nginx安装是否成功

nginx -v
4.1:安装nginx错误 nginx报没有安装包 (安装epel-release完成后再去 安装nginx )

注意如果按照nginx时报没有安装包,是因为没有这个epel-release库,需要安装它,也可以使用命令 rpm -qi epel-release 查看系统中的epel-release是否有

# 安装epel-release
sudo yum install epel-release# 查看系统中的epel-release是否有安装epel-release
rpm -qi epel-release

在这里插入图片描述

五:编辑Nginx配置文件

server {listen 80;server_name _;location / {root /weike/tian/tvue; #vue项目路径index index.html; #编译好的index.htlm文件try_files $uri $uri/ /index.html;}# 代理 API 请求 下面这两个请求是因为#在 vue.config.js 中,代理配置只会在开发环境下生效(通过 npm run serve 启动时)。在生产环境下(通过 Nginx 部署时),代理配置不会生效。# Nginx 配置,添加 API 代理在 Nginx 配置中添加对 /wxapi.php/ 和 /upload/ 的代理规则,将请求转发到 https://www.com/  (后台路径)location /wxapi.php/ {proxy_pass https://www.com;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}location /upload/ {proxy_pass https://www.com; proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}}

六:启动Nginx

# 启动 Nginx:
sudo systemctl start nginx# 设置 Nginx 开机自启动:
sudo systemctl enable nginx# 检查 Nginx 的状态:
sudo systemctl status nginx

以下内容代表启动成功

● nginx.service - The nginx HTTP and reverse proxy server
Loaded: loaded (/usr/lib/systemd/system/nginx.service; enabled; vendor preset: disabled)
Active: active (running) since 一 2025-03-10 10:58:00 CST; 36min ago
Process: 18318 ExecReload=/usr/sbin/nginx -s reload (code=exited, status=0/SUCCESS)
Main PID: 7800 (nginx)
CGroup: /system.slice/nginx.service
├─ 7800 nginx: master process /usr/sbin/nginx
├─18319 nginx: worker process
├─18320 nginx: worker process
├─18321 nginx: worker process
└─18322 nginx: worker process
3月 10 10:58:00 localhost.localdomain systemd[1]: Starting The nginx HTTP an…
3月 10 10:58:00 localhost.localdomain nginx[7795]: nginx: the configuration …
3月 10 10:58:00 localhost.localdomain nginx[7795]: nginx: configuration file…
3月 10 10:58:00 localhost.localdomain systemd[1]: Started The nginx HTTP and…
3月 10 11:03:26 localhost.localdomain systemd[1]: Reloading The nginx HTTP a…
3月 10 11:03:26 localhost.localdomain systemd[1]: Reloaded The nginx HTTP an…
3月 10 11:16:02 localhost.localdomain systemd[1]: Reloading The nginx HTTP a…
3月 10 11:16:02 localhost.localdomain systemd[1]: Reloaded The nginx HTTP an…
3月 10 11:25:18 localhost.localdomain systemd[1]: Reloading The nginx HTTP a…
3月 10 11:25:18 localhost.localdomain systemd[1]: Reloaded The nginx HTTP an…
Hint: Some lines were ellipsized, use -l to show in full.

如果修改了配置文件,可以使用以下命令重新加载 Nginx,而不会中断当前连接
sudo systemctl reload nginx
注:是以上方法安装的nginx直接忽略
# 另一种安装方式的重启
/weike/nginx/sbin/nginx -p /weike/nginx/ -s reload

七:打开Vue项目路径和文件权限。

检查 Vue 项目路径:
确保 /weike/tian/tvue 路径下包含 Vue 项目的文件(如 index.html 和 static 目录)。

# 给nginx提供权限
sudo chown -R nginx:nginx /weike/tian/tvue
sudo chmod -R 755 /weike/tian/tvue

// 检测权限

ls -l /weike/tian/tvue

输出示例: drwxr-xr-x 2 nginx nginx 4096 Mar 10 10:00 static
-rwxr-xr-x 1 nginx nginx 1234 Mar 10 10:00 index.html

八:打开防火墙

# 检查防火墙状态
sudo firewall-cmd --state# 查看当前开放的端口
sudo firewall-cmd --list-all# 开放 HTTP 端口(80)
sudo firewall-cmd --add-service=http --permanent# 重新加载防火墙规则
sudo firewall-cmd --reload#验证端口是否开放:确保输出中包含 http。
sudo firewall-cmd --list-services

九:访问vue项目 输入ip即可访问到默认的初始页面;

获取liunx的IP地址

ip addr show

在这里插入图片描述

在这里插入图片描述

9.1:如果出现 无法访问此网站 错误

在这里插入图片描述

# 检查 SELinux 状态:如果输出中 Current mode 为 enforcing,说明 SELinux 已启用。
sestatus# 临时禁用 SELinux:
sudo setenforce 0

在这里插入图片描述

9.2:永久关闭 SELinux

永久关闭 SELinux 需要修改配置文件,重启系统后生效。

# 修改/etc/selinux/config
SELINUX=enforcing
将其改为:
SELINUX=disabled

重启系统

sudo reboot

重启后,检查 SELinux 状态

sestatus

如果 SELinux status 为 disabled,说明 SELinux 已永久关闭。
输出示例: SELinux status: disabled

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

分布式锁—Redisson的同步器组件

1.Redisson的分布式锁简单总结 Redisson分布式锁包括:可重入锁、公平锁、联锁、红锁、读写锁。 (1)可重入锁RedissonLock 非公平锁,最基础的分布式锁,最常用的锁。 (2)公平锁RedissonFairLock 各个客户端尝试获取锁时会排队,按照队…

2025年渗透测试面试题总结-字某某动-安全研究实习生(一面)(题目+回答)

网络安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。 目录 字某某动-安全研究实习生(一面) 一、岗位认知与方向选择 1. 对公司业务的理解 …

Dify平台部署记录

安装dify项目 官网地址:http://difyai.com/ github地址:https://github.com/langgenius/dify 下载项目: git clone https://github.com/langgenius/dify.git下载过慢,直接访问网页下载zip压缩包: 解压,…

串口数据记录仪DIY,体积小,全开源

作用 产品到客户现场出现异常情况,这个时候就需要一个日志记录仪、黑匣子,可以记录产品的工作情况,当出现异常时,可以搜集到上下文的数据,从而判断问题原因。 之前从网上买过,但是出现过丢数据的情况耽误…

如何用HTML5 Canvas实现电子签名功能✍️

🤖 作者简介:水煮白菜王,一位资深前端劝退师 👻 👀 文章专栏: 前端专栏 ,记录一下平时在博客写作中,总结出的一些开发技巧和知识归纳总结✍。 感谢支持💕💕&a…

Uniapp项目运行到微信小程序、H5、APP等多个平台教程

摘要:Uniapp作为一款基于Vue.js的跨平台开发框架,支持“一次开发,多端部署”。本文将手把手教你如何将Uniapp项目运行到微信小程序、H5、APP等多个平台,并解析常见问题。 一、环境准备 在开始前,请确保已安装以下工具…

Python设计模式 - 建造者模式

定义 建造者模式是一种创建型设计模式,主要用于构建包含多个组成部分的复杂对象。它将对象的构建过程与表示分离,使得同样的构建过程可以创建不同的对象表示。 结构 抽象建造者(Builder):声明创建产品的各个部件的方…

音乐API

https://neteasecloudmusicapi.vercel.app/docs/#/https://neteasecloudmusicapi.vercel.app/docs/#/ 使用实例 所有榜单内容摘要 说明 : 调用此接口,可获取所有榜单内容摘要 接口地址 : /toplist/detail 调用例子 : /toplist/detail 获取歌单所有歌曲 说明 : 由于网易云…

Jetpack Compose — 入门实践

一、项目中使用 Jetpack Compose 从此节开始,为方便起见,如无特殊说明,Compose 均指代 Jetpack Compose。 开发工具: Android Studio 1.1 创建支持 Compose 新应用 新版 Android Studio 默认创建新项目即为 Compose 项目。 注意:在 Language 下拉菜单中,Kotlin 是唯一可…

【day12】进程切换与调度:linux系统的幕后操控术

【Day12】进程切换与调度:linux系统的幕后操控术 进程优先级进程属性:UID进程属性:PRI和NI进程饥饿 竞争/独立/并行/并发进程切换进程调度(O(1)调度算法) 进程优先级 进程优先级的本质:衡量进程得到CPU资源…

STM32之BKP

VBAT备用电源。接的时候和主电源共地,正极接在一起,中间连接一个100nf的电容。BKP是RAM存储器。 四组VDD都要接到3.3V的电源上,要使用备用电池,就把电池正极接到VBAT,负极跟主电源共地。 TEMPER引脚先加一个默认的上拉…

mapbox高阶,结合threejs(threebox)添加管道

👨‍⚕️ 主页: gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏:mapbox 从入门到精通 文章目录 一、🍀前言1.1 ☘️mapboxgl.Map 地图对象1.2 ☘️mapboxgl.Map style属性1.3 ☘️threebox Tube静态对象二、🍀使用thr…

Android15使用FFmpeg解码并播放MP4视频完整示例

效果: 1.编译FFmpeg库: 下载FFmpeg-kit的源码并编译生成安装平台库 2.复制生成的FFmpeg库so文件与包含目录到自己的Android下 如果没有prebuiltLibs目录,创建一个,然后复制 包含目录只复制arm64-v8a下

利用FatJar彻底解决Jar包冲突(三)

利用FatJar彻底解决Jar包冲突 Spring 容器的加载与隔离⽀持注解配置⽂件定位与容器初始化嵌套Spring容器的加载 隔离优化EagleEye traceId不⼀致问题原因解决 Spring 容器的加载与隔离 ⽀持注解 这个⽐较容易,主要是我们之前的应⽤不⽀持⼆⽅包内部的注解&#xf…

ThinkPHP8.0+MySQL8.0搭建简单实用电子证书查询系统

客户花了100元买了一个系统,开始不能导入,到处找人帮忙解决。给解决能导入了,不能修改,满足不了用户的需求。用户一狠心,花200块钱,叫我给他定制了一个电子证书查询系统。还免费给部署到服务器。惭愧惭愧……

越早越好!8 个反直觉的金钱真相|金钱心理学

很多人都追求财富自由,但成功的人少之又少。 这可能是因为,人们往往忽略了一些金钱的真相和常识。 01 金钱常识 & 真相 为了构建健康的金钱观,我读了一本有点反直觉,有点像鸡汤,但都是财富真相的书。 来自 Morg…

文本转语音-音画适时推送rtsp并播放

文本语音 rtsp适时播放叫号系统的底层逻辑 发布Linux, unix socket 和window win32做为音频源的 python10下的(ffmpeg version 7.1) 可运行版本. 这两天在弄这个,前2篇是通过虚拟声卡,达到了最简单的一个逻辑,播放文本就从声卡发声&#xff0…

类和对象(中)

1.类的6个默认成员函数 如果一个类中什么成员都没有,简称为空类。空类中真的什么都没有吗?并不是,任何类在什么都不写时,编译器会自动生成以下6个默认成员函数。默认成员函数:用户没有显式实现,编译器会生成…

搜索插入位置(js实现,LeetCode:35)

给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 示例 1: 输入: nums [1,3,5,6], target 5 输出: 2示例 2: 输入…

【问题记录】如何编译nv_peer_memory模块?依赖OFED的4个目录和2类文件?如何解决没有rdma/peer_mem.h文件?

背景 GDR:GPUDirect RDMA。这项新技术在 GPU 内存之间直接与 NVIDIA HCA/NIC 设备之间提供直接的 P2P(点对点)数据路径。这显着降低了 GPU-GPU 通信延迟,并完全减轻了 CPU 的负担。nv_peer_memory模块是网卡提供给GPU使用GDR技术…