Hands‑On Guide to Building a GitLab CI/CD Pipeline for Front‑End Projects

CI/CD (Continuous Integration/Continuous Delivery) automates code change detection, packaging, and deployment. This guide walks through a practical setup using GitLab Runner to listen for pushes and execute tasks defined in a .gitlab-ci.yml file.

What is CI/CD

It starts a service that monitors code changes and automatically runs build and release processes.

For a simple static site, you would manually run npm run build, upload the dist folder to a server, and start nginx. CI/CD automates these steps.

gitlab-runner Role

The gitlab-runner tool listens to GitLab events (e.g., code push) and executes the jobs defined in .gitlab-ci.yml. It runs on your own server.

Setting Up GitLab CI/CD

1. Create a GitLab repository

Create a project (e.g., testCI) using vue-cli. In the project settings, go to Settings > CI/CD and expand the Runners section.

2. Create a Runner index

Click “New project runner” to generate a Runner registration token.

3. Install the Runner service

On macOS, install the Runner with:

sudo curl --output /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-darwin-amd64
sudo chmod +x /usr/local/bin/gitlab-runner
cd ~
gitlab-runner install
gitlab-runner start

Verify with gitlab-runner status.

4. Register the Runner

gitlab-runner register --url https://gitlab.example.com/ --registration-token YOUR_TOKEN

Provide the GitLab URL, a name (e.g., test-ci), and select the shell executor.

5. Write the .gitlab-ci.yml file

stages:
  - dev
  - test

test_dev:
  stage: dev
  tags:
    - test
  script:
    - npm i
    - npm run dev

test_test:
  stage: test
  tags:
    - test
  script:
    - echo "Running test..."

This defines two stages (dev and test) and two jobs that run on a Runner with matching tags.

6. Push code to trigger the pipeline

After pushing, the Runner receives the push event, pulls the repository, executes the jobs, and uploads logs to GitLab. The pipeline UI shows the dev stage running and then the test stage.

If a job stays pending, verify that the Runner is reachable and that its tags match the job tags.

Summary

We have successfully:

Set up the GitLab CI/CD environment.

Enabled the server to listen for Git push events.

Executed the jobs defined in .gitlab-ci.yml via the Runner.

Further improvements involve adding more stages (e.g., deploy) and using shell commands or scripts to move built artifacts and start services like nginx.

Workflow Overview

Push code to GitLab.

GitLab sends a push message to the Runner.

The Runner pulls the code and runs jobs from .gitlab-ci.yml.

Job results are uploaded back to GitLab.

If no additional artifacts are defined, the Runner cleans up build outputs.

This demonstration provides a basic CI/CD pipeline for a front‑end project, giving newcomers a clear understanding of the underlying principles.