前言

以前开发自己项目的时候，都是手动打包后将文件夹丢进服务器配置nginx部署。一开始觉得也没什么，直到现在进入了一个规模大点的公司后发现，有测试环境，预发环境，线上环境，如果全部要手动构建和部署那就太低效了。进而我学习了公司中的CI/CD,自己搭建了一个项目实现自动化部署。

前端CI、CD介绍

CI/CD是 Continuous Integration 和 Continuous Deployment 的缩写，是一种软件开发流程。

CI/CD的主要思想是通过自动化的工具，把代码从开发环境持续集成到测试环境和生产环境，以实现快速反馈和持续交付。在前端项目中，通常会实现以下步骤：

在代码提交到版本库后，触发自动构建和测试。
通过自动化测试工具检测代码质量，确保代码符合要求。
在代码通过测试后，自动发布到生产环境。

前端的CI/CD可以帮助团队提高代码质量，缩短交付周期，提升团队效率，减少人为错误等。

实现思路

部署 GitLab-CE：首先，你需要将 GitLab-CE 部署在你的服务器上，并配置必要的内容。
安装 GitLab-Runner：安装并配置 GitLab-Runner，这是一个在本地运行 CI/CD 过程的软件。
创建 GitLab 项目：在 GitLab-CE 中创建一个项目，并且在项目的设置中启用 CI/CD。
创建 .gitlab-ci.yml 文件：在你的项目根目录下创建一个 .gitlab-ci.yml 文件，这个文件定义了 CI/CD 的流程。
将代码推送到 GitLab：推送你的代码到 GitLab 项目的仓库中。
触发 GitLab-Runner：GitLab-Runner 将读取 .gitlab-ci.yml 文件，并执行相应的步骤。
进行构建：GitLab-Runner 将执行构建步骤，如编译代码、执行单元测试、生成报告等。
进行部署：GitLab-Runner 将执行部署步骤，如将生成的静态文件发布到生产环境。

具体实现

服务器一定要2核4GB以上的！！！

部署 GitLab-CE

参考从0开始搭建gitLab

先把环境都安装好

yum -y install policycoreutils openssh-server openssh-clients postfix

yum install  policycoreutils-python

systemctl enable sshd && sudo systemctl start sshd

systemctl enable postfix && systemctl start postfix

systemctl stop firewalld.service

安装GitLab-CE

wget --content-disposition https://packages.gitlab.com/gitlab/gitlab-ce/packages/el/7/gitlab-ce-15.2.2-ce.0.el7.x86_64.rpm/download.rpm

yum install -y gitlab-ce-15.2.2-ce.0.el7.x86_64.rpm

修改默认端口

cd /etc/gitlab

vi gitlab.rb

在文件中修改 external_url和nginx['listen_port']的key对应的内容

external_url 'http://114.96.82.2:8280'
 
nginx['listen_port'] = 8280

重启

gitlab-ctl reconfigure

gitlab-ctl restart

访问

http://服务器IP:8280

查看gitlab初始密码

cat /etc/gitlab/initial_root_password

需要及时修改密码，这个密码的有效期只有24小时

到这一步GitLab-CE就已经部署好了

部署 GitLab-Runner

参考 Gitlab CI持续集成 - GitLab Runner 安装与注册

通过命令安装:

curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.rpm.sh | sudo bash

sudo yum install gitlab-ci-multi-runner

gitlab-runner 注册，获取gitlab-ci的token:

项目主页 -> Sttings -> CI/CD -> Runners Expand

gitlab-runner register

输入gitlab的服务URL，这个使用的是gitlab.com/
输入gitlab-ci的Toekn，获取方式参考上图
关于集成服务中对于这个runner的描述
给这个gitlab-runner输入一个标记，这个tag非常重要，在后续的使用过程中需要使用这个tag来指定gitlab-runner
是否运行在没有tag的build上面。在配置gitlab-ci的时候，会有很多job，每个job可以通过tags属性来选择runner。这里为true表示如果job没有配置tags，也执行
是否锁定runner到当前项目
选择执行器，gitlab-runner实现了很多执行器，可用在不同场景中运行构建，详情可见GitLab Runner Executors，这里选用Shell模式

安装nginx部署

yum -y install nginx

/usr/share/nginx/html  //nginx网站默认存放目录

当我们commit后将项目的html文件放到上面的位置，就可以完成自动化部署

创建 .gitlab-ci.yml 文件

在项目目录中创建.gitlab-ci.yml文件

stages: # 分段
  - install
  - eslint
  - build
  - deploy
 
cache: # 缓存
  paths:
    - node_modules
    - build
 
install-job:
  tags:
    - sss
  stage: install
  script:
    - npm install
 
eslint-job:
  tags:
    - sss
  stage: eslint
  script:
    - npm run eslint
 
build-job:
  tags:
    - sss
  stage: build
  script:
    - npm run build
 
deploy-job:
  tags:
    - sss
  stage: deploy
  script:
    - sshpass -p $PASSWORD scp -r ./build $CUSTOM_USERNAME@$CUSTOM_IP:/var/www/html

tag就是gitlab-runner注册时输入的，这是我的配置：

stages: # 分段
  - deploy
 
deploy-job:
  tags:
    - test
  stage: deploy
  script:
    - sshpass -p 密码 scp ./index.html root@IP地址:/usr/share/nginx/html

到这一步，整个项目的自动化部署就已经完成了

每次commit后，就能在服务器nginx监听的对应端口看到项目的修改！！！

END

主管说的想要提高前端深度就要往CI学，花了两天时间，期间不懂Linux命令，每一步都需要上网搜，终于把整个自动化部署跑通了，收获满满！
希望这篇文章可以帮助到有需要的小伙伴们，有问题可以评论或私信我呀🤞🤞

前端CI/CD:利用Gitlab实现前端自动化部署

前言