10分钟教你自动化部署前端项目

·  阅读 8022
10分钟教你自动化部署前端项目

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

前言

Hello 大家好! 我是前端 无名

背景

前几年,作为小白的我,只需要安安心心写前端代码就行,前端代码部署的事情直接交给运维人员去部署,部署到哪台服务器,这些都不需要我们关心。

突然,运维人员离职了,没办法,业务需要又起了一个项目,没有运维人员的我们只能每次本地编译完毕,然后手动同步到服务器目录,累成个狗了!累就要想办法解决。

GitLab CI

我们的项目中经常有一个.yml文件,有很多人不知道这个文件是干什么用的。

GitLab CI/CD(后简称 GitLab CI)是一套基于 GitLab 的 CI/CD 系统,可以让开发人员通过 .gitlab-ci.yml 在项目中配置 CI/CD 流程,在提交后,系统可以自动/手动地执行任务,完成 CI/CD 操作。

说的通俗一点,就是这个yml文件的作用是我们提交代码到GitLab以后,GitLab CI会自动读取yml文件中的内容,进行对应的操作。gitlab只是代码仓库,想要实现CI/CD,我们需要安装gitlab-runner。gitlab-runner相当于任务执行器。

下载安装

例如我们在测试服务器(9.138)上安装git-runner

首先我们下载安装git-runner

# 下载 
sudo curl -L --output /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-amd64 
# 给予执行权限 
sudo chmod +x /usr/local/bin/gitlab-runner
# 创建一个CI用户
sudo useradd --comment 'GitLab Runner' --create-home gitlab-runner --shell /bin/bash 
# 安装并且运行服务
sudo gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner
sudo gitlab-runner start
复制代码

注册runner

image.png

gitLab查看runner

image.png

使用注册好的runner

编写.gitlab-ci.yml文件,先了解一些基本概念

1. Pipeline

一次 Pipeline 其实相当于一次构建任务,里面可以包含多个流程,如安装依赖、运行测试、编译、部署测试服务器、部署生产服务器等流程。 任何提交或者 Merge Request 的合并都可以触发 Pipeline,如下图所示:

image.png

2. Stages

Stages 表示构建阶段,说白了就是上面提到的流程。 我们可以在一次 Pipeline 中定义多个 Stages,这些 Stages 会有以下特点:

  • 所有 Stages 会按照顺序运行,即当一个 Stage 完成后,下一个 Stage 才会开始
  • 只有当所有 Stages 完成后,该构建任务 (Pipeline) 才会成功
  • 如果任何一个 Stage 失败,那么后面的 Stages 不会执行,该构建任务 (Pipeline) 失败

因此,Stages 和 Pipeline 的关系就是:

image.png

2. Jobs

Jobs 表示构建工作,表示某个 Stage 里面执行的工作。 我们可以在 Stages 里面定义多个 Jobs,这些 Jobs 会有以下特点:

  • 相同 Stage 中的 Jobs 会并行执行
  • 相同 Stage 中的 Jobs 都执行成功时,该 Stage 才会成功
  • 如果任何一个 Job 失败,那么该 Stage 失败,即该构建任务 (Pipeline) 失败

所以,Jobs 和 Stage 的关系图就是:

image.png

下面我们来写一个简单的.gitlab-ci.yml

image.png

注意

安装git-runner的服务器需要安装git,不然你可能看到一下错误:

image.png

后语

欢迎大家多提意见。项目模板在不断优化,一赞一回!欢迎评论。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改