vue前端使用Jenkins自动构建项目，保姆级教程

1. 开始前的准备工作

1台服务器，1个镜像仓库，安装docker
练习的话，服务器可以在[阿里云上](https://www.aliyun.com/?spm=5176.ecscore_.top-nav.dlogo.509a4df5JhX1PN)领取一个月免费ECS云服务器，如下图

在这里插入图片描述
在阿里云控台界面搜索容器镜像服务
在这里插入图片描述
添加个人版的容器镜像服务
在这里插入图片描述
然后在服务器上安装docker使用下面两个脚本文件
创建一个脚本 install_before_docker_env.sh

#!/usr/bin/env bash
#安装docker脚本
echo '----安装docker准备开始----'echo '----安装docker开始----'
#yum  install docker -y
curl -fsSL https://get.docker.com/ | sh
echo '----安装docker结束----'echo '----查看docker版本开始----'
docker --version
echo '----查看docker版本结束----'echo '----更改docker 国内镜像原版本开始----'#mkdir docker
mkdir -p /etc/docker
chmod -R 777 /etc/docker
sudo vi /etc/docker/daemon.json
#{
#
#“registry-mirrors”: [“http://hub-mirror.c.163.com”]
#
#}
systemctl restart docker.service
echo '----更改docker 国内镜像原版本结束----'echo '----设置docker 开机启动开始----'
systemctl start docker
systemctl enable docker
#这行不需要
#yum install -y yum-utils >   device-mapper-persistent-data >   lvm2
systemctl enable docker
echo '----设置docker 开机启动结束----'echo '----安装docker准备结束----'

创建第二个脚本 install_docker-new.sh

#!/usr/bin/env bash
#安装docker脚本
echo '----安装docker准备开始----'echo '----安装docker开始----'
#yum  install docker -y
curl -fsSL https://get.docker.com/ | sh
echo '----安装docker结束----'echo '----查看docker版本开始----'
docker --version
echo '----查看docker版本结束----'echo '----更改docker 国内镜像原版本开始----'#mkdir docker
mkdir -p /etc/docker
chmod -R 777 /etc/docker
sudo vi /etc/docker/daemon.json
#{
#
#“registry-mirrors”: [“http://hub-mirror.c.163.com”]
#
#}
systemctl restart docker.service
echo '----更改docker 国内镜像原版本结束----'echo '----设置docker 开机启动开始----'
systemctl start docker
systemctl enable docker
#这行不需要
#yum install -y yum-utils >   device-mapper-persistent-data >   lvm2
systemctl enable docker
echo '----设置docker 开机启动结束----'echo '----安装docker准备结束----'

在服务根目录下创建一个install目录将两个脚本文件放入
cd到install目录下，执行ll看两个文件是否有可执行权限
下图就是无权限的
在这里插入图片描述
没有执行权限的话，执行命令，将两个安装docker脚本变为可执行权限

chmod u+x install_before_docker_env.sh
chmod u+x install_docker-new.sh

然后执行ll，查看两个文件名是否变为绿色，变为绿色即是可执行
在这里插入图片描述
执行两个脚本文件，如果报下图问题

 ./install_before_docker_env.sh./install_docker-new.sh

在这里插入图片描述
则需一下操作

vim install_before_docker_env.sh

进入文件后，shift + ：
输入命令

set ff=unix

然后按回车键保存，继续shift + ：
输入命令

wq

保存退出

install_docker-new.sh文件处理亦是如此

vim install_docker-new.sh

进入文件后，shift + ：
输入命令

set ff=unix

然后按回车键保存，继续shift + ：
输入命令

wq

保存退出

然后执行这两个脚本，第一个执行完后，执行第二个

 ./install_before_docker_env.sh./install_docker-new.sh

然后看到以下页面，就代表脚本执行成功了，现在等待两个脚本执行完毕
在这里插入图片描述
安装完后，输入命令

docker

出现下图内容，就代表docker已成功安装
在这里插入图片描述
查看docker 是否启动，如下图所示则是已启动
在这里插入图片描述

2.搭建 jenkins 服务

创建需要的目录

mkdir -p /install/jenkins_home

授予最高权限，避免一些权限问题

chmod -R 777 /install/jenkins_home

运行服务

docker run -d --name jenkins -uroot -p 50001:8080 -p 50000:50000 --restart=always -e TZ=“Asia/Shanghai” -e JENKINS_OPTS="--prefix=/jenkins" -e JENKINS_ARGS="--prefix=/jenkins" --privileged=true -v /install/jenkins_home:/var/jenkins_home -v /etc/localtime:/etc/localtime -v /usr/bin/docker:/usr/bin/docker -v /var/run/docker.sock:/var/run/docker.sock  -v /etc/sysconfig/docker:/etc/sysconfig/docker -v /usr/bin/docker-current:/usr/bin/docker-current  jenkins/jenkins

·
命令详细解释：
注意：千万不要自己在jenkins/jenkins后面指定版本:lastest，他会使用最新版本，但是进入页面配置账户那些的时候会出现中文乱码的情况，并且和gitlab集成会出现url的不行的情况，就用这个 jenkins/jenkins就可以了，并且和gitlab集成没有url不行的情况
docker run
-d #表示后台运行 （所有 docker 容器基本必须加的参数）
–name jenkins #表示该容器的名称，必须是唯一·的值，不能重复，可以用它他来代替容器 id，更容易记忆，就类似于域名和 IP 的关系，用它可以代替容器 ID 删除，或者停止容器服务
–restart always #能够使我们在重启 docker 时，自动启动相关容器 （所有 docker 容器基本必须加的参数）
-p 50001:8080 #用宿主机的 50001 端口映射容器内部服务的 8080 端口（jenkins 服务的 web 界面服务端口，50001 可以换成任意宿主机开放的端口，-p 50000:50000 这个默认的不用改）
-e TZ=“Asia/Shanghai” #设置 jenkins 服务的的时区参数保证和宿主机时间一致
-v /etc/localtime:/etc/localtime #设置 jenkins 服务的的时区参数保证和宿主机时间一致
-e JENKINS_OPTS=“–prefix=/jenkins” -e JENKINS_ARGS=“–prefix=/jenkins” #设置 jenkins 服务的访问项目名，如果后面要用到 nginx 代理 ip 端口进项访问，那么这个必须要设置
-v /install/jenkins_home:/var/jenkins_home #将 jenkins 服务/var/jenkins_home 的文件以及目录持久化到宿主机的/install/jenkins_home，可以便于我们对某些文件的操作，以及上传一些文件到容器内部使用
–privileged=true #权限 ，给容器赋予最高权限 （所有 docker 容器基本必须加的参数，会减少很多不必要的权限错误）
jenkins/jenkins:latest # 指定镜像的版本 格式：仓库地址/镜像项名称:镜像版本号 latest 表示最新的版本号 ，如果没有提前拉去镜像，则会自动拉取（所有 docker 容器基本必须加的参数）

验证是否搭建成功：
访问 http://服务器IP:50001/jenkins/,出现以下界面即运行成功
在这里插入图片描述
如果无法访问，查看下服务器的50001端口是否放开，没有开放需要开放下
在这里插入图片描述

在宿主机执行

cat /install/jenkins_home/secrets/initialAdminPassword

获取初始登录密码

在这里插入图片描述
选择点击安装推荐的插件，耐心等待所有插件安装完成
在这里插入图片描述
在这里插入图片描述
注册一个非admin的用户，后面可以用该用户登录操作jenkins，拥有和admin用户的一样的权限，保存完成，开始使用jenkins
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
安装jenkins中文插件
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在宿主机执行

 docker restart jenkins

重启jenkins，加载最新的插件，此时回到web界面应该都是中文显示了
在这里插入图片描述
在这里插入图片描述

3.安装node环境

下载node.js的jenkins插件，按照下图操作
在这里插入图片描述
在这里插入图片描述
配置全局node.js的版本，建议 如果是最好用node14.17.2这个版本，这个版本适合vue2，vue3，react都可以打包，当然你也可以根据你自己的项目来决定，也可以像jdk一样多装几个，如下图配置，点击下方的保存即可完成配置

4.安装Publish Over SSH插件

可以帮助我们将打包的好的jar或者其他文件传送到真正部署的主机，并且执行我们一些脚本来启动运行服务，因为一般部署服务的主机和打包的主机是不同，同样单台主机打包部署也支持发送相关文件，然后给配置over SSH插件
在这里插入图片描述
配置 over SSH步骤1：首页==》系统管理==》系统配置，Passphrase：如果私钥设置了密码就是私钥的密码，私钥没设置密码可以不填
在这里插入图片描述
在这里插入图片描述
配置 over SSH步骤2：在jenkins容器所在的宿主机（并非jenkins容器内部==>亲测容器内部生成的无效）生成ssh密钥和公钥，公钥发送到各个jenkins需要链接的服务器，这样就可以可以实现免ssh账号密码登录服务器
在宿主机执行

ssh-keygen

生成公私钥，默认生成在 /root/.ssh 目录下面， id_rsa是私钥文件， id_rsa.pub 是公钥文件,
然后执行

 ssh-copy-id -i /root/.ssh/id_rsa.pub -p 22 root@服务器IP

有的默认不是22端口需改成自己的端口，然后确认yes，输入服务器的密码即可， 链接多个服务器就需要执行多次该命令将文件发送到多个服务器 【经过验证该公钥和私钥还是要在jenkins容器的宿主机上面进行，然后使用私钥的内容字符串，不用私钥路径进行】
在这里插入图片描述
在这里插入图片描述
执行命令，将RSA公钥里面的内容复制下来

vim  /root/.ssh/id_rsa

在这里插入图片描述
把刚刚复制下来的公钥文本放到Publish over SSH配置中，测试下是否可以连接
在这里插入图片描述
tips: 如果这里的SSH Servers Remote Directory 如果填了‘/’，则项目的configure 设置Transfers 与 Transfer Set的Remote Directory前面就不要加‘/’

5.安装gitlab插件或者gitee插件

取决于你的代码是用的哪个仓库，如果都在用，这两个插件都可以下载
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6.新建一个自由风格的项目

在这里插入图片描述
在这里插入图片描述
任务配置
配置源码管理
在这里插入图片描述
在这里插入图片描述

构建触发器勾选Gitee webhook触发构建
在这里插入图片描述
点击生成Gitee WebHook 密码，复制备用
在这里插入图片描述
打开并登录自己的gitee账号，打开对应的项目，点击管理===》WebHooks===》添加 webHook

在这里插入图片描述
在这里插入图片描述
复制Jenkins任务地址，粘贴到gitee webhooks配置中
在这里插入图片描述
选择你需要的node环境
在这里插入图片描述
Build Steps
点击增加构建步骤按钮 选择执行shell
在这里插入图片描述
输入shell命令

npm config set registry https://registry.npm.taobao.org
npm install yarn -g
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ -g
yarn
yarn run build

在这里插入图片描述
点击增加构建后操作步骤选择Send build artifacts over SSH
在这里插入图片描述
配置Send build artifacts over SSH
依次输入

dist/**/*
install/quesweb 
cd /install/quesweb

在这里插入图片描述
配置Transfer Set
在这里插入图片描述
nginx.conf文件源码


#user  nobody;
worker_processes  1;
#error_log  logs/error.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  logs/access.log  main;sendfile        on;#tcp_nopush     on;#keepalive_timeout  0;keepalive_timeout  65;#gzip  on;
underscores_in_headers on;server {listen       80;server_name localhost;# underscores_in_headers on;#charset koi8-r;#access_log  logs/host.access.log  main;#   location /wx-share {#          alias    /usr/share/nginx/html/dist/;#          index index.html index.htm index.php;# 	          try_files $uri $uri/ /wx-share/index.html;  ##     }location / {alias    /usr/share/nginx/html/dist/;index index.html index.htm index.php;try_files $uri $uri/ /wx-share/index.html;  #}}
}

再添加一个Transfer Set配置
在这里插入图片描述
输入命令

cd /install/quesweb
docker rm -f 容器名称
docker build -t 镜像地址:latest .
docker login -u=xxx registry.cn-shenzhen.aliyuncs.com -p=xxx
docker push 镜像地址:latest
docker run -d -p 80:80 --name=容器名称 镜像地址:latest

里面镜像地址，在阿里云容器镜像服务中查看
在这里插入图片描述
在这里插入图片描述
Dockerfile文件源码

#其中 pro 目录就是vue在本地打包出来的一个目录，名字可以随便取
# 设置基础镜像
FROM nginx
# # 定义作者
# MAINTAINER kl
# 将当前Dockerfile文件同级的的pro文件夹复制到容器内部 /usr/share/nginx/html/pro 这个目录下面
#容器内部中如果这个目录不存在，会自动创建pro目录COPY dist  /usr/share/nginx/html/dist
# COPY dist  /usr/share/nginx/html/dist
#将当前Dockerfile文件同级的nginx.conf文件拷贝到容器内部的 /etc/nginx/nginx.conf
#如果没有会创建，如果有会覆盖
COPY nginx.conf /etc/nginx/nginx.conf
#输出一句话 表示完成
RUN echo 'echo init ok!!'EXPOSE 80

此时到这里前端自动化就基本完成了，现在可以执行试试
在这里插入图片描述
可以在控制台查看日志
在这里插入图片描述
可以勾选项目配置里的保留构建的依赖日志，方便查看构建时的日志记录
在这里插入图片描述
可以勾选Verbose output in console，方便查看SSH的输出
在这里插入图片描述
看到这个快乐的小太阳就代表你构建成功啦
在这里插入图片描述

书写不易，麻烦来个一键三连（点赞，关注，收藏）

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

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

相关文章

vue 3.x 中使用ele-image时相对路径的图片加载失败

vue 3.x 中使用ele-image时相对路径的图片加载失败

参考文档： https://element.eleme.cn/#/zh-CN/component/installation 环境: Mac OS X 10.12 [zcmele 2]$node -v v12.6.0 [zcmele 3]$npm -v 6.9.0 [zcmele 4]$cnpm -v cnpm6.1.0 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js) npm6.10.2 (/usr/local/li…
阅读更多...
创意3D立体logo设计难不难？怎么设计？

创意3D立体logo设计难不难？怎么设计？

本文由：“学设计上兔课网”原创，图片素材来自网络，仅供学习分享 创意3D立体logo设计难不难？怎么设计？虽然是3D的效果，但是我们也可以通过平面设计软件AI或者PS软件来实现这种伪3D的视觉效果。首先我们来看一看做完的最终效果 1.多边形工具，填充为0，有描边。利用多边形…
阅读更多...
PR开场片头模板创意立体3D动态logo展示pr模板

PR开场片头模板创意立体3D动态logo展示pr模板

， PR开场片头模板 创意立方体3Dlogo展示pr模板 这是一个整洁和动态动画的Premiere Pro模板，带有一个旋转立方体，时尚地旋转以显示您的媒体。包含1个标志占位符和1个文本占位符。简单介绍您的演示文稿，幻灯片，电视节目…
阅读更多...
3D logo制作

3D logo制作

3D制作图片 这次用AI来制作3Dlogo，首先把一张立体形状的logo图导入AI里 使用钢笔工具先把侧面白色部分抠下来 像上图一样抠下来之后在菜单里点击效果3D然后选择凸起和斜角，为了更好的去调整3D图形的变化，先点击预览调整凸出厚度数值为482pt，然后再去调整上面的方向环绕…
阅读更多...
C4D暑期计划打卡7.30（2）

C4D暑期计划打卡7.30（2）

完成logo破碎小动画跟做 为完成的logo主体添加材质、增加天空、摄像机目标、对主体内部集进行单独材质添加，渲染增加景深，增添变化。 四视图 透视图 渲染图1 渲染图2
阅读更多...
修改mars3d内置的文字

修改mars3d内置的文字

在使用mars3d开发中可能会需要修改内置的文字，如下图 mars3d内置的文字都会统一放在 mars3d.lang 这个对象下管理。如下图 如果需要修改，可以使用如下的方式 mars3d.Lang["_单击完成绘制"][0] "单击完成绘制，右键取消绘制&q…
阅读更多...
CSS之 2D转换---3D转换（内含过渡）

CSS之 2D转换---3D转换（内含过渡）

转换可以实现元素的位移、旋转、缩放等效果 2D转换 translate --- 移动rotate --- 旋转scale --- 缩放 1.translate 语法：(px) transform:translate(x,y); transform:translateX(n); transform:translateY(n); 不会影响其他元素的位置 （会变成前后…
阅读更多...
chatgpt赋能python：Python的文件导出功能

chatgpt赋能python：Python的文件导出功能

Python的文件导出功能 作为一种流行的编程语言，Python 提供了广泛的文件导出功能，方便了开发者的日常工作。在本文中，我们将分享如何使用 Python 导出.py 文件，以及如何最大程度地利用这个功能。 什么是.py 文件？ 首…
阅读更多...
月薪2万，被新同事15秒气走。

月薪2万，被新同事15秒气走。

今年，AIGC掀起了巨浪，身边不少人感到前所未有的焦虑： 朋友圈好友晒出的AI美图，仅需15秒，竟比我2周的设计更出色； 公司用AI写的文案，转化率提升了10%，可能要优化人员了; 职场危机提前…
阅读更多...
AIGC制作的“视觉大片”走红！耗时仅3天，首批玩家吃到“红利”了

AIGC制作的“视觉大片”走红！耗时仅3天，首批玩家吃到“红利”了

3月26日，2023山东省旅游发展大会在青岛拉开帷幕,当天，一条动画小视频惊艳了现场所有人，这条视频很快登上了“学习强国”、微博等社交媒体平台。视频名为《AI眼中的崂山四季》，108秒，呈现了青岛崂山大约十个特色“网红打…
阅读更多...
Midjourney注册教程

Midjourney注册教程

Midjourney 太火了！无论你是画师、设计师，还是淘宝电商等，都不得不熟悉并利用这种超级牛逼的 AI 绘图工具，不然真的保不定哪天就被淘汰了！ Midjourney 怎么玩？相信很多小白还不清楚！这不巧了么…
阅读更多...
2023年10个爆火的AI工具，分分钟提高工作质量！

2023年10个爆火的AI工具，分分钟提高工作质量！

大家好。我是不知名 设计师l1m0_，今天分享内容为：2023年10个爆火的AI工具。对AI感兴趣的朋友一定不能错过，一起来看看吧。 2023年，AIGC爆发式增长，各类AI软件随之应运而生，衍生出不少的设计行业AI黑科技 &a…
阅读更多...
基于协同过滤的旅游推荐系统 学渣的毕业设计总结

基于协同过滤的旅游推荐系统 学渣的毕业设计总结

我的毕业设计选题是《基于协同过滤的旅游推荐系统的设计与实现》，用到了python语言，在pycharm中实现。系统主要包含用户的登录注册、个人信息管理、个性化推荐、景点查找、景点收藏评论和后台管理六大功能模块。同组的一个女生是电影推荐系统&#xff0c…
阅读更多...
ProvChain: A Blockchain-based Data Provenance Architecture in Cloud Environment论文翻译+一点点理解

ProvChain: A Blockchain-based Data Provenance Architecture in Cloud Environment论文翻译+一点点理解

Abstract Cloud data provenance is metadata that records the history of the creation and operations performed on a cloud data object. 云数据源是一种对于云端数据对象记录创作和操作历史记录的元数据。 Secure data provenance is crucial for data accountability, …
阅读更多...
多语言海外商城系统平台自带产品库一键铺货上架

多语言海外商城系统平台自带产品库一键铺货上架

在经济步入全球化的过程中，贸易已经不仅仅局限在某个地方交易，而是扩散到全球，因而，很多企业纷纷瞄准国外市场。而且，因为网络的高速发展，人们获取信息的来源越来越多，多语言商城系统就是其中之…
阅读更多...
（基于安卓app开发项目）英语学习记单词软件的毕业设计（java+j2ee+mysql）附源码+论文

（基于安卓app开发项目）英语学习记单词软件的毕业设计（java+j2ee+mysql）附源码+论文

大家好！我是岛上程序猿，感谢您阅读本文，欢迎一键三连哦。 💞当前专栏：安卓app毕业设计 精彩专栏推荐👇🏻👇🏻👇🏻 🎀Java毕业设计 &am…
阅读更多...
计算机毕业设计android的图书馆图书借阅座位预订app(源码+系统+mysql数据库+Lw文档）

计算机毕业设计android的图书馆图书借阅座位预订app(源码+系统+mysql数据库+Lw文档）

项目介绍 本次毕业设计是设计并实现一个图书馆座位预约系统。该系统的最终目的是为了自动化管理图书馆自习座位，解决占座问题，提高座位利用率。实际上我校是有相应的座位管理系统，它是那种固定的触摸刷卡屏终端，每层有一个&#…
阅读更多...
基于.Net开发的、支持多平台、多语言餐厅点餐系统

基于.Net开发的、支持多平台、多语言餐厅点餐系统

今天给大家推荐一套支持多平台、多语言版本的订单系统，适合餐厅、酒店等场景。 项目简介 这是基于.Net Framework开发的，支持手机、平板、PC等平台、多语言版本开源的点餐系统，非常适合餐厅、便利店、超市、酒店等，该系统基础功…
阅读更多...
vivo 全球商城：电商平台通用取货码设计

vivo 全球商城：电商平台通用取货码设计

vivo官网商城开发团队 - Zhou Longjian 一、背景 随着O2O线上线下业务的不断扩展，电商平台也在逐步完善交易侧相关的产品功能。在最近的需求版本中，业务方为进一步提升用户的使用体验，规划了取货码生成及订单核销相关逻辑，目的是…
阅读更多...
【轻量化网络系列（4）】ShuffleNetV1论文超详细解读（翻译 ＋学习笔记+代码实现）

【轻量化网络系列（4）】ShuffleNetV1论文超详细解读（翻译 ＋学习笔记+代码实现）

前言 前面我们学了MobileNetV1-3，从这篇开始我们学习ShuffleNet系列。ShuffleNet是Face（旷视）在2017年发布的一个高效率可以运行在手机等移动设备的网络结构，论文发表在CVRP2018上。这个新的轻量级网络使用了两个新的操作&#…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023