宝塔+docker+jenkins部署vue项目(保姆级教程)

1.使用宝塔安装docker

在软件商城安装Docker管理器
宝塔+docker+jenkins部署vue项目(保姆级教程)_第1张图片

2.使用docker下载jenkins镜像

使用命令行

docker pull jenkins/jenkins:lts        //lts表示支持版本较长

3.创建并且挂载jenkins目录并赋值

jenkins_home为我创建的目录 可以修改任意目录

mkdir -p /jenkins_home
chown -R 1000 /jenkins_home

4.创建并启动Jenkins

我这里设置的端口为8080
启动之前需要在云服务器管理平台和宝塔开通相应端口号

docker run -di --name=jenkins -p 8080:8080 -v  /jenkins_home:/var/jenkins_home jenkins/jenkins:lts

-d 标识是让 docker 容器在后盾运行
-p 8080:8080 将镜像的8080端口映射到服务器的8080端口
-v  /jenkins_home:/var/jenkins_home目录为容器jenkins工作目录,咱们将硬盘上的一个目录挂载到这个地位,不便后续更新镜像后持续应用原来的工作目录。这里咱们设置的就是下面咱们创立的 /var/jenkins_mount目录
--name定义一个容器的名字,如果没有指定,那么会主动生成一个随机数字符串当做UUID

代表成功
在这里插入图片描述
宝塔+docker+jenkins部署vue项目(保姆级教程)_第2张图片
首次加载比较慢、需要等待很长时间
到这个页面算是初始化完成了
宝塔+docker+jenkins部署vue项目(保姆级教程)_第3张图片
输入密码路径为 之前设置的路径 可以在文件中找或者

docker logs jenkins


直接安装推荐插件
宝塔+docker+jenkins部署vue项目(保姆级教程)_第4张图片

正在安装中!!
宝塔+docker+jenkins部署vue项目(保姆级教程)_第5张图片
安装成功后创建管理员账号(一定要记住这个也是登录账号密码)
宝塔+docker+jenkins部署vue项目(保姆级教程)_第6张图片
这里实例配置直接默认 就行宝塔+docker+jenkins部署vue项目(保姆级教程)_第7张图片
安装成功
宝塔+docker+jenkins部署vue项目(保姆级教程)_第8张图片
完成后最好在docker中重启下jenkins镜像
登录
宝塔+docker+jenkins部署vue项目(保姆级教程)_第9张图片

5.配置jenkins

首先下载插件
宝塔+docker+jenkins部署vue项目(保姆级教程)_第10张图片
安装插件 NodeJS、Publish Over SSH (下图为安装教程)这三个插件都这么安装
宝塔+docker+jenkins部署vue项目(保姆级教程)_第11张图片

完成
宝塔+docker+jenkins部署vue项目(保姆级教程)_第12张图片
接下来添加凭证(这里我认为的是添加全局账号密码例如服务器账号、git账号密码)部署时候用
宝塔+docker+jenkins部署vue项目(保姆级教程)_第13张图片
宝塔+docker+jenkins部署vue项目(保姆级教程)_第14张图片
宝塔+docker+jenkins部署vue项目(保姆级教程)_第15张图片
宝塔+docker+jenkins部署vue项目(保姆级教程)_第16张图片
这里我创建了服务器账号密码和git账号密码
宝塔+docker+jenkins部署vue项目(保姆级教程)_第17张图片
宝塔+docker+jenkins部署vue项目(保姆级教程)_第18张图片
成功
宝塔+docker+jenkins部署vue项目(保姆级教程)_第19张图片
接下来配置node工具
宝塔+docker+jenkins部署vue项目(保姆级教程)_第20张图片
宝塔+docker+jenkins部署vue项目(保姆级教程)_第21张图片
设置好 勾选自动安装然后应用=》保存(听说不要选择18版本的node)

接下来配置服务器SSH
首先在宝塔中开启SSH
宝塔+docker+jenkins部署vue项目(保姆级教程)_第22张图片

