前端 docker+jenkins+nginx实现自动化构建部署

正步走的小明
243 阅读7分钟

前言

今天公司的一个小伙伴整了一个Jenkins自动化构建流程，把他牛逼的，看的我羡慕了，作为一个前端小弱鸡，这该死的好胜心激起了我的胜负欲！！！咱也整一个！ 欸，就是玩儿！

准备

  • 服务器两台 centos7.9（一台部署Jenkins，一台部署项目，脑子一热买的，应该可以用一台，各位看情况好吧）

安装Docker

  1. 在安装之前先安装两个依赖，分别是
  • device-mapper-persistent-data：linux下的一个存储驱动，高级存储技术
  • lvm2：用于创建逻辑磁盘分区
yum install -y yum-utils device-mapper-persistent-data lvm2
  1. 添加阿里云的Docker镜像源
sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
  1. 安装Docker
yum install docker-ce -y
  1. 通过linux进程管理服务命令启动Docker
systemctl start docker 
systemctl enable docker
  1. 查看docker版本
docker -v

image.png

安装docker-compose

通过compose可以使用yml文件配置程序所需要的所有服务，最后使用命令运行，就能创建并启动yml中设置的左右服务

sudo curl -L "https://github.com/docker/compose/releases/download/1.24.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

不过github太慢，试试换源安装，快的飞起

sudo curl -L https://get.daocloud.io/docker/compose/releases/download/1.25.0/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose

安装完成之后提升权限：

sudo chmod +x /usr/local/bin/docker-compose

安装完成后可以使用命令查看版本信息

docker-compose -v

通过docker安装nginx和jenkins

拉取nginx和jenkins镜像

docker pull nginx
docker pull jenkins/jenkins:lts //lts是jenkins的稳定版

此处可以提一下可以通过 docker search命令来搜索镜像，安装自己中意的镜像

docker search jenkins

image.png

安装完成之后通过命令查看docker下存在的镜像

docker images

image.png

目录规划

便于管理，我们将nginx和jenkins放到同一个文件目录中可以在根目录或者home文件夹下，或者单独创建一个文件夹目录，结构如下

+compose
    -docker-compose.yml //docker-compose执行文件
+nginx
    -nginx.conf  //nginx配置文件
+jenkins
    -jenkins_home //jenkins挂在卷

docker-composde.yml

version: '3'
services:                                      # 集合
  docker_jenkins:
    user: root                                 # 为了避免一些权限问题 在这我使用了root
    restart: always                            # 重启方式
    image: jenkins/jenkins:lts                 # 指定服务所使用的镜像 在这里我选择了 LTS (长期支持)
    container_name: jenkins                    # 容器名称
    ports:                                     # 对外暴露的端口定义
      - 8080:8080
      - 50000:50000
    volumes:                                   # 卷挂载路径
      - /home/jenkins/jenkins_home/:/var/jenkins_home  # 这是我们一开始创建的目录挂载到容器内的jenkins_home目录
      - /var/run/docker.sock:/var/run/docker.sock
      - /usr/bin/docker:/usr/bin/docker                # 这是为了我们可以在容器内使用docker命令
      - /usr/local/bin/docker-compose:/usr/local/bin/docker-compose
  docker_nginx:
    restart: always
    image: nginx
    container_name: nginx
    ports:
      - 8090:80
      - 80:80
      - 433:433
    volumes:
      - /home/nginx/conf.d/:/etc/nginx/conf.d
      - /home/webserver/static/jenkins/dist/dist:/usr/share/nginx/html

nginx.conf

server{
  listen  80;
  root /usr/share/nginx/html;
  index index.html index.htm;
}

这两个文创建完成之后，进入之前创建的compose目录下，启动环境

cd /home/compose
docker-compose up -d  //这是启动
docker-compose stop //这是停止

启动后通过docker ps -a查看容器情况

image.png STATUS显示为Up，端口号如图显示 就正常了，这个时候用公网ip加上8080端口号就可以访问jenkins了

image.png 这时界面会告诉你密码存储的位置，可是应为我们之前通过docker安装jenkins是自己规划了目录，所以目前密码存放的位置应该是

/home/jenkins/jenkins_home/secrets

jenkins初步设置

安装推荐插件 image.png 插件安装完成之后其实还会有个问题，那个中文插件没有全部翻译成功，很多都没有翻译，这个时候需要去插件中心搜索Locale插件，安装

image.png 安装完成后重启jenkins，在浏览器链接拦输入以下命令重启jenkins

服务器ip:端口(一般为8080)/restart

