Nowadays, CI/CD has become a very important improvement tool in the process of front-end development. Through CI/CD, we can quickly and automatically deploy the front-end package to the remote server without manual operations, which greatly improves the efficiency. Let’s see how to use it in the work.

What will be used for automated deployment

Gitlab CI/CD + Ansible

steps

  1. Start by configuring the CI/CD variable on Gitlab

  1. Compile. Gitlab-ci.yml file
  • Initial variables and stage Settings
Variables: FILE_NAME: dist. Tar. gz WITHOUT_SOURCE_MAP_FILE_NAME: dist-without-map.tar.gz # Stages: - build - deploy - dev_deployCopy the code
  • packaging
# add source_map build_with_source_map: stage: build image: node -git submodule update --init # Consider the scenario where the project has submodules. -rm -rf dist && yarn --update-checksums && yarn build-cd dist/ & tar -czvf .. /${FILE_NAME} * && cd-only: variables: - Master artifacts: # Archive Paths: - ${FILE_NAME} tags: -k8s # without source_map build_without_source_map: stage: build image: node - 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: - k8sCopy the code
  • The deployment of
# deploy to test environment dev_deploy: stage: dev_deploy image: ansible - 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 # Deploy to the production environment prod_deploy: stage: deploy image: ansible image address script: - echo "deploy af" - wget https://xxx/upload.pl - perl upload.pl only: - tags dependencies: - build_with_source_map - build_without_source_map tags: - k8sCopy the code
  1. Ansible. yml file written
- 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 }}"Copy the code