当前位置: 首页 > news >正文

vue-element-admin项目部署 nginx动态代理 含Docker部署、 Jenkins构建

介绍三种方式:
1.直接部署到nginx中
2.用nginx docker镜像部署
3.使用Jenkins构建

1.直接用nginx部署

vue-element-admin项目下有两个.env文件,.env.production是生产环境的,.env.developpment是开发环境的

在这里插入图片描述在这里插入图片描述

vue-element-admin默认用的是mock数据,如果想调用后台接口(自己要把用户登录、角色、权限之类的写好),在vue.config.js里,大概39行左右,把proxy里的内容改成如下形式:

在这里插入图片描述

  proxy: {[process.env.VUE_APP_BASE_API]: {target: process.env.SYSTEM_BACKEND_URL,changeOrigin: true,pathRewrite: {['^' + process.env.VUE_APP_BASE_API]: ''}}}

先保证开发环境和后台调通,之后再进行服务器部署。
生产环境打包,执行 npm run build:prod
执行成功后,项目路径下会出现一个dist文件夹

在这里插入图片描述

把dist文件夹上传到nginx服务器,比如放到 /usr/share/static/dist,注意 /usr/share/static/dist就是打包好的dist文件夹,index.html路径是 /usr/share/static/dist/index.html,不要写成 /usr/share/static/dist/dist
nginx.conf代理相关配置如下:

server {listen       80;  #端口server_name  localhost;location / {  #映射前端资源root   /usr/share/static/dist;  #静态资源路径,index.html就在这个目录里try_files $uri $uri/ @router;index  index.html index.htm;}location @router {rewrite ^.*$ /index.html last;}#后端请求转发,/prod-api/ 对应.env.production里的SYSTEM_BACKEND_URL,注意两端都有/location /prod-api/ {  proxy_pass http://xxxx:9999/;  #后端接口地址,proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;}
}

nginx -s reload 重启nginx,完成部署

2.Nginx Docker镜像

比如使用k8s等容器化部署时,每一个项目单独结合一个nginx制作镜像
再工程中创建Dockerfile和nginx.conf文件
在这里插入图片描述
nginx.conf示例配置如下,具体解释见上一节 直接用nginx部署 的说明


#user  nobody;
worker_processes  1;error_log  /etc/nginx/access.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;#pid        logs/nginx.pid;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;log_format  main  '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log  /etc/nginx/access.log  main;sendfile        on;#tcp_nopush     on;#keepalive_timeout  0;keepalive_timeout  65;#gzip  on;server {listen       80;server_name  localhost;#charset koi8-r;access_log  /etc/nginx/access.log  main;location / {root   /usr/share/static/dist;try_files $uri $uri/ @router;index  index.html index.htm;}location @router {rewrite ^.*$ /index.html last;}location /prod-api/ {proxy_pass http://xxxx:9999/;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}
}

Dockerfile如下

FROM nginx  
WORKDIR '/xxxx'COPY build /usr/share/static/build
COPY dist /usr/share/static/dist
COPY nginx.conf /etc/nginx/nginx.conf
RUN touch /etc/nginx/access.logEXPOSE 80
RUN echo "daemon off;" >> /etc/nginx/nginx.confCMD ["nginx", "-c", "/etc/nginx/nginx.conf"]

在这里插入图片描述

在Dockerfile所在路径下执行:
docker build -t testdocker .
构建镜像 -t代表target,testdocker是自定义的镜像名,最后的.代表当前路径

镜像制作完成,启动镜像 端口号和id按实际情况定

3.Jenkins构建

jenkins要先配置NodeJS
在这里插入图片描述

开始构建项目

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

git config --global url."https://".insteadOf git://
node -v
npm -v
npm install --registry=https://registry.npm.taobao.org
npm run build:prod
ls /var/jenkins_home/workspace/项目名#下面可选   
# 删除原有项目镜像
docker rmi xxxx || true
# 打包项目镜像
docker build -t xxxx  .
# 上传项目镜像
docker push xxxxx 

配置完成之后保存,即可构建项目

相关文章:

vue-element-admin项目部署 nginx动态代理 含Docker部署、 Jenkins构建

介绍三种方式: 1.直接部署到nginx中 2.用nginx docker镜像部署 3.使用Jenkins构建 1.直接用nginx部署 vue-element-admin项目下有两个.env文件,.env.production是生产环境的,.env.developpment是开发环境的 vue-element-admin默认用的是mock数…...

