docker gitlab+jenkins 前端自动化

1.生产ssh密钥

ssh-keygen -t rsa -b 2048 -C "<comment>"

cd ~/.ssh

id_rsa  id_rsa.pub  known_hosts

cat xxx_rsa

2.添加公钥到gitlab(用户设置-SSH密钥)

3.添加私钥到jenkins(General-源码管理-git)  --拉代码

Repository URL

ssh://git@xxxx:9003/root/front-demo.git

4.在jenkins构建触发器中把触发的url和token 添加到gitlab(项目下-设置-webhooks中)  -用户push触发回调-拉代码

5.编写项目Dockerfile

1.前端(也可以只安装nginx镜像，然后把前端项目放入nginx下)

# 指定node镜像对项目进行依赖安装和打包
FROM node AS builder
# 将容器的工作目录设置为/app(当前目录，如果/app不存在，WORKDIR会创建/app文件夹)
WORKDIR /app 

COPY . /app/

RUN npm config set registry "https://registry.npm.taobao.org/"
RUN npm install
#vue3.x手动运行 node node_modules/esbuild/install.js 来解决esbuild安装问题
RUN node node_modules/esbuild/install.js
RUN npm run build 

#指定nginx配置项目，--from=builder 指的是从上一次 build 的结果中提取了编译结果(FROM node as builder)，即是把刚刚打包生成的dist放进nginx中
FROM nginx
COPY --from=builder /app/dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf


#暴露容器8001端口  暴不暴漏都可以 因为nginx已经自动代理到80上了 到时候运行的时候 用的是80
EXPOSE 80 #8001

2.后端

# 指定node镜像对项目进行依赖安装和打包
FROM node
# 将容器的工作目录设置为/app(当前目录，如果/app不存在，WORKDIR会创建/app文件夹)
WORKDIR /app 

COPY . /app/

RUN npm config set registry "https://registry.npm.taobao.org/"
RUN npm install

#暴露容器8101端口
EXPOSE 8101

CMD [ "npm", "start" ]

6.编写项目nginx

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    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  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

7.在jenkins中生成和运行镜像（构建）

#!/bin/bash
#加入第一行解决Build step 'Execute shell' marked build as failure
#docker --version
#docker-compose --version

#获取容器运行的状态（返回true|false）
RUNNING=$(docker inspect --format="{{.State.Running}}" ${container_name})

echo "check running state ${RUNNING}"

#如果当前没有这个容器
if [ ! -n "${RUNNING}" ]
  then
   echo "${container_name} is not exit"
  
#如果容器没有运行起来  
elif [ "${RUNNING}" == "false" ]
  then
   echo "${container_name} is no running"
  
#容器运行起来了  
else  
  echo "${container_name} is running"
  #找到名字一样的容器
  CONTAINERID1=$(docker ps --filter="name=${container_name}" -q)
  
  if [ -n "${CONTAINERID1}" ]
   then
    #停止的容器
    docker stop ${CONTAINERID1}
  fi
  
  #找到名字一样的容器
  CONTAINERID2=$(docker ps -a --filter="name=${container_name}" -q)
  if [ -n "${CONTAINERID2}" ]
   then
    #删除的容器
    docker rm ${CONTAINERID2}
  fi  
fi  
  
  
#完成镜像构建
docker build  --no-cache -t ${image_name}:${tag} .

#跑起来我们的镜像
docker run -itd --name ${container_name} -p ${port}:80 --restart=always ${image_name}:${tag}

#使用docker-compose来构建 (没调用--no-cache无法更新,必须删除容器，重新来，不建议使用docker-compose)
#docker-compose up -d

--no-cache:缓存非常有用并且省时间，不过有时候docker缓存的行为不都能达到你的期望。用以上Dockerfile作为示例，假设你更改了代码并push到Git仓库。新代码不会check out下来，因为git clone命令没有更改。在Docker看来git clone的步骤一样，所以使用了缓存。在这种情况下，你可能不想开启docker的缓存了。

8.配置docker-compose.yml文件（如果要用docker-compose来启动）

version: "2.0"
services:
  docker_web: # 前端node容器(运行nginx中的Vue项目)
    container_name: web-demo # 容器名为''
    build:
      context: ./ # 指定设定上下文根目录，然后以该目录为准指定Dockerfile
      dockerfile: Dockerfile
    ports:
      - "8001:80" # 映射端口 nginx代理的80