基于Docker + Nginx + Gitlab-runner 构建前端CI/CD

前言

本篇会用到Docker，Gitlab-runner等相关工具，如果对其不是特别了解，可以参考之前写的两篇文章：

• 手把手构建前端CI/CD：Gitlab-runner入门使用
• 手把手构建前端CI/CD：Docker 入门使用

基于Nginx 裸机部署前端项目

在早期部署前端项目时，我们通常会通过ftp把前端代码直接传输到指定的物理机上，或者通过ssh登陆到指定的物理机上，然后拉取指定仓库的前端代码，然后再在该物理机上通过nginx起一个服务，然后执行我们的前端代码，这样就算部署成功啦，

这就是早期的裸机部署，这里就是不额外展开说啦。

基于Docker+Nginx部署前端项目

1. 创建vue项目

   vue create front-devops-demo
   cd front-devops-demo
   npm install
   npm run build //此时生成了dist目录
   

2. 创建nginx.conf

   server {
       listen       80;
       server_name  www.xxx.com;
       
       #charset koi8-r;
       access_log  /var/log/nginx/host.access.log  main;
       error_log  /var/log/nginx/error.log  error;
   ​
       location / {
           root   /usr/share/nginx/html; 
           index  index.html index.htm;
           # try_files $uri $uri/ /index.html =404;
       }
   ​
       error_page   500 502 503 504  /50x.html;
       location = /50x.html {
           root   html;
       }
   }
   ​
   

3. 创建Dockerfile文件

   # build stage
   FROM node:14.15.0 as build-stage
   ​
   WORKDIR /app
   ​
   COPY . /app
   ​
   RUN npm install && npm run build
   ​
   # production stage
   FROM nginx:latest as production-stage
   ​
   COPY --from=build-stage /app/dist /usr/share/nginx/html
   ​
   COPY --from=build-stage /app/nginx.conf /etc/nginx/conf.d/default.conf
   ​
   EXPOSE 80
   ​
   CMD ["nginx", "-g", "daemon off;"]
   

4. 创建镜像

   docker image build -t front-devops-demo-image .      
   

5. 创建容器

   docker container run -d -p 9000:80 --name front-devops-demo-container front-devops-demo-image
   

6. 访问页面 http://localhost:9000此时，就可以看到前端页面。

基于 Docker+Nginx+Gitlab-runner 部署前端项目

上面基于Docker + Nginx，每次都需要我们自己手动去创建docker镜像和容器，这一步也可以交给Gitlab-runner CI/CD来解决。

因此，在实际开发中，基于Docker + Nginx + Gitlab-runner 就可以比较好的实现前端项目的部署

接下来，我们一步一步完整的去实现整个流程：

1. docker拉取gitlab/gitlab-runner镜像

   docker pull gitlab/gitlab-runner:latest
   

2. 创建gitlab-runner容器

   docker run -d --name gitlab-runner 
     --restart always 
     -v /var/run/docker.sock:/var/run/docker.sock 
     gitlab/gitlab-runner:latest
   

   注意：此处必须指定 -v /var/run/docker.sock:/var/run/docker.sock否则运行CI的时候，会提示以下错误：

3. 然后进入gitlab-runner容器，为我们的项目注册runner

   // 进入runner容器
   docker exec -it [runner容器ID] /bin/bash
   // 执行注册命令
   gitlab-runner register
   

   然后就会有以下自定义选项需要我们手动输入：

   0. Enter the GitLab instance URL (for example, gitlab.com/): gitlab.com/

   1. Enter the registration token: xxx

   2. Enter a description for the runner: test

   3. Enter tags for the runner (comma-separated): test

   4. Enter optional maintenance note for the runner: test

   5. Enter an executor: ssh, virtualbox, docker-ssh+machine, instance, parallels, shell, docker-ssh, docker+machine, kubernetes, custom, docker: docker

   6. Enter the default Docker image (for example, ruby:2.7): alpine:latest

   7. 注册成功以后，就会在我们的项目中看到一个正在运行的 runner

      

      同时，要注意：以下选项默认不会勾选，我们要手动勾选上，否则代码提交以后，CI一直处于pedding状态，不会运行。

   

4. Gitlab-runner在项目中注册成功以后，我们提交代码就可以自动触发CI/CD啦，当然，还有个前提是需要创建.gitlab-ci.yml用于指定CI/CD的具体工作。例如：前端通常要定义以下几种任务：

   image: node:16.13.2-slim
   ​
   stages:
     - init
     - build
     - deploy
   ​
   cache:
     key: ${CI_BUILD_REF_NAME}
     paths:
     - node_modules/
     - dist/
   ​
   #定义一个叫init的Job任务
   init:
     stage: init
     script:
     -  npm install
   ​
   build:
     stage: build
     script:
     -  npm run build
   ​
   deploy:
     image: docker
     stage: deploy
     script:
     - docker build -t front-devops-demo-image .
     - if [ $(docker ps -aq --filter name=front-devops-demo-container) ]; then docker rm -f front-devops-demo-container;fi
     - docker run -d -p 9000:80 --name front-devops-demo-container front-devops-demo-image
     only:
     - main
   

5. 创建Dockerfile文件

    FROM nginx:latest
   
    COPY /dist /usr/share/nginx/html
   
    COPY /nginx.conf /etc/nginx/conf.d/default.conf
   
    EXPOSE 80
   
    CMD ["nginx", "-g", "daemon off;"]
   
   

6. 创建nginx.conf文件

    server {
        listen       80;
        server_name  www.xxx.com;
   
        #charset koi8-r;
        access_log  /var/log/nginx/host.access.log  main;
        error_log  /var/log/nginx/error.log  error;
   
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            # try_files $uri $uri/ /index.html =404;
        }
   
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
   

7. 至此，准备工作就完成啦，然后我们修改一点代码，然后提交到git仓库，此时就会自动触发CI/CD任务。然后流水线执行完成以后，就可以直接访问localhost:9000查看前端页面啦。

常见错误

• This job is stuck, because the project doesn't have any runners online assigned to it.

参考文档

• blog.csdn.net/weixin_4203…
• juejin.cn/post/684490…
• DockerFile详解&实战
• Docker 是怎么实现的？前端怎么用 Docker 做部署？
• 基于 Docker ( Gitlab、Gitlab Runner ) 搭建一整套自动化CI、CD流程，完成从代码提交到自动打包编译到自动部署运行
• 【前端Docker部署实战】Docker镜像+Nginx配置部署 Vue 项目