Automatically Deploying Frontend Projects with GitLab CI/CD

Preface

I previously wrote a series of posts on GitLab installation and usage as well as GitLab CI/CD configuration and usage, and I've already set up continuous integration for the AspNetCore backend projects. After tasting the benefits, I now want to add automated deployment for frontend projects as well, so after some tinkering, this article came about~

Previous articles:

• GitLab Installation, Configuration, and Usage
• Continuous Integration Guide: GitLab CI/CD Tool Configuration and Usage

Similar to how I handled the AspNetCore projects before, I still use Docker for deployment, independent of the server environment—just convenient and elegant~

Docker Configuration

This was my first time using Docker to build a frontend project, and I ran into many pitfalls, but I eventually got it working by referring to my previous DjangoStarter project and the AspNetCore Dockerfile~

The idea is two containers: one Node container to compile the project, and another Nginx to serve static files. In other words, after I build the project, I provide the web service directly inside the container, instead of copying it out and putting it into a shared Nginx on the server.

Then I set up forwarding in the server's Nginx, so the experience is the same as before. (Or you can use it directly without forwarding, depending on the actual situation.)

Using Nginx in Docker is better—this shows in aspects such as configuration complexity, permission management, security/audit checks, and the like. I won't elaborate; just use it and you're done~

Dockerfile

FROM node:lts-alpine as build

RUN mkdir /code
WORKDIR /code

ADD package.json /code
RUN npm install --registry=http://registry.npmmirror.com

ADD . /code
RUN npm run build

FROM nginx:alpine as final
LABEL maintainer="DealiAxy <feedback@deali.cn>"

COPY --from=build /code/dist/ /usr/share/nginx/html/

EXPOSE 80

Note that the COPY inside the Nginx container must have the --from parameter set, otherwise it won't be able to read the files built in the node container~

Once done, this Dockerfile is fixed, and you won't need to modify it in the future unless there are special circumstances~

docker-compose.yml

Not much to say. Actually this compose file can be omitted; I just don't want to type docker commands and am being lazy~

version: '3.4'

services:
  web:
    restart: always
    build:
      context: .
    ports:
      - "8080:80"

GitLab CI Configuration

Nothing special

variables:
  GIT_STRATEGY: none
stages:
  - deploy
deploy_job:
  stage: deploy
  only:
    - master
  script:
    - cd /home/gitlab-runner/projects/0_frontend/dashboard-front
    - rm -rf dashboard-front
    - git clone http://127.0.0.1:8080/deali/dashboard-front.git
    - cd dashboard-front
    - docker-compose up --build -d

Summary

All set. The first time I did this I still ran into many pitfalls, but luckily I didn't give up and then solved the problems step by step.

After that, for each project you only need to modify the docker-compose.yml file to specify the exposed port and the .gitlab-ci.yml file to specify the folder to build. Much more convenient than the original manual build and publish.

References

Note: The Dockerfile in this reference article is wrong; please follow this article.

Setting aside the errors, there are still some parts of this reference article that can be useful—please verify them yourself~

• Deploying frontend applications with Docker: https://zhuanlan.zhihu.com/p/102853707