VUE项目通过gitlab-ci和docker实现持续集成和持续部署

最新推荐文章于 2024-03-15 20:00:00 发布

莎莎小公举

最新推荐文章于 2024-03-15 20:00:00 发布

阅读量1.7k

点赞数

分类专栏：自动化文章标签： docker nginx gitlab vue

本文链接：https://blog.csdn.net/qq_31930427/article/details/108849049

版权

自动化专栏收录该内容

2 篇文章 0 订阅

订阅专栏

需要对ci，nginx，docker，linux有一定的了解

1.部署规范

统一采用访问域名后，通过nginx代理到对应docker容器中的静态资源，项目中gitlab-ci.yml,dockerfile,docker-compose.yml,nginx.conf都是具有可移植性的，可通用。

2.注意事项

1.项目部署在域名目录下

vue.config.js文件中publicPath为‘/’,请求api直接代理到对应接口地址

2.项目部署在域名二级目录下

vue.config.js文件中publicPath为‘/project/’,请求api代理到‘/project/api

3.注意nginx配置

当二级域名时需要注意/test和/test/的区别

举例：访问地址是 http://域名/test/index.html

location /test {

proxy_pass http://nginx-test;

}

结果是：http://nginx-test/test/index.html

location /test {

proxy_pass http://nginx-test/;

}

结果是：http://nginx-test/index.html

location /test/ {

proxy_pass http://nginx-test;

}

结果是：http://nginx-test/test/index.html

location /test/ {

proxy_pass http://nginx-test/;

}

结果是：http://nginx-test/index.html

从测试结果中可以发现proxy_pass后有/的话，代理到server指向的根目录下，不带的话则是指向server的根目录的/test目录中

4.注意事项docker磁盘空间

CI每次跑完之后，会产生很多废弃容器和镜像等资源，一定时间囤积后，会造成磁盘空间满了，导致系统崩溃，所以需要有对应的处理机制，这里采用定时调度任务

一般而言，docker容器默认的本地数据存储路径位于/var/lib/docker路径下，通过df -h /var/lib/docker命令，可以查看其占用情况。如果高于80%，则意味着需要清理了。

一、清理命令

与清理容器多余数据相关的命令有两条，分别是：

docker image prune -af docker system prune -af

然后在/var/spool/cron/crontabs 中编辑定时任务,指向脚本的位置

>/dev/null 2>&1 脚本调试成功后不需要日志和邮件发送

crontab范例

每五分钟执行 */5 * * * *

每小时执行 0 * * * *

每天执行 0 0 * * *

每周执行 0 0 * * 0

每月执行 0 0 1 * *

每年执行 0 0 1 1 *

0 0 * * * /bin/sh /root/cron/wys.sh >/dev/null 2>&1

#! /bin/bash 

need_clean() {
    used=`df -h /var/lib/docker | awk -F"[ %]+" '/dev/{print $5}'`
    if [[ $used -ge 80 ]]; then
        return 0
    fi
    
    return 1

}

if need_clean; then
    docker system prune -a
fi

这里通过awk获取df -h的结果中的占用比例那一栏。-F"[ %]+"的意思是指定若干个空格或%为分隔符，从而将百分数中的%剔除。

只有当占用比例大于80%时才执行清除命令。

3.流程

1.创建远程仓库项目

登录gitlab账号，点击创建项目，项目路径可选群组，项目名称英文易懂，可选可见等级，创建项目完成后，有默认master分支

2.创建本地项目

以vue为例

npm install -g @vue/cli
# OR
yarn global add @vue/cli
vue --version
vue create hello-world

3.关联远程项目

1、本地创建git仓库，命令：git init

2、本地仓库和远程仓库关联，假设远程仓库在github上，地址为:http://xxx/xxx，执行命令：

git remote add origin http://xxx/xxx

3、本地项目push到远程，执行命令：git push origin xxx，具体参考如下情况：

推送本地分支local_branch到远程分支 remote_branch并建立关联关系，分为如下3种情况：

(1)远程已有remote_branch分支且已经关联本地分支local_branch且本地已经切换到local_branch,执行命令：

git push

(2)远程已有remote_branch分支但未关联本地分支local_branch且本地已经切换到local_branch,执行命令：

git push -u origin/remote_branch

(3)远程没有有remote_branch分支并，本地已经切换到local_branch,执行命令：

git push origin local_branch:remote_branch

