前端 Gitlab + docker 自动化部署流程

571 阅读4分钟

编写 Docker Dockerfile 和 docker-compose.yml

如果是测试环境建议配置一下ci/cd 如果是生产环境还是手动升级一下比较好的 生产环境只使用编写 Docker Dockerfile 和 docker-compose.yml 和配置nginx就可以了,如果需要升级手动去打包构建项目就ok了

1.编写Docker Dockerfile

FROM nginx:latest
# 将项目根目录下dist文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下
COPY dist/ /usr/share/nginx/html/
COPY default.conf /etc/nginx/conf.d/default.conf

2.编写docker-compose.yml

version: "3"
services:
  nginx:
    image: "nginx" 
    container_name: dooringx-admin
    build: .
    volumes:
       - ./dist:/usr/share/nginx/html/
       - ./default.conf:/etc/nginx/conf.d/default.conf
    restart: always
    ports:
      - "8136:80"

3.配置nginx

upstream my_server{
  server 114.116.39.243:8001; # 后端server 地址
  keepalive 2000;
}

server {
    listen       80;
    server_name  xx.xx.xx.xx; # 修改为docker服务宿主机的ip/域名,
    
    #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;
        try_files $uri $uri/ /index.html =404;
    }
     #  这里就是和vue本地代理的意思一样,已api开头的路径都代理到本机的3000端口
    location /api/ {
        proxy_pass http://my_server/api/;
        proxy_set_header Host $host:$server_port;
        # rewrite ^/api/(.*) /$1 break;
    }

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

基于 Docker 安装 Gitlab Runner

1. 一键安装命令

run -d --name gitlab-runner --restart always  -v /srv/gitlab-runner/config:/etc/gitlab-runner      -v /var/run/docker.sock:/var/run/docker.sock  gitlab/gitlab-runner:latest

如果gitlab-runner启动成功可以 使用docker ps 查看启动是否启动成功

  • run -d 后台运行
  • --name gitlab-runner 创建一个名称为gitlab-runner的容器
  • --restart always restart参数用于指定自动重启docker容器策略
    • no 默认值
    • always 容器退出时总是重启,on-failure 若容器的退出状态非0,则docker自动重启容器,还可以指定重启次数,若超过指定次数未能启动容器则放弃
    • unless-stopped 容器退出时总是重启,但不考虑Docker守护进程启动时就已经停止的容器
  • -v /srv/gitlab-runner/config:/etc/gitlab-runner 目录挂载,把容器内目录挂载到服务器本地(服务器本地目录:容器内目录)

2.查看Gitlab Runner配置信息

  • 打开Gitlab中的Settings image.png
  • 选择CI/CD 并且点击Runner image.png
  • url 和token 一会注册runner是会用到 image.png

3.注册Gitlab Runner

  • 使用docker ps 查看 启动容器 列表找到 image.png
  • 进入gitlab-runner容器 docker exec -it gitlab-runner /bin/bash image.png
  • 注册 gitlub runner gitlab-runner register
    • 第一个是域名,就是你代码库所在的域名,不知道的可以看下面的图
    • 第二个是你项目的token,它在下面图中所示的位置
    • 第三个是对当前runner的描述(随便写)
    • 第四个是为当前runner添加标签,标签会在.gitlab-ci.yml文件中使用到(也是随便写)
    • 第五个是runner运行的环境,我们这里填的是docker
    • 因为用的是docker所以这里要指定一个基础环境

编写 .gitlab-ci.yml

# 这里是docker镜像,说明我们的整个流水线是在docker的node:alpine容器里面完成的
# 不懂docker的可以简单理解为我们下面的所有任务是在一个有node环境的虚拟机里完成的
# 这个虚拟机的默认的目录就是我们当前的项目里
image: node:alpine
# 这里是我们自定义了一些流水线的阶段
stages:
  - pull
  - install
  - build
  - deploy
# 因为每个任务中所有操作产生的新的文件在进行到下一个任务时都会被清除
# 但有些我们不希望清楚,所以我们用到缓存,cache中定义的paths下的文件会被缓存到下一个任务中
cache:
  key: modules-cache
  paths:
    - node_modules
    - dist
job_pull:
  stage: pull
  image: docker:git
  only:
    - master
  tags:
    - vue3
  script:
    - git pull --rebase origin master
job_install:
  stage: install # 这里代表我们当前的任务处于install阶段
  # deploy:
  only:
  - master
  tags:
    - vue3 # 这里是当前任务的标签,标签是我们后面在gitlab-runner中定义的
  script: # 每个任务都必须有script,顾名思义就是执行的语句
    - npm install # 前面说的我们处于一个有node环境的虚拟机,那这句话就是在这个虚拟机的我们当前项目里执行npm install
job_build:
  stage: build
  only:
    - master
  tags:
    - vue3
  script:
    - npm run build
job_deploy:
  stage: deploy
  image: docker # 因为这里我们用到docker指令所以要把node环境切换到docker
  tags:
    - vue3
  script:
    - docker restart dooringx-admin

到此部署的配置基本完成,但是部署的时候可能会遇到一个连接错误的问题 image.png

  • 在服务器上输入 cd /srv/gitlab-runner/config 可以看到config.toml 编辑config.toml
  • 我这边把服务器的 /srv/gitlab-runner/config 文件隐射到了/etc/gitlab-runner 所以我修改本机的/srv/gitlab-runner/config 就是docker-runner 里面的/etc/gitlab-runner image.png vim config.toml 编辑 config.toml 修改runner的配置项,对相应的runner内容卷这加"/usr/bin/docker:/usr/bin/docker","/var/run/docker.sock:/var/run/docker.sock" image.png

到此就差不多成功了

image.png

  • 需要注意的是如果第一次运行的话需要找到本地docker runner运行目录
  • cd /var/lib/docker/volumes/
  • 这里可能需要找一下你docker runner 在那个目录,自己cd 找一下最新打包的代码就好了 image.png
  • 找到刚刚打包好的文件执行一下docker-compose up -d gitlab 代码仓库连接 gitlab.com/wgh1997/vit…