跳到主要内容

推动CI/CD前端工作流

具备CI/CD前端自动化部署工作流能力

  • 前端具备自己的构建部署系统，便于更好的流程控制
  • 减少重复劳动力
  • 更好，更快，更加安全，更加稳定的交付
  • 在CI的过程中可以进行代码质量的自动检测，减少人工检查的劳动力
  • 打包环境一致，不会出现编译后代码异常
  • 减少等待时间

如何通过docker，gitlab 、nginx部署自动化cicd，前端构建流程？​

创建 GitLab 仓库并配置 CI/CD 在 GitLab 上创建一个新的代码仓库，并配置 CI/CD。可以在 .gitlab-ci.yml 文件中定义需要运行的任务，例如构建、测试、打包等。这些任务可以通过 Docker 容器运行。 编写 Dockerfile 编写一个 Dockerfile 文件来创建一个容器映像，其中包括了应用程序的依赖和配置。这个 Dockerfile 应该是可重复的，并且需要安装所需的软件包、设置环境变量和映射端口等。 编写 docker-compose.yml 文件 编写一个 docker-compose.yml 文件来定义应用程序的容器化部署方式，其中包括了 Docker 镜像、容器的端口映射和环境变量等。 编写 Nginx 配置文件 在 Nginx 中创建一个配置文件，定义应用程序的反向代理和负载均衡策略等。 构建并推送 Docker 镜像 使用 Docker 命令构建应用程序的 Docker 镜像，并将其推送到 Docker Hub 或其他 Docker Registry 上。 部署应用程序 使用 docker-compose 命令部署应用程序，将其运行在 Docker 容器中。在 Nginx 中配置反向代理，使应用程序可以通过 Web 界面访问。 设置自动化部署 使用 GitLab 的自动化 CI/CD 流程，在每次代码提交时自动部署新的应用程序版本。在 GitLab 的 CI/CD 配置文件中设置触发自动化部署的条件和方式。

CI/CD如何优化​

参考：https://gist.github.com/banyudu/2c2f97136c77aec44c4b42282d2715d0

优化自动化部署速度​

可能出现问题：

  • 流水线任务时间过长
  • install重复、频繁install存在失败的概率
  • npm源网络差
  • 其他阻塞进程操作
  • 磁盘读写过慢、占用过多问题
  • runner性能跑满，服务器压力过高，导致整体变慢问题

解决：

  • 升级容器配置，如把2核4G升级到4核8G
  • 使用淘宝源，包管理可使用yarn来替代npm
  • 使用gitlab的cache， 实际上并不需要每次都打包
  • 开启npm包缓存，npm cache 主要是缓存了node_modules
    • 提高安装依赖速度

结论：从3分钟的打包时间，最后优化到1分钟内

yml
cache:
  key: your-project-name
  paths:
    - node_modules/