gitlab+jenkins+docker自动化部署前端项目

1、背景

​ 开发push代码到gitlab，触发jenkins自动pull代码，通过npm编译、打包，然后通过执行shell脚本使docker构建镜像并push到私服（或者阿里云）仓库，此操作完成后jenkins服务器上再执行SSH命令登录到部署服务器，docker从仓库（私服）拉取镜像，启动容器。

2、环境准备

2.1、部署gitlab

docker-compose.yml如下：

web:  
	image: 'gitlab/gitlab-ee:latest' 
    restart: always  
    hostname: '192.168.25.128'
    environment:    
    	GITLAB_OMNIBUS_CONFIG: | 
        external_url 'http://192.168.25.128:8090'   
        # Add any other gitlab.rb configuration here, each on its own line 
    ports:    
       - '8090:8090'
   # 将容器的数据拷贝存到主机中
   volumes:   
     - '/srv/gitlab/config:/etc/gitlab'
     - '/srv/gitlab/logs:/var/log/gitlab'
     - '/srv/gitlab/data:/var/opt/gitlab'
    

**gitlab部署最小需要4G内存

2.2、部署dockerhub

​ Docker Hub作为Docker默认官方公共镜像；如果想自己搭建私有镜像仓库，官方也提供registry镜像，使得搭建私有仓库非常简单。 在192.168.25.128部署，docker-compose.yml如下：

	image: 'registry:2'
	containers: dockerhub
	restart: always
	ports:
		- '5000:5000'
	volumes:
		- '/home/dockerhub/data:/var/lib/registry'

# 由于Docker CLI客户端默认以HTTPS访问，而部署的registry并未提供HTTPS，因此，需要在pull镜像的Docker主机添加HTTP可信任：
vi /etc/docker/daemon.json 
# 每台需要访问私有镜像仓库的都要配置
{
    "insecure-registries":["192.168.1.99:5000"]
}

# 然后重新启动docker
systemctl daemon-reload && systemctl restart docker

# 测试仓库是否ok
docker pull ubuntu
docker tag ubuntu localhost:5000/ubuntu
docker push localhost:5000/ubuntu

# 查看已上传的镜像
curl http://localhost:5000/v2/_catalog

2.3、部署jenkins

2.3.1创建jenkins的工作目录并赋予权限

mkdir -p /home/jenkins_home
cd /home/
chown -R 1000 jenkins_home #把当前目录的拥有者赋值给uid 1000

2.3.2编写docker-compose文件

version: '3.7'
services:
    jenkins:
        image: jenkins/jenkins:lts
        container_name: jenkins
        environment:
            - TZ=Asia/Shanghai
        volumes:
            - /home/jenkins_home/home:/var/jenkins_home
        ports:
            - "8050:8080"
        expose:
            - "8050"
        restart: always

2.3.3启动容器

cd /home/jenkins_home/
docker-compose up -d

2.3.4开放防火墙8050端口

firewall-cmd --zone=public --add-port=8050/tcp --permanent
firewall-cmd -reload

2.3.5 修改插件中心下载源

vi /home/jenkins_home/hudson.model.UpdateCenter.xml
# hudson.model.UpdateCenter.xml
<?xml version='1.1' encoding='UTF-8'?>
<sites>
  <site>
    <id>default</id>
    <url>https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json</url>
  </site>
</sites>

3、配置jenkins

3.1 解锁jenkins

​ 将启动之后的密码复制到如下图的管理员密码框中

3.2 修改jenkins国内镜像源

​ 系统管理-插件中心-高级-升级站点

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

3.3下载插件

​ 选择插件来安装：Docker、docker-build-step、SSH、Gitlab、Gitlab Hook、NodeJS

​ docker用来打包镜像，启动容器等；docker-build-step 可以在jenkins中添加构建步骤；SSH用于远程Docker主机执行Shell命令；Gitlab、Gitlab Hook用于gitlab自动触发jenkins构建;、NodeJS打包前端项目

3.3.1配置SSH： 系统管理-系统配置-新增

3.3.2、配置docker-build-step

docker宿主主机需要开启remote api，在docker宿主主机上执行：

vim  /lib/systemd/system/docker.service 
# 修改ExecStart的值
ExecStart=/usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock -H tcp://0.0.0.0:2375

重新加载配置文件

systemctl daemon-reload & systemctl restart docker

开启防火墙的端口

firewall-cmd --zone=public --add-port=2375/tcp --permanent 
firewall-cmd --reload
firewall-cmd --zone=public --query-port=2375/tcp

3.3.3 docker 配置

系统管理--系统配置--Cloud 新增配置集群

3.3.4 配置Node版本

系统管理-全局工具配置-NodeJS

4 新建构建任务

4.1 新建任务

4.2 源码管理

4.3 构建触发

登录gitlab进入项目setting-Webhooks 设置jenkins触发地址和token

url为

secret token

gitlab 报错 Url is blocked: Requests to the local network are not allowed

解决：Admin area => Settings => Network=>Outbound requests

4.4 构建环境

选择Node->选择Node版本

4.5构建->执行shell

4.5.1 使用npm 打包前端项目

4.5.2 创建default.conf和Dockerfile文件

4.5.3 将前端包打包成镜像并上床dockerhub

echo $PATH
pwd
node -v
npm -v 
npm install
npm run build
pwd
cd /var/jenkins_home/workspace/test/

#!/bin/bash
if [ -f "./default.conf" ]; then
    rm -f ./default.conf
fi

if [ -f "./Dockerfile" ]; then
    rm -f ./Dockerfile
fi

echo "server {" >> ./default.conf
echo "    listen 80;" >> ./default.conf
echo "    server_name localhost;" >> ./default.conf
echo "    location / {" >> ./default.conf
echo "       root   /usr/share/nginx/html;" >> ./default.conf
echo "       index  index.html index.htm;" >> ./default.conf
echo '       try_files $uri $uri/ /index.html;' >> ./default.conf
echo "   }" >> ./default.conf
echo "}" >> ./default.conf
cat ./default.conf

echo "FROM nginx:latest" >> ./Dockerfile
echo "COPY ./dist /usr/share/nginx/html/" >> ./Dockerfile
echo "COPY ./default.conf /etc/nginx/conf.d/" >> ./Dockerfile
echo "EXPOSE 80" >> ./Dockerfile
cat ./Dockerfile

4.6 构建镜像并上传至dockerhub

4.7 部署项目

1. 使用SSH连接服务器

2. 暂停删除test容器和镜像

3. 运行新版本镜像文件

   docker rm -f test
   docker rmi 192.168.25.128:5000/test
   docker run -d -p 8080:80 --name=test 192.168.25.128:5000/test
   

*由于第一次部署的时候还没有test容器和镜像的时候会报错，所以第一次的时候直接启动容器就可以了