Demonstrate three front-end deployment schemes in CI/CD, image deployment, server deployment, OSS deployment

This is a summary. Cut the crap and go straight to the code

.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/* [email protected]:/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/* [email protected]:/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/* [email protected]:/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 # 手动执行,需要点击



Copy the code

rendering