GitLab CI/CD Guide for Frontend Projects (Mac Environment)

Overview

In daily development, we often manually send the built dist package to the backend for deployment, which is inefficient and error-prone. CI (Continuous Integration) automates this process. This guide shows how to use GitLab CI to implement continuous integration and deployment.

1. Install GitLab Runner

Refer to the official documentation: GitLab Runner Installation Guide

2. Register Runner Locally

Open your GitLab project page and go to Settings → CI/CD, expand the Runners section.
Note the displayed URL and token for registration.

Run the registration command

1	gitlab-runner register

Follow the prompts and enter the following information:

GitLab CI Coordinator URL: https://gitlab.com
GitLab CI Token: xxx (copy from the project)
Tags: my-tag,another-tag (custom tags)
Description: my-runner (custom description)
Executor: shell (recommended on Mac)

After registration, return to the GitLab CI/CD settings page. If the runner status is green, it’s running successfully. If not, start the runner manually:

1	gitlab-runner run

3. Create and Commit `.gitlab-ci.yml`

Save the following content as .gitlab-ci.yml and push it to GitLab:

stages:
  - deploy

deploy_to_test:
  stage: deploy
  script:
    - yarn
    - rm -rf dist/
    - yarn build
    - ls -l -t ./dist/
    - rsync -avz ./dist/ root@xxx.xx.xx.xxx:/dist

This CI script builds the project and uses rsync to deploy the dist folder to a remote server.

4. CI with Docker (Optional)

If you want a more comprehensive CI/CD pipeline using Docker, follow these steps:

1. Install Docker (Mac)

1	brew install --cask docker

2. Pull GitLab Image

1	docker pull drud/gitlab-ce:v0.29.1

3. Create GitLab Container

1	docker run -d -p 8443:443 -p 8090:80 -p 8022:22 --restart always --name gitlab drud/gitlab-ce:v0.29.1

Explanation:

-p 8443:443: map HTTPS port
-p 8090:80: map HTTP port
-p 8022:22: map SSH port
--restart always: auto-restart on crash or reboot
--name gitlab: container named gitlab

Visit:

1	http://localhost:8090/

5. `.gitlab-ci.yml` Example for Docker Mode

variables:
  TEST_NAME: "tips"
  OUT_PORT: "8081"
  IN_PORT: "8081"

stages:
  - deploy

deploy_to_test:
  stage: deploy
  before_script:
    - if [ $(docker ps -aq --filter name=$CI_PROJECT_NAME) ]; then docker rm -f $CI_PROJECT_NAME; fi
  script:
    - docker build -f Dockerfile -t $TEST_NAME:latest .
    - docker run -d -p $OUT_PORT:$IN_PORT --name $TEST_NAME $TEST_NAME:latest

After successful deployment, you can view the build process on the GitLab CI/CD Pipelines page. A new container will be generated under the Containers section. Click the corresponding port to access the deployed page.