4、若本地push到远程报错，需要看是否远程有更新未pull到本地，执行git命令：

git pull origin 远程分支名（如：master）

5、若在项目新建阶段，pull 报错，可以执行命令：

git pull origin master --allow-unrelated-history

4.搭建CI

gitlab项目中添加对应的runner到项目中，若服务器没有runner，安装runner

1.在项目根目录下创建gitlab-ci.yml文件

variables：构建变量

before_script：定义每个任务的脚本启动前需要执行的命令

stages：定义构建场景

tags：对应的执行runner

only：要跑的gitlab分支

variables:
  NPM_REGISTRY: http://registry.npm.taobao.org/
  NODE_IMAGE_VERSION: node:12.8.0
  DOCKER_REGISTRY: xxx
  OUTPUT_IMAGE_NAME: nginx-test
  RUN_CONTAINER_NAME: nginx-test
  NODE_VOLUME_MODULE: test-node-module

before_script:
  - whoami
  - docker volume create ${NODE_VOLUME_MODULE}

stages:
 - code_lint
 - build-release
 - deploy

code lint dev:
 stage: code_lint
 script:
  - docker run -v "$PWD":/usr/src/test/
   -v ${NODE_VOLUME_MODULE}:/usr/src/test/node_modules/
   -w /usr/src/test${NODE_IMAGE_VERSION} sh -c
   "npm config set registry ${NPM_REGISTRY} && npm install && npm run lint ; chmod  -R 777 ./"
 tags:
  - kw-tcmvc-dev-shell
 only:
  - dev

build and release dev:
 stage: build-release
 script:
  - docker run -v "$PWD":/usr/src/test/
   -v ${NODE_VOLUME_MODULE}:/usr/src/test/node_modules/
   -w /usr/src/test${NODE_IMAGE_VERSION} sh -c
   "npm config set registry ${NPM_REGISTRY} && npm install && npm run build:dev ; chmod  -R 777 ./"
  - docker login ${DOCKER_REGISTRY} -u xxx.
  - docker build -t ${DOCKER_REGISTRY}/${OUTPUT_IMAGE_NAME}:${CI_COMMIT_SHA:0:8} .
  - docker push ${DOCKER_REGISTRY}/${OUTPUT_IMAGE_NAME}:${CI_COMMIT_SHA:0:8}
 tags:
  - kw-tcmvc-dev-shell
 only:
  - dev

deploy dev:
 stage: deploy
 script:
  - docker login ${DOCKER_REGISTRY} -u xxx.
  - env THIS_TAG=${CI_COMMIT_SHA:0:8}
    docker stack deploy -c docker-compose.yml --with-registry-auth tcmvcstack
 tags:
  - kw-tcmvc-dev-shell
 only:
  - dev



code lint test:
 stage: code_lint
 script:
  - docker run -v "$PWD":/usr/src/test/
   -v ${NODE_VOLUME_MODULE}:/usr/src/test/node_modules/
   -w /usr/src/test${NODE_IMAGE_VERSION} sh -c
   "npm config set registry ${NPM_REGISTRY} && npm install && npm run lint ; chmod  -R 777 ./"
 tags:
  - kw-tcmvc-test-shell
 only:
  - test

build and release test:
 stage: build-release
 script:
  - docker run -v "$PWD":/usr/src/test/
   -v ${NODE_VOLUME_MODULE}:/usr/src/test/node_modules/
   -w /usr/src/test${NODE_IMAGE_VERSION} sh -c
   "npm config set registry ${NPM_REGISTRY} && npm install && npm run build:test ; chmod  -R 777 ./"
  - docker login ${DOCKER_REGISTRY} -u xxx.
  - docker build -t ${DOCKER_REGISTRY}/${OUTPUT_IMAGE_NAME}:${CI_COMMIT_SHA:0:8} .
  - docker push ${DOCKER_REGISTRY}/${OUTPUT_IMAGE_NAME}:${CI_COMMIT_SHA:0:8}
 tags:
  - kw-tcmvc-test-shell
 only:
  - test

deploy test:
 stage: deploy
 script:
  - docker login ${DOCKER_REGISTRY} -u xxx.
  - env THIS_TAG=${CI_COMMIT_SHA:0:8}
    docker stack deploy -c docker-compose-test.yml --with-registry-auth tcmvcstack
 tags:
  - kw-tcmvc-test-shell
 only:
  - test


 