宝塔+docker+jenkins部署vue项目(保姆级教程)_第23张图片
找到 Publish over SSH
需要配置
Passphrase 服务器SSH远程连接密码
SSH Servers中
Name 服务器名称(随便起名)
Hostname 主机号 例如192.168.0.1 (实际主机号)
Username 服务器SSH远程连接账号
Remote Directory 进入的路径
宝塔+docker+jenkins部署vue项目(保姆级教程)_第24张图片
宝塔+docker+jenkins部署vue项目(保姆级教程)_第25张图片
输入完成之后点击右下角测试 显示成功说明成功连接
宝塔+docker+jenkins部署vue项目(保姆级教程)_第26张图片

6.创建项目并且配置

宝塔+docker+jenkins部署vue项目(保姆级教程)_第27张图片
宝塔+docker+jenkins部署vue项目(保姆级教程)_第28张图片
源码管理选择git
输入git地址并且选择配置好的git账号密码
宝塔+docker+jenkins部署vue项目(保姆级教程)_第29张图片
部署指定分支(后面我会下载插件选择部署指定分支或标签)
宝塔+docker+jenkins部署vue项目(保姆级教程)_第30张图片
构建触发器 勾选
宝塔+docker+jenkins部署vue项目(保姆级教程)_第31张图片
宝塔+docker+jenkins部署vue项目(保姆级教程)_第32张图片

构建步骤
宝塔+docker+jenkins部署vue项目(保姆级教程)_第33张图片

echo "开始构建"
node -v
npm -v
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install
npm run build
#进入到打包目录
cd dist
#删除上次打包生成的压缩文件
rm -rf *.tar.gz
#把生成的项目打包成压缩包方便传输到远程服务器
tar -zcvf `date +%Y-%m-%d-%H-%M-%S`.tar.gz *
#回到上层工作目录
cd ../
echo "构建结束"

里面的npm指令根据实际的命令调整
这里步骤是 把你的代码构建成文件并且压缩下一步应该发到你的服务器
这里点击添加构建步骤
宝塔+docker+jenkins部署vue项目(保姆级教程)_第34张图片
宝塔+docker+jenkins部署vue项目(保姆级教程)_第35张图片

#进入远程服务器的目录
cd /www/wwwroot/你的项目地址
#找到新的压缩包
tar -zxvf *.tar.gz -C ./
echo ">>>移除*.tar.gz"
rm -rf *.tar.gz
#发布完成
echo "发布完成"

应用保存
就可以去尝试部署了
宝塔+docker+jenkins部署vue项目(保姆级教程)_第36张图片
成功!
宝塔+docker+jenkins部署vue项目(保姆级教程)_第37张图片

上面说到我想部署某个分支或者标签这么弄

下载Git Parameter插件
宝塔+docker+jenkins部署vue项目(保姆级教程)_第38张图片
下载
宝塔+docker+jenkins部署vue项目(保姆级教程)_第39张图片
打开项目配置
选择参数化构建过程 选择git参数
宝塔+docker+jenkins部署vue项目(保姆级教程)_第40张图片
可以选择构建类型
宝塔+docker+jenkins部署vue项目(保姆级教程)_第41张图片
这里需要填写名称
宝塔+docker+jenkins部署vue项目(保姆级教程)_第42张图片
下面源码管理的地方需要将你默认的分支换为${上面起的名称}
否则他会部署默认分支
宝塔+docker+jenkins部署vue项目(保姆级教程)_第43张图片

应用保存
点击部署
宝塔+docker+jenkins部署vue项目(保姆级教程)_第44张图片
就可以选择分支部署了
宝塔+docker+jenkins部署vue项目(保姆级教程)_第45张图片
在这里插入图片描述
点个关注支持一下我吧
在这里插入图片描述

你可能感兴趣的:(工具,jenkins,docker,vue.js)