【微服务部署】四、Jenkins一键打包部署NodeJS(Vue)前端项目步骤详解

  本文介绍使用Jenkins一键将NodeJS(Vue)前端项目打包并上传到生产环境服务器,这里使用的是直接打包静态页面,发送到远程服务器Nginx配置目录的方式,首先确保服务器环境配置好,安装Nginx,运行目录,日志存放目录等。

一、服务器环境配置

  Nginx安装也有多种方式,源码安装、yum安装、Docker安装等,安装并不复杂,我们这里采用Docker安装的方式,由于习惯于标准化及存档,方便在不同服务器部署相同的环境,我们这里使用了Docker Compose来定义Nginx容器配置信息。

1. Nginx的docker-compose-nginx.yml定义文件编写

  Docker及Docker Compose安装配置,前面有详细介绍,这里不再赘述,以下是Nginx容器的Docker Compose定义文件内容:

version: '3'
services:##nginx配置nginx:image: nginx:latestrestart: alwayscontainer_name: nginxenvironment:- TZ=Asia/Shanghaiports:#端口映射,前面是宿主机端口,后面是服务端口- 80:80- 443:443volumes:- /data/container/nginx/html:/nginx/html- /data/container/nginx/www:/var/www- /data/container/nginx/logs:/var/log/nginx- /data/container/nginx/etc:/etc/nginx- /data/container/nginx/etc/nginx.conf:/etc/nginx/nginx.conf- "/etc/localtime:/etc/localtime"- "/usr/share/zoneinfo/Asia/Shanghai:/etc/timezone"#若用到ssl,可以引入- /bxl/container/nginx/ssl:/nginx/ssl

部分参数说明:

  • ports:端口映射,前面是宿主机端口,后面是容器内部服务端口
  • volumes:目录映射,前面是宿主机目录,后面是容器内部目录
2. 部署及备份目录准备
  • 新建 /opt/tmp 目录,用于Jenkins打包后,通过 Publish Over SSH插件将包传输到服务器的临时目录(如果前面创建过,这里无需再创建)。
  • 新建 /opt/bak 目录,用于存储所有部署过的包备份,方便后续版本回滚。此目录可能会占用很大空间,所以需要选择一个磁盘空间大的挂载目录(如果前面创建过,这里无需再创建)。
  • 新建 /opt/script 目录,用于Jenkins将包传输完成之后,执行安装、备份操作的相关命令脚本(如果前面创建过,这里无需再创建)。
  • 新建 /data/container/nginx/html,用与存放发布后的静态页面。
  • 新建 /data/container/nginx/www,映射Nginx容器内的/var/www目录。
  • 新建 /data/container/nginx/logs,映射Nginx容器内的/var/log/nginx目录,存放nginx运行日志。
  • 新建 /data/container/nginx/etc,映射Nginx容器内的/etc/nginx目录
  • 新建 /data/container/nginx/etc/nginx.conf,映射Nginx容器内的/etc/nginx/nginx.conf配置文件
  • 新建 /bxl/container/nginx/ssl,映射Nginx容器内的/nginx/ssl目录
