Jenkinsfile+Dockerfile前端vue自动化部署
前言
本篇主要介绍如何自动化部署前端vue项目
其中,有两种方案:
- 第一种是利用nginx进行静态资源转发;
- 第二种方案是利用nodejs进行启动访问;
各个组件版本如下:
- Docker 最新版本;
- Jenkins 2.387.3
- nginx 最新版本
- nodejs 12.13.0
nginx转发部署
目录结构如下:

nginx.conf
user nginx;
worker_processes 1;error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;events {worker_connections 1024;
}http {include /etc/nginx/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 /var/log/nginx/access.log main;sendfile on;#tcp_nopush on;keepalive_timeout 65;#gzip on;# include /etc/nginx/conf.d/*.conf;server {listen 80;server_name localhost; # 服务器地址或绑定域名#charset koi8-r;#access_log /var/log/nginx/host.access.log main;# =========================================================# ================== ↓↓↓↓↓↓ start ↓↓↓↓↓↓ ==================# =========================================================location / {root /usr/share/nginx/html;#try_files $uri $uri/ @router;index index.html index.htm;try_files $uri $uri/ /index.html; # 解决页面刷新 404 问题#proxy_pass http://zhengqingya.gitee.io; # 代理的ip地址和端口号#proxy_connect_timeout 600; #代理的连接超时时间(单位:毫秒)#proxy_read_timeout 600; #代理的读取资源超时时间(单位:毫秒)}# =========================================================# ================== ↑↑↑↑↑↑ end ↑↑↑↑↑↑ ==================# =========================================================#error_page 404 /404.html;# redirect server error pages to the static page /50x.html#error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/share/nginx/html;}}
}
Dockerfile
FROM nginx:latest
# docker 传参数据
ARG ACTIVE# 将dist文件中的内容复制到 `/usr/share/nginx/html/` 这个目录下面
ADD /dist /usr/share/nginx/html
# 用本地配置文件来替换nginx镜像里的默认配置
ADD nginx/nginx-${ACTIVE}.conf /etc/nginx/nginx.confEXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
如果不想在jenkinsfile中运行npm相关命令,而在dockerfile中运行,Dockerfile如下:
FROM node:12.13.0 as build-stage
WORKDIR /app
COPY . .
RUN npm install
RUN npm run buildFROM nginx:latest AS prod-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
JENKINSFILE
pipeline {agent anyenvironment {NAME = 'bst-web'PROFILE = 'dev'APP = 'xxxx/bst-web:dev'APP_PORT = 80}stages {stage('下载代码') {steps {echo '****************************** download code start... ******************************'git branch: 'dev', credentialsId: 'xxxxxxxxxxxxxxxxx', url: 'xxxxxx.git'}}stage('vue环境准备') {steps {echo '****************************** vue start... ******************************'sh "npm install && npm run build"}}stage('构建Docker镜像') {steps {echo '****************************** delete container and image... ******************************'sh 'docker ps -a|grep $NAME|awk \'{print $1}\'|xargs -i docker stop {}|xargs -i docker rm {}'sh 'docker images|grep $NAME|grep dev|awk \'{print $3}\'|xargs -i docker rmi {}'echo '****************************** build image... ******************************'sh 'docker build --build-arg ACTOVE=dev -t $APP .'}}stage('运行容器') {steps {echo '****************************** run start... ******************************'sh 'docker run -d -p $APP_PORT:80 --restart=always --name $NAME $APP'}}}
}
nodeJs部署
Dockerfile
FROM node:12.13.0
WORKDIR /app
COPY . .
RUN npm install
RUN npm run buildEXPOSE 8080
CMD [ "npm", "run", "serve" ]
Jenkinsfile
pipeline {agent anyenvironment {NAME = 'bst-web'PROFILE = 'dev'APP = 'xxxx/bst-web:dev'APP_PORT = 80}stages {stage('下载代码') {steps {echo '****************************** download code start... ******************************'git branch: 'dev', credentialsId: 'xxxxxxxxxxxxxxxxx', url: 'xxxxxx.git'}}stage('构建Docker镜像') {steps {echo '****************************** delete container and image... ******************************'sh 'docker ps -a|grep $NAME|awk \'{print $1}\'|xargs -i docker stop {}|xargs -i docker rm {}'sh 'docker images|grep $NAME|grep dev|awk \'{print $3}\'|xargs -i docker rmi {}'echo '****************************** build image... ******************************'sh 'docker build --build-arg ACTOVE=dev -t $APP .'}}stage('运行容器') {steps {echo '****************************** run start... ******************************'sh 'docker run -d -p $APP_PORT:80 --restart=always --name $NAME $APP'}}}
}
vue.config.js
module.exports = {devServer: {// 跳过host检查historyApiFallback: true,}
}
具体版本不一样,或者添加
module.exports = {// 跳过检查hostdevServer: { disableHostCheck: true }
}
如果不添加此处内容的话,访问会报错 Invalid Host header
相关文章:
Jenkinsfile+Dockerfile前端vue自动化部署
前言 本篇主要介绍如何自动化部署前端vue项目 其中,有两种方案: 第一种是利用nginx进行静态资源转发;第二种方案是利用nodejs进行启动访问; 各个组件版本如下: Docker 最新版本;Jenkins 2.387.3nginx …...
SQL server从安装到入门(一)
文章目录 彻底安装怎么安装?Polybase要求安装orcale jre 7更新 51或更高版本?安装完怎么配置?没有SSMS? 熟悉一下SMSS! 根据本人实际安装和初步使用SQL server的过程中,经历的一些关键性的步骤和精品文章。…...
Unexpected WSL error错误处理备忘
运行docker时提示下图错误,看了下WSL好像没啥问题,看网上有人说需要重置下网络,命令是netsh winsock reset,重置完后果然好了...
计算机毕业设计 基于Vue的米家商城系统的设计与实现 Java实战项目 附源码+文档+视频讲解
博主介绍:✌从事软件开发10年之余,专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…...
Linux终端与交互式Bash
常用的Linux终端 GNOME Terminal:GNOME 桌面环境下的默认终端程序,支持多个选项卡和配置。Konsole:KDE 桌面环境下的默认终端程序,提供了丰富的功能和选项。Terminator:开源的终端程序,支持多个可调整大小…...
呕心整理的常用热门API大全
短信验证码:可用于登录、注册、找回密码、支付认证等等应用场景。支持三大运营商,3秒可达,99.99%到达率,支持大容量高并发。通知短信:当您需要快速通知用户时,通知短信是最快捷有效的方式。短信…...
Redis7.2.3集群安装,新增节点,删除节点,分配哈希槽,常见问题
概念: 【Redis】高可用之三:集群(cluster) - 知乎 实操: Redis集群三种模式 主从模式 优势: 主节点可读可写 从节点只能读(从节点从主节点同步数据) 缺点: 当主节点…...
并行计算机系统结构基础
一、并行计算机系统结构 1.并行性 并行性:计算机系统在同一时刻或者同一时间间隔内 进行多种运算或操作 并行性包括两方面的含义 同时性:两个或两个以上的事件在同一时刻发生并发性:两个或两个以上的事件在同一时间间隔 内发生 从处理数…...
Ubuntu开启永久开启串口权限方法
sudo gedit /etc/udev/rules.d/70-ttyusb.rules//不存在就创建 在该文件中添加如下一行 KERNEL“ttyUSB*”, MODE“0777” 重启系统 sudo reboot...
zTree设置默认选中节点(当前组织默认选中)
/* 节点点击事件 */function onClick(e, treeId, treeNode) {var zTree $.fn.zTree.getZTreeObj("treeDemo"),nodes zTree.getSelectedNodes(),v "";//存储组织名称idd"";//存储组织IDnodes.sort(function compare(a,b){return a.id-b.id;});…...
结合 Django 和 Vue.js 打造现代 Web 应用
概要 在 Web 开发的世界里,Django 和 Vue.js 分别是后端和前端两个非常流行的框架。Django 以其强大的后端能力、快速开发以及安全性而著称,而 Vue.js 因其简洁、灵活和易于上手在前端开发领域广受欢迎。 本篇文章将详细介绍如何将 Django 与 Vue.js 结…...
【Linux网络】ssh服务与配置,实现安全的密钥对免密登录
目录 一、SSH基础 1、什么是ssh服务器 2、对比一下ssh协议与telnet协议 3、常见的底层为ssh协议的软件: 4、拓展 二、SSH软件学习 1、ssh服务软件学习 2、sshd公钥传输的原理: 3、ssh命令学习: 4、学习解读sshd服务配置文件&#x…...
自建ES7.10集群,使用OSS快照恢复数据测试
一、云上集群创建仓库 前置条件 创建云OSS bucket lcsc-es-snapshot,并获取到access_key_id,secret_access_key信息 授予oss bucket lcsc-es-snapshot相关方完全控制权限 创建一个名称为my_backup的仓库。 云上集群创建仓库。PUT _snapshot/my_backup/ {"type": &qu…...
电源线虚接,导致信号线发烫
音频板的信号是经过隔直电容接到音频板的。...
【23真题】难!985难度第一梯队!
今天分享的是23年华南理工大学811的信号与系统试题及解析 本套试卷难度分析:22年华南理工大学811考研真题,我也发布过,若有需要,戳这里自取!本套试题难度中等偏上,只有十道大题,考察大家的综合…...
计算机网络———ipv6简解
文章目录 1.前言:2. ipv6简单分析:2.1.地址长度对比2.2. ipv6包头分析2.3. ipv6地址的压缩表示:2.3. NDP:2.4. ipv6地址动态分配: 1.前言: 因特网地址分配组织)宣布将其最2011年2月3日,IANA (In…...
SQL之开窗函数
文章目录 主要内容一.介绍1.特点2.作用 二.语法及示例1.语法代码如下(示例): 2.示例代码如下(示例):代码如下(示例):代码如下(示例): 总结 主要内容 SQL的开窗函数是SQL语言中非常强…...
OpenAI与微软合作,构建 ChatGPT 5 模型;10天准确天气预报
🦉 AI新闻 🚀 OpenAI与微软合作,构建 ChatGPT 5 模型,下一代人工智能或拥有超级智能 摘要:OpenAI首席执行官 Sam Altman 在接受采访时表示,OpenAI正在与微软合作构建下一代人工智能模型 ChatGPT 5&#x…...
git简明指南
目录 安装 创建新仓库 检出仓库 工作流 安装 下载 git OSX 版 下载 git Windows 版 下载 git Linux 版 创建新仓库 创建新文件夹,打开,然后执行 git init 以创建新的 git 仓库。 检出仓库 执行如下命令以创建一个本地仓库的克隆版本&…...
软件测试面试-如何定位线上出现bug
其实无论是线上还是在测试出现bug,我们核心的还是要定位出bug出现的原因。 定位出bug的步骤: 1,如果是必现的bug,尽可能的复现出问题,找出引发问题的操作步骤。很多时候,一个bug的产生,很多时…...
后进先出(LIFO)详解
LIFO 是 Last In, First Out 的缩写,中文译为后进先出。这是一种数据结构的工作原则,类似于一摞盘子或一叠书本: 最后放进去的元素最先出来 -想象往筒状容器里放盘子: (1)你放进的最后一个盘子(…...
【杂谈】-递归进化:人工智能的自我改进与监管挑战
递归进化:人工智能的自我改进与监管挑战 文章目录 递归进化:人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管?3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...
React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中,RouterProvider 是一个核心组件,用于提供基于数据路由(data routers)的新型路由方案。 它替代了传统的 <BrowserRouter>,支持更强大的数据加载和操作功能(如 loader 和…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
(二)TensorRT-LLM | 模型导出(v0.20.0rc3)
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述,后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作,其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统,可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析:自动解析Markdown文档结构PPT模板分析:分析PPT模板的布局和风格智能布局决策:匹配内容与合适的PPT布局自动…...
css的定位(position)详解:相对定位 绝对定位 固定定位
在 CSS 中,元素的定位通过 position 属性控制,共有 5 种定位模式:static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)和…...
2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来,实在找不到,希望有大佬教一下我。 还有就会议时间,我感觉不是图片时间,因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
实现弹窗随键盘上移居中
实现弹窗随键盘上移的核心思路 在Android中,可以通过监听键盘的显示和隐藏事件,动态调整弹窗的位置。关键点在于获取键盘高度,并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...
ios苹果系统,js 滑动屏幕、锚定无效
现象:window.addEventListener监听touch无效,划不动屏幕,但是代码逻辑都有执行到。 scrollIntoView也无效。 原因:这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作,从而会影响…...
