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

4,778 阅读4分钟

前言

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

基于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
    

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

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

    2. Enter the registration token: xxx

    3. Enter a description for the runner: test

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

    5. Enter optional maintenance note for the runner: test

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

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

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

      image-20230307102907066

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

    image-20230307103038178

  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查看前端页面啦。

常见错误

参考文档