vue 用docker+gitlab+jenkins实现自动化部署

关于docker相关知识可以看我之前写的一篇文章，这里就不叙述了

流程图

开发推送/合并代码到gitlab部署分支
代码推送到部署分支后，触发推送事件，然后调用jenkins的部署任务
jenkins通过git插件拉取gitlab对应分支的代码
maven打包
maven打包完成后，如果是部署在宿主机服务器，则通过ssh推送jar包到对应的服务器上，并执行重启命令

nginx 安装

拉取nginx镜像

ts 复制代码

version: '3.8'
services:
  nginx:
    image: nginx:latest
    container_name: nginx
    volumes:
      # 配置文件
      - ./nginx/conf:/etc/nginx/conf.d
      - ./nginx/logs:/var/log/nginx
      # 静态资源文件
      - ./dist/:/usr/share/nginx/html
    ports:
      - 9001:80
    privileged: true
    restart: always
    networks: 
      - app-network
networks:
  app-network:
    driver: bridge

执行docker-compose up -d

nginx 配置

在项目nginx/conf文件夹创建default.conf

bash 复制代码

server {
    listen       80;
    server_name  localhost;

    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        # 代理到你的前端项目
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

vue 服务就搭建完成了

jenkins安装

拉取jenkins镜像

ts 复制代码

version: '3.8'
services:
  jenkins: 
    image: jenkins/jenkins:lts
    container_name: jenkins
    volumes:
      - /home/jenkins_home:/var/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-compose命令 
    user: root
    ports:
      - 9002:8080
    privileged: true
    restart: on-failure  # 自动重启
    environment:
      - TZ=Asia/Shanghai  # 解决容器 时区的问题
    networks: 
      - blog-network

执行docker-compose up -d

解锁jenkins

bash 复制代码

# 查看jenkins容器logs
docker logs jenkins

复制红色框解锁字符串粘贴到jenkins中管理员密码输入框中进行解锁

安装jenkins插件

选择安装推荐的插件即可，可能会有安装失败的插件,重试即可

创建jenkins用户

升级站点

如果打不开 jenkins，将配置文件里面的url换成国内的即可

bash 复制代码

# 将红线部分修改为下面的url 
http://mirror.xmission.com/jenkins/updates/update-center.json

也可以在jenkins系统管理-插件中心-高级-升级站点

bash 复制代码

https://mirror.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json

gitlab安装

拉取gitlab镜像

ts 复制代码

version: '3.8'
services:
  gitlab:
    image: 'gitlab/gitlab-ee:latest' 
    container_name: gitlab
    # 将容器的数据拷贝存到主机中
    volumes:
      - ./gitlab/config:/etc/gitlab
      - ./gitlab/data:/var/opt/gitlab
      - ./gitlab/logs:/var/log/gitlab
    ports:
      - 9003:9003
    privileged: true
    restart: always
    hostname: 'www.mygitlab.com'
    environment:
      TZ: 'Asia/Shanghai'
      GITLAB_OMNIBUS_CONFIG: |
        external_url 'http://192.168.0.102:9003' # web站点访问地址
    logging:
      driver: 'json-file'
      options:
        max-size: '2g'
    networks: 
      - blog-network

执行docker-compose up -d

gitlab 常用命令

gitlab-ctl start：启动所有 gitlab 组件
gitlab-ctl stop：停止所有 gitlab 组件
gitlab-ctl restart：重启所有 gitlab 组件
gitlab-ctl status：查看服务状态
gitlab-ctl reconfigure：重新编译gitlab的配置
gitlab-rake gitlab:check SANITIZE=true --trace：检查gitlab
gitlab-ctl tail：查看日志

修改root用户密码

进入gitlab容器

bash 复制代码

docker exec -it gitlab bash

执行命令获取用户数据，这个过程有点慢

bash 复制代码

gitlab-rails console -e production

修改密码

bash 复制代码

user = User.where(id: 1).first
user.password='12345678'
user.password_confirmation='12345678'
user.save!
quit

然后再用root输入设置密码12345678登录即可

gitlab 与 jenkins 关联

进入容器

bash 复制代码

docker exec -it jenkins bash

生成密钥

bash 复制代码

# 一路回车, 默认路径和文件名, 不要密码
ssh-keygen -t rsa -C vhen@vhen.com

查看密钥

bash 复制代码

ls ~/.ssh

docker桌面jenkins容器中找到id_rsa.pub

将生成的密钥id_rsa.pub复制粘贴到gitlab中SSH Keys设置秘钥

docker桌面jenkins容器中找到id_rsa

将生成的密钥id_rsa复制粘贴到jenkins中的凭证

自动化部署

gitlab创建项目

关联远程仓库命令 :git remote add origin 远程仓库地址
提交本地项目

Jenkins安装插件

jenkins配置JDK

进入Jenkins容器，查看java安装路径

bash 复制代码

docker exec -it jenkins bash
$JAVA_HOME

新版jenkins不需要配置路径了，警告不能用于商业用途哦

jenkins安装Git

jenkins安装Maven

jenkins安装Node

jenkins配置凭据

配置全局gitlab

添加凭据
gitlab 个人中心获取token

输入框粘贴token

配置 Publish over SSH

SSH Server
- Name：用于给 jenkins 用户识别的用户名（随意定义）
- Hostname：目标机器的 IP 地址（服务器ip）
- Username：目标机器的 OS 用户（用户名）
- Remote Directory：需要把文件发送到的目标机器的目录地址（服务器下存放静态文件地址）

jenkins 创建任务

新建项目

General

配置参数

源码配置

构建触发器

点击高级选项找到secret token>Generate生成一个token值
前往gitlab项目中创建webhook

构建环境

Build Steps

第一步，点击增加构建步骤选择shell

bash 复制代码

node -v
npm install --registry=https://registry.npm.taobao.org
npm install -g yarn -registry=https://registry.npm.taobao.org
yarn -v
yarn install --pure-lockfile
yarn build
tar -zcvf dist.tar ./dist

第二步，点击增加构建步骤选择发送SSH

bash 复制代码

cd ~
mv ./dist.tar.gz /usr/share/nginx/html/
tar zxvf dist.tar.gz
rm -rf dist.tar.gz