vlambda博客
学习文章列表

Linux中Jenkins自动化部署Vue项目

Jenkins自动化部署Vue项目

jenkins介绍

Jenkins是开源的,使用Java编写的持续集成的工具,在Centos上可以通过yum命令行直接安装。Jenkins只是一个平台,真正运作的都是插件。这就是jenkins流行的原因,因为jenkins什么插件都有。

1. 环境准备

centos * 服务器
宝塔远程连接工具V2

2. 首先登录服务器更新系统软件

yun update

3. 安装Java和git

yum install java
yum install git

4. 安装nginx

yum install nginx //安装
service nginx start //启动

出现Redirecting to /bin/systemctl start nginx.service

说明nginx已经启动成功了,访问http://你的ip/,如果成功安装会出来nginx默认的欢迎界面

5. 安装Jenkins

wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key 
yum install jenkins //完成之后直接使用 yum 命令安装 Jenkins
service jenkins restart  //启动 jenkins
Linux中Jenkins自动化部署Vue项目
  • 等待一会之后 提示你输入管理员密码
Linux中Jenkins自动化部署Vue项目
//服务器
[root@VM_0_2_centos ~]# cat /var/lib/jenkins/secrets/initialAdminPassword //cat 查看文件
Linux中Jenkins自动化部署Vue项目
  • 进入系统 安装插件,直接点击安装推荐插件
Linux中Jenkins自动化部署Vue项目
  • 点击推荐安装,稍等片刻,会出现
Linux中Jenkins自动化部署Vue项目
  • 这个时候安装的的插件会比较多,耗时有点久。耐心等待。

  • 安装完插件之后 创建第一个管理员用户

Linux中Jenkins自动化部署Vue项目
Linux中Jenkins自动化部署Vue项目

  • 继续点击保存并完成
Linux中Jenkins自动化部署Vue项目

点击开始使用 jenkins 这个时候 jenkins就已经配置成功了。

6. 用jenkins创建一个构建任务

Linux中Jenkins自动化部署Vue项目
Linux中Jenkins自动化部署Vue项目

Linux中Jenkins自动化部署Vue项目
  • 选择一下要构建的代码分支
Linux中Jenkins自动化部署Vue项目
  • 这个时候就创建了一个构建任务

回到首页==>就会看到一个llgtfoo的构建任务

Linux中Jenkins自动化部署Vue项目
  • 点击名称 进入当前任务配置页面,点击工作区
Linux中Jenkins自动化部署Vue项目
Linux中Jenkins自动化部署Vue项目
Linux中Jenkins自动化部署Vue项目
  • 在点击工作空间
Linux中Jenkins自动化部署Vue项目

jenkins构建任务已经完成

7. 填写jenkins构建时执行的shell脚本

Linux中Jenkins自动化部署Vue项目
Linux中Jenkins自动化部署Vue项目
Linux中Jenkins自动化部署Vue项目
  • 输入shell命令
node -v
npm install 
npm install 
rm -rf ./dist/*  移除工作区dist文件
npm run build  打包项目
rm -rf /www/web/site/*  删除/www/web/site上一次构建文件
cp -rf ./dist/* /www/web/site   将打包后的dist文件拷贝到/www/web/site ,/www/web/site为nginx文件目录
  • 再次回到my_test工程。

点击立即构建==>发现构建报错了(红色圆点即为构建失败,蓝色成功)

Linux中Jenkins自动化部署Vue项目
  • 点击错误的构建历史,进去再点击控制台输出
Linux中Jenkins自动化部署Vue项目
  • 查看报错问题
Linux中Jenkins自动化部署Vue项目
npm: command not found

jenkins默认是没有安装node插件的,所有没有npm命令  ,安装node插件 

8. 安装nodeJs

Linux中Jenkins自动化部署Vue项目
Linux中Jenkins自动化部署Vue项目
Linux中Jenkins自动化部署Vue项目
Linux中Jenkins自动化部署Vue项目
  • 安装成功
Linux中Jenkins自动化部署Vue项目
  • 点击全局工具配置
Linux中Jenkins自动化部署Vue项目
  • 选择安装nodeJS
Linux中Jenkins自动化部署Vue项目
Linux中Jenkins自动化部署Vue项目
  • 保存,回到配置
Linux中Jenkins自动化部署Vue项目
  • 保存再次点击立即构建 ,构建过程中可以点击控制台输出,查看构建过程
Linux中Jenkins自动化部署Vue项目

shell脚本执行执行了,但是没有全部执行成功。

当我们在服务器上安装jenkins时,会在服务器上创建一个jenkins的用户。但是这个jenkins没有操作/www/web/site文件夹的权限

给jenkins用户添加 /www/web/site文件夹的所有权限

[root@VM_0_2_centos /]# chown -R jenkins:jenkins /www/web/site

再次点击构建

Linux中Jenkins自动化部署Vue项目

Finished: SUCCESS 表示构建成功啦

9.打开服务器

查看服务器/www/web/site/ 文件夹里面的内容

Linux中Jenkins自动化部署Vue项目
/www/web/site/ 里面已经有了打包后的内容

10.利用docker部署nginx访问项目

centos 安装docker 环境

Linux中Jenkins自动化部署Vue项目

centos 官网安装步骤

docker pull nginx # 拉取镜像
mkdir -p /www/web/conf # 创建配置文件目录
Linux中Jenkins自动化部署Vue项目

/www/web/conf 中拷贝nginx.conf 和default.conf

# 拷贝配置文件
docker run --name nginx01 -d nginx:latest
docker cp nginx01:/etc/nginx/nginx.conf /www/web/conf  #把容器中的nginx.conf文件复制到conf目录下
docker cp nginx01:/etc/nginx/conf.d/default.conf /www/web/conf  #把容器中的default.conf文件复制到conf目录下
docker rm -f nginx01 #删除镜像

/www/web/site为Jenkins构建dist文件输出目录

创建web项目容器

docker run -it -d --name mynginx -p 8888:80 -v /www/web/site:/usr/share/nginx/html -v /www/web/conf/nginx.conf:/etc/nginx/nginx.conf -v /www/web/conf/default.conf:/etc/nginx/conf.d/default.conf  -v /www/web/logs:/var/log/nginx nginx

命令说明:
docker run -it -d --name mynginx  #名称
-p 8888:80  # 端口映射
-v /www/web/site:/usr/share/nginx/html  # 挂载资源路径
-v /www/web/conf/nginx.conf:/etc/nginx/nginx.conf  #挂载主配置文件
-v /www/web/conf/default.conf:/etc/nginx/conf.d/default.conf   # 挂载默认配置文件,反向代理就是从这个配置文件中配置
-v /www/web/logs:/var/log/nginx nginx # 挂载日志文件
Linux中Jenkins自动化部署Vue项目
  • http://ip:3000成功访问

【Linux常用命令速查手册】关注【入门小站】,后台回复 「1001」 自取。

近期热文


              原:https://blog.csdn.net/qq_33286909/article/details/123004365