设置中文 image.png 找到locale模块，设置成zh_CN，然后刷新 image.png 有的时候，这样设置之后依然没有用，这个时候小技巧来了 先将语言设置成英文zh_US,然后重启，重启结束之后，在将语言改成中文zh_CN，刷新，之后就差不多了（其实还是有小部分翻译不全，不过已经是极限了感觉)

jenkins配置

安装gitee、Publish Over SSH、nodejs

在插件中心搜索这三个插件，并安装

  • gitee 帮助我们关联jenkins
  • Publish Over SSH 帮助我们构建玩项目之后将文件传到指定服务器上
  • nodejs 这应该不用我解释了

配置nodejs

image.png

image.png 配完保存

配置publish over ssh

  1. 在jenkins配置的服务器上生成密钥
ssh-keygen 可以直接生成密钥

不过我是用的是一面的命令，这里为了之后关联gitee时方便，我带上了邮箱，这两处可以使用相同的密钥
ssh-keygen -t rsa -C "XXX@163.com"

一路回车

image.png 在.ssh文件夹下生成了两个文件

  • id_rsa  私钥
  • id_rsa.pub 公钥
  1. 部署项目的服务器端配置公钥
    方法一：在部署项目的服务器端 进入.ssh目录，手动添加
cd /root/.ssh //进入.ssh目录
vim authorized_keys  //创建并编辑authorized_keys文件，并将之前创建的公钥文件中的内容复制粘贴到其中，保存

方法二：在部署jenkins的服务器端创建后传如部署项目的服务器端

cd /root/.ssh
cat id_rsa.pub >> authorized_keys  //将公钥拷贝到authorized_keys文件中
scp authorized_keys root@目标及其IP:/root/.ssh  //将文件拷贝到部署项目的机器上
  1. jenkins上配置插件

image.png

image.png

image.png 设置完成后保存

4.测试连接 image.png 点击测试连接后 显示成功，则表示配置没问题了

关联jenkins和gitee

1.给gitee添加之前生成的公钥id_rsa.pub image.png 2.给jenkins添加凭据（私钥） image.png image.png image.png image.png

创建jenkins构建项目

准备工作都做好了，接下来就开始创建构建项目了

新建项目

image.png

image.png

源码管理

这个时候在你的gitee上需要有一个测试项目，我是新创建了一个vue项目 image.png 把项目ssh连接拷贝到jenkins上 image.png

构建触发器

选择giteewebhook出发构建 image.png image.png 在gitee项目这设置webhooks image.png 根据jenkins项目构建触发器中生成的webhooks的链接和密码填写，添加webhooks image.png 都设置好后就可以测试一下了，点击测试 image.png 就能发现jenkins就出发构建了 image.png 这里发现jenkins上的构建时间不正确,修复方法如下 image.png 然后运行如下代码

System.setProperty('org.apache.commons.jelly.tags.fmt.timeZone', 'Asia/Shanghai')

image.png 运行完之后就发现时间正确了

image.png

设置构建环境

选择需要的node版本，我就安装了一版 image.png

构建

选择执行shell image.png

node -v  //查看node版本
npm -v  //查看npm版本
pwd   //查看当前目录
npm install  //安装依赖
npm run build   //打包
cd dist  //进入打包文件夹
tar -zcvf dist.tar.gz * //将文件夹中的内容压缩成dist.tar.gz

保存之后点击立即构建后，你就会发现，jenkins服务器下，成功构建了文件，文件目录如下（如果你之前设置的目录结构跟我一样的话） image.png

构建后操作

在我们构建完成之后，我们就需要把打包文件放入我们要部署的服务器的指定文件夹下，这就需要用到我们之前安装的插件Publish Over SSH，需要在构建后操作中配置一下 选择send build artifacts over SSH image.png

image.png

这个命令会在部署的服务器上运行

cd /data/front //进入目录
tar -zxf dist.tar.gz  //解压
rm -rf dist.tar.gz  //删除压缩包

至此就设置完成了，我们点击构建之后就会发现，部署的服务器上多了一个打包完成的目录

image.png

小结

虽然已经结束了，但是我还有个想法，就是是不是可以把niginx的配置文件放在项目里面，让后在构建后操作里做一些事情，构建完成之后，自动配置nginx，这样我们要是有一个新的项目就可以直接部署到nginx了。
可是转念一想，岂不是每一次构建都会做一次这个nginx配置，这样不太好，我只需要在第一次构建的时候做一个这样的配置，由于我不是很会linux命令，以及nginx的一些配置，所以目前这个我还不知道怎么搞，还希望有大哥来指导指导小弟，万分感谢！

avatar
文章
阅读
粉丝