前言：现如今CI/CD已经成为前端开发过程中很重要的提效工具，通过CI/CD可以快速、自动化的帮助我们部署前端包到远程服务器，无需手动的进行一系列操作，大大提升了效率，下面我们来看下具体在工作中是怎么使用的。

自动化部署会用到什么

Gitlab CI/CD + Ansible

步骤

首先在Gitlab上配置CI/CD变量

编写.gitlab-ci.yml文件

初始变量以及阶段设置

variables:
  FILE_NAME: dist.tar.gz
  WITHOUT_SOURCE_MAP_FILE_NAME: dist-without-map.tar.gz

# 阶段
stages:
  - build
  - deploy
  - dev_deploy

打包

# 带上source_map
build_with_source_map:
  stage: build
  image: node镜像地址
  script:
    - git submodule update --init # 考虑项目有子模块的场景
    - rm -rf dist && yarn --update-checksums && yarn build
    - cd dist/ && tar -czvf ../${FILE_NAME} * && cd -
  only:
    variables:
      - master
  artifacts: # 存档
    paths:
      - ${FILE_NAME}
  tags:
    - k8s

# 不带source_map
build_without_source_map:
  stage: build
  image: node镜像地址
  script:
    - git submodule update --init
    - rm -rf dist && yarn --update-checksums && yarn build --no-source-map
    - cd dist/ && tar -czvf ../${WITHOUT_SOURCE_MAP_FILE_NAME} * && cd -
  artifacts:
    paths:
      - ${WITHOUT_SOURCE_MAP_FILE_NAME}
  allow_failure: true
  only:
    variables:
      - master
  tags:
    - k8s

部署

# 部署到测试环境
dev_deploy:
  stage: dev_deploy
  image: ansible镜像地址
  script: 
    - echo \"${HOST}\" ansible_ssh_user=${USER} ansible_ssh_pass=${PASS} ansible_ssh_host=${HOST} > hosts
    - echo ansible-playbook ansible.yaml -e hosts=${HOST} -i ./hosts
    - ansible-playbook ansible.yaml -e "HOST=${HOST}  DEST_PATH=${DEV_ROOT_PATH}/${CI_PROJECT_NAME} ROOT_PATH=${DEV_ROOT_PATH} FILE_NAME=${FILE_NAME}" -i ./hosts
    - rm -f hosts
  only:
    variables:
      - master
  except:
    variables:
      - $DEV_ROOT_PATH == null
  dependencies:
    - build_with_source_map
  tags:
    - k8s

# 部署到生产环境
prod_deploy:
  stage: deploy
  image: ansible镜像地址
  script:
    - echo "deploy af"
    - wget https://xxx/upload.pl
    - perl upload.pl
  only:
    - tags
  dependencies:
    - build_with_source_map
    - build_without_source_map
  tags:
    - k8s

ansible.yml文件编写

# 删除DEST_PATH文件夹，在ROOT_PATH解压FILE_NAME压缩文件

- name: deploy
  hosts: "{{ HOST }}"
  become_user: root
  become: yes
  tasks:
    - name: delete dir
      file:
        path: "{{ DEST_PATH }}"
        state: absent
    - file:
        path: "{{ DEST_PATH }}"
        state: directory
        recurse: yes
    - name: unarchive file
      unarchive:
        src: "{{ FILE_NAME }}"
        dest: "{{ ROOT_PATH }}"

CI/CD自动化部署前端应用

自动化部署会用到什么

步骤