利用gitlab-ci实现前端流水线。

1.添加.gitlab.yml，Dockerfile，nginx.conf三个配置文件并编写脚本。

.gitlab.yml文件：

stages:
   - build
   - deploy_dev
   - check_dev
   - deploy_test

build:
   when: manual
   stage: build
   image: node:9.4
   cache:
     paths:
       - node_modules/
   script:
     # - npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
     - npm --registry=https://registry.npm.taobao.org install
     - npm run build
     - tag=`date +%Y%m%d`-`echo $CI_BUILD_REF | cut -c 1-8`
     - echo $tag > docker-tag
     - docker build -t 192.168.xxx/web/xxx:$tag .
     - docker login 192.168.xx:xxx -xxx -pHarborxxx
     - docker push 192.168.xx:xx/web/xx:$tag
   artifacts:
     paths:
       - docker-tag
     expire_in: 1 week 
   only:
     - dev  
     - master

deploy_dev: 
   when: manual
   stage: deploy_dev
   image: kroniak/ssh-client:latest
   dependencies:
     - build
   script:
     - tag=`cat docker-tag`
     - echo $tag
     - ssh -p 22 root@192.168.48.5 "cd /root/devops && sed -i '/^portal_web_version=/c'portal_web_version=$tag'' .env && docker-compose -f docker-compose.yaml stop portal-web && docker-compose -f docker-compose.yaml up -d portal-web"
   only:
     - dev  
     - master

deploy_test:
   when: manual
   stage: deploy_test
   image: 192.168.xx.x:xx/library/git-mysql:alpine
   dependencies:
     - build
   script:
     - tag=`cat docker-tag`
     - echo $tag
     - git clone http://192.168.xxx:xxx/yusys_devops/devops_sql.git
     ##- git clone ssh://[e-mail]:xxx/AiDO2.0/aido-sql.git
     - cd devops_sql/devops-deployment/
     - ./deploy_k8s.sh $CI_PROJECT_NAME $tag
   only:
     - master

Dockerfile文件

FROM nginx:1.19.1-alpine

RUN echo "http://mirrors.aliyun.com/alpine/v3.6/main/" > /etc/apk/repositories && \
    apk add --update curl && \
    mkdir /etc/nginx/logs/


ADD dist/ /usr/share/nginx/html
ADD nginx.conf /etc/nginx/nginx.conf
ENV LANG=UTF-8
ENV TZ=Asia/Shanghai
ENV PROJECT_LOCATION=yusys

CMD sed -i s/"window.logoTag = 'yusys'"/"window.logoTag = '$PROJECT_LOCATION'"/g /usr/share/nginx/html/index.html && nginx -g 'daemon off;'

nginx.conf文件：

user    root;
worker_processes    1;

events {
    worker_connections  1024;
       }

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log  /var/log/nginx/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
    keepalive_timeout  65;
    gzip  on;
    gzip_vary on;
    gzip_min_length  1k;
    gzip_buffers     4  8k;
    gzip_comp_level 1;
    gzip_types       text/plain application/x-javascript text/css text/htm application/xml application/javascript text/javascript;
    gzip_http_version 1.1;
    
    client_header_buffer_size 512k;
    large_client_header_buffers 4 512k;
    client_max_body_size 5120m;
    map $http_upgrade $connection_upgrade {
          default upgrade;
          '' close;
    }    
    upstream my_server {
        server portal-gateway:8000;
        keepalive 2000;
    }
    # upstream agent_server {
    #     server agent-server:8023;
    #     keepalive 2000;
    # }

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;
        #access_log  /var/log/nginx/host.access.log  main;

        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }

        location /aiops-api/ {
            proxy_pass http://my_server/;
            proxy_set_header Host $host:$server_port;
        }        

        location /ws/ {
            proxy_pass   http://my_server/;
            proxy_http_version 1.1;
            proxy_read_timeout   3600s;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host $host:$server_port;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        #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;
        }
    }   
    access_log  logs/access.log ;
    error_log logs/error.log error;
}

2.获取前端项目gitlab-runner注册runner的必要信息（URL，token）

3.在服务器安装gitlab-runner，并注册runner。

命令：gitlab-runner register --name="DCV" --url="XXX --token="XXX" --executor="shell"

4.启动runner

命令 ：gitlab-runner.exe start

5.git push之后安装runner的服务器会执行.gitlab.yml中的脚本，进行构建、部署。