在CI/CD中演示前端三种部署方案，镜像部署，服务器部署，OSS部署

客官°小女子只卖身不卖艺 2022-12-03 05:10 229阅读 0赞

这是一次总结。废话不说直接上代码

# .gitlab-ci.yml #

image: node:latest
    
    stages:
      - install
      - code-lint
      - build
      - deploy-test
      - deploy-uat
      - deploy-pro
    
    cache:
      paths:
        - node_modules
    
    install:
      stage: install
      script:
        - npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
        - npm install --registry=http://registry.npm.taobao.org
    
    code-lint:
      stage: code-lint
      script:
        - npm run lint
    
    deploy-test-server:
      stage: deploy-test
      before_script:
        # 如果没有安装 `ssh-agent`,就安装，基于RPM的镜像可以将apt-get替换为yum
        - 'command -v ssh-agent >/dev/null || ( apt-get update -y && apt-get install openssh-client -y )'
        - eval $(ssh-agent -s) # 运行ssh-agent
        - echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add -
    
        # 创建对应的目录并给相应的权限
        - mkdir -p ~/.ssh
        - chmod 700 ~/.ssh
    
        - ssh-keyscan 115.159.52.223 >> ~/.ssh/known_hosts
        - chmod 644 ~/.ssh/known_hosts
      script:
        - npm run build
        - scp -r dist/* root@115.159.52.223:/usr/local/www/hello-vue
    #   only:
    #     - master
      when: manual
    
    deploy-test-oss:
      stage: deploy-test
      script:
        - npm run build
        - wget http://gosspublic.alicdn.com/ossutil/1.6.18/ossutil64
        - chmod 755 ossutil64
        - ./ossutil64 config -e ${endPoint} -i ${accessKeyID} -k ${accessKeySecret} -L CH --loglevel debug -c ~/.ossutilconfig
        - ./ossutil64 -c ~/.ossutilconfig cp -r dist oss://fizz-test/
    #   only:
    #     - master
      when: manual
    
    deploy-uat-server:
      stage: deploy-uat
      before_script:
        # 如果没有安装 `ssh-agent`,就安装，基于RPM的镜像可以将apt-get替换为yum
        - 'command -v ssh-agent >/dev/null || ( apt-get update -y && apt-get install openssh-client -y )'
        - eval $(ssh-agent -s) # 运行ssh-agent
        - echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add -
    
        # 创建对应的目录并给相应的权限
        - mkdir -p ~/.ssh
        - chmod 700 ~/.ssh
    
        - ssh-keyscan 115.159.52.223 >> ~/.ssh/known_hosts
        - chmod 644 ~/.ssh/known_hosts
      script:
        - npm run build
        - scp -r dist/* root@115.159.52.223:/usr/local/www/hello-vue
    #   only:
    #     - master
      when: manual
    
    deploy-uat-oss:
      stage: deploy-uat
      script:
        - npm run build
        - wget http://gosspublic.alicdn.com/ossutil/1.6.18/ossutil64
        - chmod 755 ossutil64
        - ./ossutil64 config -e ${endPoint} -i ${accessKeyID} -k ${accessKeySecret} -L CH --loglevel debug -c ~/.ossutilconfig
        - ./ossutil64 -c ~/.ossutilconfig cp -r dist oss://fizz-uat/
    #   only:
    #     - master
      when: manual
      
    deploy-pro-server:
      stage: deploy-pro
      before_script:
        # 如果没有安装 `ssh-agent`,就安装，基于RPM的镜像可以将apt-get替换为yum
        - 'command -v ssh-agent >/dev/null || ( apt-get update -y && apt-get install openssh-client -y )'
        - eval $(ssh-agent -s) # 运行ssh-agent
        - echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add -
    
        # 创建对应的目录并给相应的权限
        - mkdir -p ~/.ssh
        - chmod 700 ~/.ssh
    
        - ssh-keyscan 115.159.52.223 >> ~/.ssh/known_hosts
        - chmod 644 ~/.ssh/known_hosts
      script:
        - npm run build
        - scp -r dist/* root@115.159.52.223:/usr/local/www/hello-vue
      only:
        - master
      when: manual
    
    deploy-pro-oss:
      stage: deploy-pro
      script:
        - npm run build
        - wget http://gosspublic.alicdn.com/ossutil/1.6.18/ossutil64
        - chmod 755 ossutil64
        - ./ossutil64 config -e ${endPoint} -i ${accessKeyID} -k ${accessKeySecret} -L CH --loglevel debug -c ~/.ossutilconfig
        - ./ossutil64 -c ~/.ossutilconfig cp -r dist oss://fizz-pro/
      only:
        - master
      when: manual
    
    deploy-test-image:
      image: $DOCKER_IMG
      stage: deploy-test
      script:
        - docker login -u $HARBOR_USERNAME -p $HARBOR_PWD $HARBOR_URL # 登录镜像仓库
        - docker build -t $APP_IMAGE_NAME . # 构建镜像
        - docker push $APP_IMAGE_TEST_NAME # 推送镜像
        - docker rmi $APP_IMAGE_TEST_NAME # 删除本地镜像
        # 如果有容器名为$APP_CONTAINER_NAME的容器在运行则强行上删除
        - if [ $(docker ps -aq --filter name=$APP_CONTAINER_TEST_NAME) ]; then docker rm -f $APP_CONTAINER_TEST_NAME; docker image rm -f $APP_IMAGE_TEST_NAME;fi
    
        # 登录镜像仓库
        - docker login -u $HARBOR_USERNAME -p $HARBOR_PWD $HARBOR_URL
    
        # 使用8001端口,镜像名为$APP_CONTAINER_NAME的后台方式 运行一个镜像
        - docker run -d -p 8001:80 --name $APP_CONTAINER_TEST_NAME $APP_IMAGE_TEST_NAME
        - echo 'deploy test websit success 端口：8001'
      when: manual # 手动执行,需要点击
    
    
    deploy-uat-image:
      image: $DOCKER_IMG
      stage: deploy-uat
      script:
        - docker login -u $HARBOR_USERNAME -p $HARBOR_PWD $HARBOR_URL # 登录镜像仓库
        - docker build -t $APP_IMAGE_UAT_NAME . # 构建镜像
        - docker push $APP_IMAGE_UAT_NAME # 推送镜像
        - docker rmi $APP_IMAGE_UAT_NAME # 删除本地镜像
        # 如果有容器名为$APP_CONTAINER_NAME的容器在运行则强行上删除
        - if [ $(docker ps -aq --filter name=$APP_CONTAINER_UAT_NAME) ]; then docker rm -f $APP_CONTAINER_UAT_NAME; docker image rm -f $APP_IMAGE_UAT_NAME;fi
    
        # 登录镜像仓库
        - docker login -u $HARBOR_USERNAME -p $HARBOR_PWD $HARBOR_URL
    
        # 使用8001端口,镜像名为$APP_CONTAINER_NAME的后台方式 运行一个镜像
        - docker run -d -p 8002:80 --name $APP_CONTAINER_UAT_NAME $APP_IMAGE_UAT_NAME
        - echo 'deploy uat websit success 端口:8002'
      when: manual # 手动执行,需要点击
      
    deploy-pro-image:
      image: $DOCKER_IMG
      stage: deploy-pro
      script:
        - docker login -u $HARBOR_USERNAME -p $HARBOR_PWD $HARBOR_URL # 登录镜像仓库
        - docker build -t $APP_IMAGE_PRO_NAME . # 构建镜像
        - docker push $APP_IMAGE_PRO_NAME # 推送镜像
        - docker rmi $APP_IMAGE_PRO_NAME # 删除本地镜像
        # 如果有容器名为$APP_CONTAINER_NAME的容器在运行则强行上删除
        - if [ $(docker ps -aq --filter name=$APP_CONTAINER_PRO_NAME) ]; then docker rm -f $APP_CONTAINER_PRO_NAME; docker image rm -f $APP_IMAGE_PRO_NAME;fi
    
        # 登录镜像仓库
        - docker login -u $HARBOR_USERNAME -p $HARBOR_PWD $HARBOR_URL
    
        # 使用8001端口,镜像名为$APP_CONTAINER_NAME的后台方式 运行一个镜像
        - docker run -d -p 8003:80 --name $APP_CONTAINER_PRO_NAME $APP_IMAGE_PRO_NAME
        - echo 'deploy product websit success 端口:8003'
      when: manual # 手动执行,需要点击

# 效果图 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70]: /images/20221123/5149f37c73ef427692191e842724ab60.png