使用Python来写模拟Xshell实现远程命令执行与交互

一、模块 这里使用的是 paramiko带三方库 pip install paramiko二、效果图 三、代码实现(这里的IP,用户名,密码修改为自己对应服务器的) import paramiko import timeclass Linux(object):# 参数初始化def __init__(self, ip, us…...

mybatis 数据库字段为空or为空串 忽略条件过滤, 不为空且不为空串时才需nameParam过滤条件

name未配置视为不考虑name条件 select * from user where (( (ISNULL(name)) OR (name) ) OR name #{user.nameParam} ) 三个or语句 推荐这个 select * from user where ISNULL(name) OR name OR name #{user.nameParam} select * from user where ISNULL(name) OR …...

【玩玩Vue】通过vue-store实现枚举管理,用于下拉选项和中英文翻译等

原文作者:我辈李想 版权声明:文章原创,转载时请务必加上原文超链接、作者信息和本声明。 文章目录 一、store基础用法1.在src下新建store文件夹,在store下新建module文件夹2.在module下新建enums.js文件3.在store下新建getters.js…...

ISCSI:后端卷以LVM 的方式配置 ISCSI 目标启动器

写在前面 准备考试整理相关笔记博文内容涉及使用 LVM 做ISCSI 目标后端块存储 Demo理解不足小伙伴帮忙指正 对每个人而言,真正的职责只有一个:找到自我。然后在心中坚守其一生,全心全意,永不停息。所有其它的路都是不完整的&#…...

八公山豆腐发展现状与销售对策研究

1.引言 八公山豆腐作为中国传统特色食品之一,一直以来备受人们的喜爱。然而,在现代社会中,由于消费者对于营养健康的追求以及市场竞争的加剧,八公山豆腐的市场份额逐渐缩小。因此,为了更好地推广和发展八公山豆腐&…...

排序算法-插入排序

属性 当插入第i(i>1)个元素时,前面的array[0],array[1],…,array[i-1]已经排好序,此时用array[i]的排序码与array[i1],array[i-2],…的排序码顺序进行比较,找到插入位置即将array[i]插入,原来位置上的元素顺序后移 直接插入排序…...

多位数按键操作(闪烁)数码管显示

/*----------------------------------------------- 内容&#xff1a;按键加减数字&#xff0c;多个数码管显示 ------------------------------------------------*/ #include<reg52.h> //包含头文件&#xff0c;一般情况不需要改动&#xff0c;头文件包含特殊功能寄存…...

MyEclipse项目导入与导出

一、项目导出 1、右键选择项目名称&#xff0c;弹出菜单中选择“export”&#xff0c;如下图所示 2、选择“恶心“export”&#xff0c;弹出菜单如下&#xff1b;在“General“选项中&#xff0c;选择“File System”选项 3、点击“next”&#xff0c;进入保存位置选择界面&am…...

ArrayList和LinkedList

最近在刷回溯算法时&#xff0c;遇见了List<Integer> A new ArrayList<>(); LinkedList<Integer> B new LinkedList<>();这类型的表达方式 很好奇的问题是&#xff1a; 1、List<Integer> A new ArrayList<>();为什么是正确的写法 2…...

Linux 配置 Nginx 服务完整详细版

目录 前言 配置Nginx监听端口和服务器块 # 防DDoS配置 # 日志配置 # 设置服务器块 监听端口 网站根目录 默认文件 静态文件目录 图像文件目录 # 自定义错误页面 # 反向代理配置 # 配置SSL/TLS 1、获取SSL/TLS证书 2、安装证书 3、配置SSL/TLS # 配置SSL协议版本…...

Python实现猎人猎物优化算法(HPO)优化LightGBM回归模型(LGBMRegressor算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 猎人猎物优化搜索算法(Hunter–prey optimizer, HPO)是由Naruei& Keynia于2022年提出的一种最新的…...

无涯教程-JavaScript - ODD函数

描述 ODD函数返回四舍五入到最接近的奇数整数的数字。 ODD函数是Excel中的15个舍入函数之一。 语法 ODD (number)争论 Argument描述Required/OptionalNumberThe value to round.Required Notes 无论数字的符号如何,值都将从零舍入到下一个奇数。如果number是一个奇数整数…...

Easyui里的datagrid嵌入select下拉框

问题&#xff1a; 想使用datagird里嵌入select下拉框&#xff0c;并在提交form表单时获取datagrid选中的每行数据里的每个下拉框选中的值。 解决方案&#xff1a; 其中economicIssuesSelect使用下拉框&#xff0c;重点关注 initEconomicIssues(row)方法。这里的方法需要传递ro…...

计算机专业毕业设计项目推荐03-Wiki系统设计与实现(JavaSpring+Vue+Mysql)

Wiki系统设计与实现&#xff08;JavaSpringVueMysql&#xff09; **介绍****系统总体开发情况-功能模块****各部分模块实现** 介绍 本系列(后期可能博主会统一为专栏)博文献给即将毕业的计算机专业同学们,因为博主自身本科和硕士也是科班出生,所以也比较了解计算机专业的毕业设…...

微服务的艺术:构建可扩展和弹性的分布式应用

文章目录 什么是微服务架构&#xff1f;微服务的设计原则1. 基于业务边界划分服务2. 松耦合和强内聚3. 自动化测试和部署4. 监控和日志5. 弹性设计 微服务的实施细节1. 服务发现示例代码&#xff1a;使用Consul进行服务发现 2. 负载均衡示例代码&#xff1a;Nginx配置负载均衡 …...

在PHP8中对数组进行排序-PHP8知识详解

在php8中&#xff0c;提供了丰富的排序函数&#xff0c;可以对数组进行排序操作。常见的排序函数如下几个&#xff1a;sort() 函数、rsort() 函数、asort() 函数、arsort() 函数、ksort() 函数、krsort() 函数、natsort()函数和natcascsort()函数。 1、sort() 函数&#xff1a;…...

Redis混合模式持久化原理

前言 前面文章中我们也介绍过Redis的持久化方式有两种&#xff1a;rdb持久化和aof持久化&#xff0c;具体详情可查看之前文章redis持久化。rdb持久化还是aof持久化它们都有各自的缺点。 rdb和aof缺点 rdb持久化&#xff1a;由于是定期对内存数据快照进行持久化&#xff0c;因此…...

《BPF Performance Tools —— 洞悉Linux系统和应用性能》学习笔记 —— 第一章 介绍(2)

接前一篇文章&#xff1a;《BPF Performance Tools —— 洞悉Linux系统和应用性能》学习笔记 —— 第一章 介绍&#xff08;1&#xff09; 1.2 Tracing、Snooping、Sampling、Profiling和Observability是什么&#xff1f; 这些都是用于对分析技术和工具进行分类的术语。 Trac…...

【计算机网络】网络编程接口 Socket API 解读(7)

Socket 是网络协议栈暴露给编程人员的 API&#xff0c;相比复杂的计算机网络协议&#xff0c;API 对关键操作和配置数据进行了抽象&#xff0c;简化了程序编程。 本文讲述的 socket 内容源自 Linux man。本文主要对各 API 进行详细介绍&#xff0c;从而更好的理解 socket 编程。…...

crypto++下载、安装(VS2017)及加解密使用

crpto 下载按个人喜好下载&#xff0c;我使用了图中框选的8.8.0 Release.解压 安装打开修改以适应本机配置整理至标准库 调用加解密使用 Crypto&#xff08;也称为Crypto Library或Crypto STL&#xff09;是一个C密码学库&#xff0c;它提供了各种密码学算法和安全编程工具&…...

R语言画图

简单记录一下 plot(lad_profile_relative$lad, lad_profile_relative$height, type"l", lwd1.5, xlabexpression(paste("LAD ", "(", m^2, m^-3, ")" )), ylab"Height (m)")X轴数据&#xff0c; Y轴数据 type, 标记类型 lw…...

redis 核心数据结构

一、简述 redis是一个开源的使用C语言编写的一个kv存储系统&#xff0c;是一个速度非常快的非关系远程内存数据库。它支持包括String、List、Set、Zset、hash五种数据结构。 除此之外&#xff0c;通过复制、持久化和客户端分片等特性&#xff0c;用户可以很方便地将redis扩展…...

RabbitMQ消息可靠性(一)-- 生产者消息确认

前言 在项目中&#xff0c;引入了RabbitMQ这一中间件&#xff0c;必然也需要在业务中增加对数据安全性的一层考虑&#xff0c;来保证RabbitMQ消息的可靠性&#xff0c;否则一个个消息丢失可能导致整个业务的数据出现不一致等问题&#xff0c;对系统带来巨大的影响&#xff0c;…...

9 种方法使用 Amazon CodeWhisperer 快速构建应用

Amazon CodeWhisperer 是一款很赞的生成式人工智能编程工具。自从在工作中使用了 CodeWhisperer&#xff0c;我发现不仅代码编译的效率有所提高&#xff0c;应用开发的工作也变得快乐起来。然而&#xff0c;任何生成式 AI 工具的有效学习都需要初学者要有接受新工作方式的心态和…...

性能测试-性能工程落地的4个阶段(21)

性能工程按照不同的内容和目的划分为4个阶段,分别是线下单系统压测分析阶段、线下全链路压测分析阶段、生产只读业务压测及容量评估阶段、生产读写业务全链路压测及容量评估阶段。(也可以理解为一个企业性能测试体系的发展阶段) 线下单系统压测分析阶段 针对单系统的性能…...

小程序 navigateBack 携带参数返回的三种方式(详细)

如果觉着主图好看,点个赞,你早晚也会看到这么好看的景色! 第一种方式 getCurrentPages 获取当前页面栈。数组中第一个元素为首页,最后一个元素为当前页面。不要尝试修改页面栈,会导致路由以及页面状态错误。不要在 App.onLaunch 的时候调用 getCurrentPages(),此时 page …...

通过内网穿透实现远程连接群晖Drive,轻松实现异地访问群晖NAS

文章目录 前言1.群晖Synology Drive套件的安装1.1 安装Synology Drive套件1.2 设置Synology Drive套件1.3 局域网内电脑测试和使用 2.使用cpolar远程访问内网Synology Drive2.1 Cpolar云端设置2.2 Cpolar本地设置2.3 测试和使用 3. 结语 前言 群晖作为专业的数据存储中心&…...

vue3 + vite常用工具

1. plop 1.1 安装 yarn add plop -D1.2 使用 1.2.1 package.json 配置脚本命令 "scripts": {"dev": "vite --mode dev","build": "vue-tsc --noEmit && vite build","serve": "vite preview"…...

Vue框架分享与总结

总结开发中最常用的vue语法&#xff0c;以及对特定语法的理解。vue官网 文章目录 一、创建vue项目1、使用开发工具创建2、使用命令行创建3、vue框架结构4、Vue文件结构 二、Vue 常用模板语法1、v-if、v-show2、v-for3、v-on4、v-bind5、v-model 三、组件通信1、父组件给子组件传…...

高品质的网站开发公/永久免费不收费的污染app

公司运营免不了让我们数据做一些临时取数&#xff0c;这些取数有时候是重复的&#xff0c;或者可以做成可配置的。需要开发成界面&#xff0c;供他们选择&#xff0c;自然想到SpringBoot连接Hive&#xff0c;可以把取数做成一键生成&#xff0c;或者让他们自己写sql&#xff0c…...

宠物医院网站开发背景/100%能上热门的文案

千万级别mysql合并表快速去重简析mysql合并表去重目标&#xff1a;现有表a和b&#xff0c;把两个表中的数据合并去重到c表中。其中a和b表中数据量大概在2千万左右。基本情况操作系统版本&#xff1a;CentOS release 5.6 64位操作系统内存&#xff1a;8G数据库版本&#xff1a;5…...

关于网站建设毕业论文/谷歌seo优化排名

我们通过前面的学习&#xff0c;已经把数据库与表搭建出来了&#xff0c; 存储数据不是目的&#xff0c;我们在使用数据库的时候多数情况下就是按照不同条件获取数据库里面的数据&#xff0c;而我们sql语法中select语句就主要是解决这个问题的。我们分以下几方面去讲解基本的SE…...

用固定ip做访问网站服务器/2024北京又开始核酸了吗今天

SELECT name,modify_date FROM sys.procedures order by modify_date desc 转载于:https://www.cnblogs.com/hellolong/p/3895071.html...

还有专门给别人做性奴的网站/百度图片查找

1.介绍 一个一个遍历 定义&#xff1a; 提供一种方法&#xff0c;顺序访问一个集合对象中的各个元素&#xff0c;而不暴露该对象的内部表示 适用场景&#xff1a; 访问一个集合对象的内容而无需暴露它的内部表示 为遍历不同的集合结构提供一个统一的接口 优点&#xff1a; …...

网站备案核验系统/地推app推广赚佣金

出差是不少员工的工作常态&#xff0c;尤其对于那些从事产品销售、运维等工作的员工而言&#xff0c;出差更是家常便饭。一般而言&#xff0c;对公司的合理安排&#xff0c;员工应当服从。然而&#xff0c;如果公司明知员工不适宜出差&#xff0c;却仍然频繁作出异地出差的工作…...