Implementing Automated Build and Release with GitLab CI/CD for Frontend Projects

The article introduces how the Huajiao frontend team moved their activity projects from SVN to an internal GitLab platform and adopted GitLab CI/CD to achieve automated building and publishing.

Team Benefits : Release time dropped from an average of 5 minutes to 1.5 minutes, and CI/CD eliminated inconsistencies between local builds and the packaged code deployed online.

Pre‑GitLab CI/CD Workflow : After development, developers performed a local build, submitted the built HTML files, and manually operated the release system through at least eight steps, causing long release times and environment inconsistencies.

Post‑GitLab CI/CD Workflow : Merging a development branch into the release branch triggers the pipeline, which automatically builds and publishes the code without manual intervention.

What is GitLab CI/CD? A pipeline defined in a .gitlab-ci.yml file runs stages such as dependency download, build, and deployment. The pipeline is triggered by code pushes that meet specified conditions.

Pipeline Overview : The pipeline consists of stages (pre_build, build, deploy) executed by a GitLab Runner (Docker, VM, or shell). The runner can be shared, group, or specific.

Setting Up a Project :

Create a new GitLab project.

Configure a Runner (shared runners are often sufficient).

Add a .gitlab-ci.yml file to the repository.

Example .gitlab-ci.yml (excerpt) :

image: registry.huajiao.com/gitlab-ci/node-yarn:v1.4

variables:
  NODE_MODULES_PATH: /runner-cache/frontend/$CI_PROJECT_PATH/$CI_BUILD_REF_NAME/node_modules

stages:
  - pre_build
  - build
  - deploy

pre_build:
  stage: pre_build
  before_script:
    - /bin/bash ./ci/mkdir.sh $NODE_MODULES_PATH
    - ln -s $NODE_MODULES_PATH .
    - cd webpack@next
  script:
    - echo "yarn install"
    - yarn install --network-timeout 60000
  only:
    changes:
      - webpack@next/package.json
    refs:
      - test
      - master

build:
  stage: build
  before_script:
    - /bin/bash ./ci/mkfile.sh $CI_COMMIT_BEFORE_SHA_PATH $CI_COMMIT_BEFORE_SHA_FILE_NAME
    - ln -s $NODE_MODULES_PATH .
    - rm -rf php/share/*
    - cd webpack@next
  script:
    - source $CI_COMMIT_BEFORE_SHA_FILE
    - echo "CI_COMMIT_BEFORE_SHA=$CI_COMMIT_SHA" > $CI_COMMIT_BEFORE_SHA_FILE
    - python3 ../ci/build.py
    - /bin/bash ../ci/commit.sh
  only:
    changes:
      - www_src/**/*
    refs:
      - test
      - master

deploy:
  stage: deploy
  script:
    - mkdir $PROCESS_PATH
    - dplt $CI_PROJECT_DIR/.deploy_test.yml $CI_PROJECT_PATH $CI_PROJECT_DIR/php/ $PROCESS_PATH
    - echo "Deployment finished, check logs at http://new.admin.wolffy.qihoo.net/log?path=$PROCESS_PATH"
  only:
    changes:
      - php/**/*
    refs:
      - test

Runner Usage : The runner executes the jobs defined in the YAML file. Common issues include pending jobs due to missing tags, which can be resolved by adjusting runner settings.

Current Issues and Future Directions :

Lack of automated testing in the CI pipeline.

Remaining differences between local and production environments.

Need for standardized branch naming, commit messages, and code review processes.

References to CI/CD concepts, GitLab documentation, and related tutorials are provided at the end of the article.