前端CI、CD环境搭建

一、背景&意义

背景：

随着互联网和移动应用的普及，用户对产品质量和交付速度的要求越来越高。传统的手动部署方式已经无法满足快速迭代和交付的需求。因此，前端团队需要引入自动化工具和流程来加速开发周期，降低发布风险，提高产品质量。

意义：

1. 提高交付速度：通过自动化构建、部署流程，可以缩短开发周期，快速响应市场需求，提高产品交付速度。
2. 提升团队效率：CI、CD可以减少重复性工作，提高团队协作效率，让团队成员集中精力于创造性的工作。
3. 改善用户体验：快速迭代和发布可以让用户更快地体验到新功能和改进，提升用户满意度。

因此，搭建前端CICD系统不仅是提高团队效率和产品质量的必要手段，也是适应快速变化的市场环境，保持竞争力的重要举措。

二、搭建步骤

  以下步骤基于gitlab-runner方式

1.   宿主机通过docker方式安装gitlab-runner

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

  注意：

  这里我们把配置文件挂载到了/srv/gitlab-runner/config目录下，为了兼容docker里运行docker的情况我们还需做如下配置

    在/srv/gitlab-runner/config目录下编辑config.toml文件（注：此配置需在register注册后编辑）

[runners.docker]
        # 在这里补充上"/usr/bin/docker:/usr/bin/docker","/var/run/docker.sock:/var/run/docker.sock"
        volumes = ["/cache","/usr/bin/docker:/usr/bin/docker","/var/run/docker.sock:/var/run/docker.sock"]

2.   Gitlab项目新建项目runner

1. 进入项目打开左侧设置页面
2. 进入CI/CD配置页面
3. 进入Runner管理界面
4. 创建项目Runner
5. 记录token和项目url

3.   注册Gitlab-runnercd

   docker exec -it gitlab-runner gitlab-runner register
   

   1. 注册代码执行后按提示填写默认配置信息即可，执行器选择docker

4.   编写.gitlab-ci.yml文件

   # 默认基础镜像
   image: $NODE_CONTAINER_NAME
   
   stages:
     - install
     - build
     - docker
     - deploy
   
   cache:
     key:
       files:
         - package.json
     paths:
       - node_modules
       - dist
       - nginx
   
   Installing:
     stage: install
     tags:
       - $RUNNER_TAG
     before_script:
       - npm config set registry $NPM_MIRROR
     script:
       - pnpm install
   
   Building:
     stage: build
     tags:
       - $RUNNER_TAG
     script:
       - pnpm build
   
   Dockerizing:
     stage: docker
     image: $DOCKER_CONTAINER_NAME
     tags:
       - $RUNNER_TAG
     script:
       # 将分支名称中斜杠替换为短横线以用于 Docker 标签
       - export SANITIZED_TAG=$(echo $CI_COMMIT_REF_NAME | tr '/' '-')
       # 构建镜像
       - docker build -t $CONTAINER_NAME:$SANITIZED_TAG .
       # 删除已存在的容器
       - if [ $(docker ps -aq --filter name=$CONTAINER_NAME) ];then docker rm -f $CONTAINER_NAME;fi
       # 登录到harbor
       - docker login -u $HARBOR_USERNAME -p $HARBOR_PASSWORD $HARBOR_IP || exit 1
       # 重命名符合harbor格式镜像名
       - docker tag $CONTAINER_NAME:$SANITIZED_TAG $HARBOR_TAG_PREFIX/$CONTAINER_NAME:$SANITIZED_TAG
       # 推送镜像到harbor
       - docker push $HARBOR_TAG_PREFIX/$CONTAINER_NAME:$SANITIZED_TAG
   
   Deploying:
     stage: deploy
     image: $DOCKER_CONTAINER_NAME
     tags:
       - $RUNNER_TAG
     script:
       # 部署到k8s集群
       - bash deploy/deploy.sh
   

5.   编写Dockerfile文件

   FROM nginx:latest
   
   COPY dist /usr/share/nginx/html