code lint prod:
 stage: code_lint
 script:
  - docker run -v "$PWD":/usr/src/test/ 
   -v ${NODE_VOLUME_MODULE}:/usr/src/test/node_modules/ 
   -w /usr/src/test${NODE_IMAGE_VERSION} sh -c 
   "npm config set registry ${NPM_REGISTRY} && npm install && npm run lint ; chmod  -R 777 ./"
 tags:
  - tcmvc-prod-shell
 only:
  - master

build and release prod: 
 stage: build-release
 script:
  - docker run -v "$PWD":/usr/src/test/
   -v ${NODE_VOLUME_MODULE}:/usr/src/test/node_modules/ 
   -w /usr/src/test${NODE_IMAGE_VERSION} sh -c 
   "npm config set registry ${NPM_REGISTRY} && npm install && npm run build:prod ; chmod  -R 777 ./"
  - docker login ${DOCKER_REGISTRY} -u xxx.
  - docker build -t ${DOCKER_REGISTRY}/${OUTPUT_IMAGE_NAME}:${CI_COMMIT_SHA:0:8} .
  - docker push ${DOCKER_REGISTRY}/${OUTPUT_IMAGE_NAME}:${CI_COMMIT_SHA:0:8}
 tags:
  - tcmvc-prod-shell
 only:
  - master



deploy prod:
 stage: deploy
 script:
  - docker login ${DOCKER_REGISTRY} -u xxx.
  - env THIS_TAG=${CI_COMMIT_SHA:0:8} 
    docker stack deploy -c docker-compose-prod.yml --with-registry-auth prod-tcmvcstack
 tags:
  - prod-tcmvc-deploy
 only:
  - master

2.DOCKERFILE

构建docker镜像

拷贝打包好的dist目录到容器/var/www/html

拷贝nginx配置到容器/etc/nginx/conf.d

删除nginx默认配置

FROM nginx:alpine
COPY ./dist /var/www/html
COPY ./test.conf /etc/nginx/conf.d/ 
RUN rm /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx","-g","daemon off;"]

3.docker-compose.yml

定义构成应用程序的服务,这里需要注意memory内存的值以及端口，一般上传大文件等会受memory的影响，在配置中调大就OK了

version: "3"
services:
  nginx-test:
    # replace username/repo:tag with your name and image details
    image: xxx
    deploy:
      replicas: 1
      resources:
        limits:
          cpus: "1.5"
          memory: 1200M
      restart_policy:
        condition: on-failure
    ports:
      - "7080:80"
    networks:
      - xxx

networks:
  xxx:

4.docker容器nginx配置

代理到DOCKERFILE拷贝的 /var/www/html目录中的静态资源

/api/代理到对应的后台接口地址，此项目代理到宿主机的网关地址

server {
    listen 80;
    listen [::]:80;
    charset utf-8;
    root /var/www/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
    location /api/ {
        proxy_pass http://gateway/; 
    }
}

upstream gateway{
    server gateway:9801;
}

5.验证CI

提交代码到gitlab，查看CI状态

6.验证容器nginx,查看日志

查看日志：docker logs -f -t --tail=100 CONTAINER_ID

进入容器：docker ps查看容器，拿到对应容器ID，docker exec -it CONTAINER_ID sh 进入容器，可查看nginx配置等是否正常

5.宿主机nginx配置

1.登录服务器

2.切换到nginx目录

cd /etc/nginx/conf.d
ls
cat test.conf

3.修改配置

vi test.conf 在server中添加 location /域名后缀/{ proxy_pass http://项目名/; } upstream 项目名{ server 127.0.0.1:对应项目容器端口 } ：wq

4.验证配置，重启nginx

nginx -t
nginx -s reload

5.访问页面，查看宿主机nginx日志

cd /var/log/nginx
ls
tail -n 100 error.log

莎莎小公举

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
VUE项目通过gitlab-ci和docker实现持续集成和持续部署

需要对ci，nginx，docker，linux有一定的了解1.部署规范统一采用访问域名后，通过nginx代理到对应docker容器中的静态资源，项目中gitlab-ci.yml,dockerfile,docker-compose.yml,nginx.conf都是具有可移植性的，可通用。2.注意事项1.项目部署在域名目录下vue.config.js文件中publicPath为‘/’,请求api直接代理到对应接口地址2.项目部署在域名二级目录下vue.config.js文件中pub
复制链接

扫一扫