mkdir -p /opt/tmp /opt/bak /opt/script /data/container/nginx/html /data/container/nginx/www /data/container/nginx/logs  /data/container/nginx/etc  /bxl/container/nginx/ssl
chmod -R 777 /opt/tmp /opt/bak /opt/script /data/container/nginx/html /data/container/nginx/www /data/container/nginx/logs  /data/container/nginx/etc  /bxl/container/nginx/ssl
3.根据系统部署要求编写Nginx配置文件nginx.conf,以下是简单的配置方法,正常情况下https请求还需要配置ssl证书,还有ipv6配置等,后面详细讲解Nginx配置。一定要将修改后的nginx.conf文件放到/data/container/nginx/etc/目录下,否则nginx启动时会报错找不到配置文件。
    server {listen 80;server_name  域名;gzip on;gzip_buffers 32 4K;gzip_comp_level 6;gzip_min_length 100;gzip_types application/javascript text/css text/xml text/plain application/x-javascript image/jpeg image/gif image/png;gzip_disable "MSIE [1-6]\."; gzip_vary on;#charset koi8-r;access_log  /var/log/nginx/portal.access.log  main;location / {root /nginx/html/gitegg_portal;try_files $uri $uri/ /index.html;index  index.html index.htm;}location /gitegg-api/ {proxy_set_header Host $http_host;               proxy_set_header X-Real-Ip $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://172.17.0.1:8080/;}}
4. 部署脚本编写说明
  • 定义入参,可以通过Jenkins任务将参数传入脚本中,我们定义了下面2个参数:
    project_name=“portal” : 服务名称
    portal_home=“/data/container/nginx/html” : 静态页面路径

  • 对参数进行检查,是否未传入参数,这里根据自己的实际情况判断,比如必须传入哪些参数,就设置参数的个数不能小于几。

#param validate
if [ $# -lt 1 ]; then  echo "you must use like this : ./publish_portal.sh <project_namename> [portal home dir]"  exit  
fi
  • 入参赋值,如果有参数传入,则取服务参数,如果没有参数传入则取默认值
if [ "$1" != "" ]; thenproject_name="$1"
fi
if [ "$2" != "" ]; thenportal_home="$2"
fi
  • 删除原部署的静态文件,解压当前发布包
# 删除
rm -rf "$portal_home"/index.html "$portal_home"/favicon.ico "$portal_home"/_app.config.js "$portal_home"/logo.png "$portal_home"/resource/ "$portal_home"/assets/
# 解压
cd /opt/tmp/portal
tar -zxvf portal.tar.gz
  • 备份当前发布的静态文件包
#bak project_name
BAK_DIR=/opt/bak/portal/$project_name/`date +%Y%m%d`
mkdir -p "$BAK_DIR"
cp /opt/tmp/portal/portal.tar.gz "$BAK_DIR"/"$project_name"_`date +%H%M%S`.tar.gz
#remove tmp
rm -rf portal.tar.gz
  • 将解压的静态文件copy到Nginx目录下
#copy portal code
cp -r * "$portal_home"
  • 删除临时文件
#remove tmp
rm -rf index.html favicon.ico _app.config.js logo.png resource assets
  • 打印执行完成的命令
echo "Portal is starting,please try to access $project_name conslone url"
  • 完整的安装部署脚本
project_name="portal"
portal_home="/data/container/nginx/html"
#param validate
if [ $# -lt 1 ]; then  echo "you must use like this : ./publish_portal.sh <project_namename> [portal home dir]"  exit  
fi
if [ "$1" != "" ]; thenproject_name="$1"
fi
if [ "$2" != "" ]; thenportal_home="$2"
fiecho "portal code copy"
#publish project_name
echo "$project_name publishing"
rm -rf "$portal_home"/index.html "$portal_home"/favicon.ico "$portal_home"/_app.config.js "$portal_home"/logo.png "$portal_home"/resource/ "$portal_home"/assets/
cd /opt/tmp/portal
tar -zxvf portal.tar.gz
#bak project_name
BAK_DIR=/opt/bak/portal/$project_name/`date +%Y%m%d`
mkdir -p "$BAK_DIR"
cp /opt/tmp/portal/portal.tar.gz "$BAK_DIR"/"$project_name"_`date +%H%M%S`.tar.gz
#remove tmp
rm -rf portal.tar.gz
#copy portal code
cp -r * "$portal_home"
#remove tmp
rm -rf index.html favicon.ico _app.config.js logo.png resource assets
#start portal
echo "Portal is starting,please try to access $project_name conslone url"
  • 将部署脚本上传到服务器的/opt/script目录下,并赋予可执行权限
chmod 755 publish_portal.sh

二、新建Jenkins配置打包任务,部署打包后的Vue页面

1. Dashboard > 新建任务,输入任务名称,选择“构建一个自由风格的软件项目”,点击确定。

Dashboard
新建任务

2. 项目配置,进入到任务配置页
  • 丢弃旧的构建 :这里在保持构建的最大个数填写5,当然可以根据自己情况填写,否则旧的构建包会一直存在占用磁盘空间。
    丢弃旧的构建
  • 源码管理:配置git代码地址、用户名密码和版本分支,如果是需要用户名密码的git库,那么下面需要选择访问的用户名密码,这里一定要使用用户名密码方式,使用token的方式无法选中。可以在下方add,也可以在Jenkins全局Credentials 中添加,方便其它任务使用。

源码管理

访问凭证

  • 构建触发器:可选可不选,这个根据自己的需求选择,任务在什么情况下出发构建。
    构建触发器
  • 构建环境:这里选择Provide Node & npm bin/ folder to PATH,选择我们在系统配置中配置的Node版本。

构建环境

  • Build Steps:选择执行shell,在shell窗口中输入需要执行的打包命令。

Build Steps

shell脚本

  • shell脚本完整内容:
echo $PATH
node -v
pnpm -v
pnpm install
pnpm run build
cd dist
rm -rf portal.tar.gz
tar -zcvf portal.tar.gz *
cd ../
  • 构建后操作:选择构建后将包发送到服务器
    构建后操作

  • Post Steps:将打包后的文件发送到服务器,并执行设置好的脚本,这里选择Run only if build succeeds,当构建成功时Post。

Post Steps1

  • Exec command:将打好的包发布到环境之后,在环境上执行的部署脚本命令。/opt/script/publish_portal.sh 是脚本文件、portal 是项目名称、/data/container/portal 是前端代码存放路径。
/opt/script/publish_portal.sh portal /data/container/portal

Post Steps2

3. 运行构建任务
  • 立即构建

立即构建

  • 查看构建日志:点击立即构建之后,下方会出现进度条,点击进度条就可以进入构建日志界面。

查看构建日志

日志

4. 构建成功后,下方会给出构建成功提示,此时登录远程服务器查看文件是否部署成功即可。

部署成功

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

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

相关文章

SQL6 查找学校是北大的学生信息

描述 题目&#xff1a;现在运营想要筛选出所有北京大学的学生进行用户调研&#xff0c;请你从用户信息表中取出满足条件的数据&#xff0c;结果返回设备id和学校。 示例&#xff1a;user_profile iddevice_idgenderageuniversityprovince12138male21北京大学Beijing23214male…

探究SpringWeb对于请求的处理过程

探究目的 在路径归一化被提出后&#xff0c;越来越多的未授权漏洞被爆出&#xff0c;而这些未授权多半跟spring自身对路由分发的处理机制有关。今天就来探究一下到底spring处理了什么导致了才导致鉴权被绕过这样严重的问题。 DispatcherServlet介绍 首先在分析spring对请求处…

服务器分析和监控

在当今数字化时代&#xff0c;对于网络流量的分析和监控变得越来越重要。本文将详细介绍如何利用HTTPS代理服务器来实现高效、安全且可靠的流量分析与监控功能&#xff0c;并提供具体操作步骤以及相关技巧。无论是企业需要优化网络性能还是个人用户&#xff0c;在遵循法规合规前…

C语言深入理解指针(非常详细)(五)

目录 回调函数qsort使用举例qsort函数的模拟实现sizeof和strlen的对比sizeofstrlensizeof和strlen的对比一道关于sizeof的题 回调函数 回调函数就是一个通过函数指针调用的函数 如果你把函数的指针&#xff08;地址&#xff09;作为参数传递给另一个函数&#xff0c;当这个指…

Python之线程(二)

一、线程同步和互斥锁 同一个资源,多人想用?排队啊! 现实生活中,我们会遇到“同一个资源,多个人都想使用”的问题。 比如:教室里,只有一台电脑,多个人都想使用。天然的解决办法就是,在电脑旁边,大家排队。前一人使用完后,后一人再使用。再比如,上厕所排队。 二、线…

保姆级-微信小程序开发教程

一&#xff0c;注册微信小程序 如果你还没有微信公众平台的账号&#xff0c;请先进入微信公众平台首页&#xff0c;点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信&#xff0c;我们选择 “小程序” 即可。 接着填写账号信息&#x…

打造高效的私密论坛网站:Cpolar内网穿透+HadSky轻量级搭建指南

文章目录 前言1. 网站搭建1.1 网页下载和安装1.2 网页测试1.3 cpolar的安装和注册 2. 本地网页发布2.1 Cpolar临时数据隧道2.2 Cpolar稳定隧道&#xff08;云端设置&#xff09;2.3 Cpolar稳定隧道&#xff08;本地设置&#xff09;2.4 公网访问测试 总结 前言 经过多年的基础…

小城市当程序员好不好?

在职业发展中&#xff0c;小城市和大城市都有各自的机会和挑战。在大城市&#xff0c;C#的应用比例可能相对较低&#xff0c;学习C可能有一定的难度&#xff0c;而学习Java最好有人指导。在小城市&#xff0c;机会相对较少&#xff0c;跳槽的选择也有限。然而&#xff0c;小城市…

说完 Java 的 Abstract 后再来说说接口 (interface )

如你对 Abstract 修饰的抽象类不是非常了解的话&#xff0c;请自行先考古下。 这篇文章需要对 Java 定义过的抽象类有一些基本的了解才可以。 抽象类和抽象方法 用 Abstract 修饰的类&#xff0c;叫做抽象类&#xff0c;那么用 Abstract 修饰的方法叫做抽象方法。 在 Java 中…

【软考】系统集成项目管理工程师(三)信息系统集成专业技术知识③

一、云计算 1、定义 通过互联网来提供大型计算能力和动态易扩展的虚拟化资源&#xff1b;云是网络、互联网的一种比喻说法。是一种大集中的服务模式。 2、特点 &#xff08;1&#xff09;超大规模&#xff08;2&#xff09;虚拟化&#xff08;3&#xff09;高可扩展性&…

字符检测专题第一期:OCR技术工业应用浅谈

难题不会做&#xff1f;扫一扫&#xff0c;题目、解析立马出现。寄快递需要输入信息&#xff1f;扫一扫&#xff0c;软件自动提取上传。身份证信息需要录入&#xff1f;扫一扫&#xff0c;立马精准识别。这些都是我们日常司空见惯的动作&#xff0c;而实现这一切正是得益于OCR技…

开开心心带你学习MySQL数据库之节尾篇

Java的JDBC编程 各种数据库,MySQL, Oracle, SQL Server在开发的时候,就会提供一组编程接口(API) API ~~ Application Programming Interface ~~ 应用程序编程接口 计算机领域里面的一个非常常见的概念, 给你个软件,你能对他干啥(从代码层次上的) 基于它提供的这些功能,就可以写…