⼀篇⽂章教你搭建⼀个前后端分离（gitlab-cicd+docker+vue+django。。。
说在前⾯
因为和朋友⼀起搭⽹站⽤作技术实现的平台和个⼈博客，所以⾝为⼀个毕业两年的前端，想要完成前端-后端-运维等等⼀整套⽹站流程可以说是任重⽽道远，但是有⽬标才有动⼒，所以当我承担了项⽬运维这块的内容时就开始疯狂的学习，终于经过⼏⼗个视频的讲解和⽆数次百度之后终于搭建了较稳定的前后端分离的⾃动化部署项⽬！
因为前端⾃动化相对⽐较简单，所以我会先⽤前端的⾃动化做例⼦⼀点点讲解，最后再说⼀下docker+django+uwsgi+nginx的后台⾃动化部署是怎么实现的。
建议配合帮助快速理解！
本篇⽂章中⽤到的知识点有：
gitlab
gitlab-cicd
gitlab-runner
vue
django
nginx
uwsgi
如果上⾯有你不知道的没听过的知识点，也不⽤担⼼，本篇⽂章都会作简单介绍！
项⽬整体构架
现在还看不懂上⾯的图？没关系！能看懂多少是多少，我们继续往下说。
初步的构想是代码库⽤的是gitlab的官⽅库，正常的代码管理和git⼀样，前端是再服务器上⽤docker创建⼀个容器，容器⾥⾯⽤nginx做代理运⾏前端项⽬，后端是⽤docker创建⼀个容器，nginx做代理，静态⽂件⾛nginx，动态请求代理到uWSGI，让uWSGI做动态请求的处理。
然后想要实现的是我本地代码上传，对应服务器的项⽬⾃动更新，实现⾃动部署。
docker
因为我这次部署到服务器是基于docker的，所以这⾥简单介绍⼀下docker。
简单来说docker就是可以创建虚拟机的东西，但它创建的虚拟机不是完整的，就是⽤最少的性能搭建⼀个完整的环境，⽐如你要搭建⼀个node环境，那么你只需要运⾏docker run -ti --name=my-node node命令就能进⼊⼀个全新的node环境，它和你当前的主机是隔离的，就相当于运⾏了⼀个只能使⽤node的虚拟机。
docker有三个概念，⼀个叫镜像⼀个叫容器还有⼀个Dockerfile，我们怎么理解呢，我打个⽐⽅：
我们知道winbows的安装⽂件就叫⼀个镜像，我们在⼀台电脑上安装了这个镜像，那么我们就可以通
过windows操作这台电脑，那么我们开机进⼊的系统就相当于⼀个容器，所以得出结论，镜像是不可更改的，只有安装后成了容器，我们才能对它进⾏操作。
那么我们回头再看下docker run -ti --name=my-node node这句指令。
docker run就相当于我们安装windows的操作
-ti就相当于开机，进⼊windows桌⾯
--name=my-node就相当于我们这台windows的名字叫my-node
node就相当于windows的安装⽂件，这⾥docker会从dockerhub的库中获取node这个镜像
那么我们在当前widows进⾏了⼀些操作，⽐如安装了⼏个软件，我现在想重新打包成⼀个镜像给别⼈安装，那么别⼈安装的windows就⾃带了我这⼏个软件。那么在docker中想要实现这个就需要编写⼀个⽂件Dockerfile，这个⽂件会基于某个镜像，执⾏⼀些操作，最后
⽤docker build打包成⼀个新的镜像，然后别⼈就可以⽤docker run去执⾏这个镜像，形成⼀个新的容器。
先简单理解⼀下，想要详细了解docker的我这⾥也有⼀篇可以参考。
gitlab代码库
其实，gitlab是提供了本地代码库的，但是放在服务器上运⾏需要的性能会⽐较⾼，好像是⾄少2核4G，⽽我买的两个服务器都是1核2G，所以就没有部署本地代码库。
因为这块的操作是和git⼀模⼀样的，所以本地代码pull/push到gitlab代码库在这⾥不多做叙述。
gitlab-cicd
什么是CI/CD？
咱们先来看⼀下概念：
CI：持续集成（Continuous Integration）
在源代码变更后⾃动检测、拉取、构建和（在⼤多数情况下）进⾏单元测试的过程。
CD：持续交付（Continuous Delivery）
持续交付（CD）通常是指整个流程链（管道），它⾃动监测源代码变更并通过构建、测试、打包和相关操作运⾏它们以⽣成可部署的版本，基本上没有任何⼈为⼲预。
gitlab的CI/CD
看完概念我们来具体了解⼀下gitlab的CI/CD的实现。
上图是gitlab左侧导航CI/CD的⼆级菜单，这⾥我们主要看两个：
Pipelines
流⽔线，就是说我们每次的代码变更或者其他我们设定的情况下触发的⼀个任务组，这个任务组⾥⾯可能会有多个任务，每个任务都做着不同的事情，如：安装环境，打包，部署等等。
Jobs
顾名思义，这⾥的Jobs就是上⾯所说的任务，⼀个流⽔线下可以有多个任务，这些都取决于我们的需求。
创建CI/CD流⽔线
现在我们知道，每⼀次变更代码后会触发gitlab上我们⾃⼰定义的流⽔线（Pipelines），然后流⽔线中有会有⼀个或者多个任务。那么怎么去创建⼀个流⽔线呢？
创建
⾸先，我们需要在项⽬根⽬录下创建⼀个叫.l的⽂件，如下图所⽰。
编写
这⾥我直接放⼀个已经写好的.l，然后我解读⼀下。
# 这⾥是docker镜像，说明我们的整个流⽔线是在docker的node:alpine容器⾥⾯完成的
# 不懂docker的可以简单理解为我们下⾯的所有任务是在⼀个有node环境的虚拟机⾥完成的
# 这个虚拟机的默认的⽬录就是我们当前的项⽬⾥
image: node:alpine
# 这⾥是我们⾃定义了⼀些流⽔线的阶段
stages:
- install
- build
- deploy
# 因为每个任务中所有操作产⽣的新的⽂件在进⾏到下⼀个任务时都会被清除
# 但有些我们不希望清楚，所以我们⽤到缓存，cache中定义的paths下的⽂件会被缓存到下⼀个任务中
cache:
key: modules-cache
paths:
- node_modules
- dist
# 这⾥是我们的第⼀个任务，它的名字叫job_install，这个名字是可以随便写的，也可以⽤中⽂
job_install:
stage: install # 这⾥代表我们当前的任务处于install阶段
tags:
- vue3 # 这⾥是当前任务的标签，标签是我们后⾯在gitlab-runner中定义的
script:# 每个任务都必须有script，顾名思义就是执⾏的语句
- npm install # 前⾯说的我们处于⼀个有node环境的虚拟机，那这句话就是在这个虚拟机的我们当前项⽬⾥执⾏npm install
# 这是我们的第⼆个任务，逻辑和上⾯的第⼀个任务都⼀样，就不做详细说明
job_build:
stage: build
tags:
- vue3
script:
- npm run build
# 这是我们的第三个任务，因为运⾏到这⾥项⽬的打包已经完成，我们即将⽤docker创建新的容器部署项⽬
job_deploy:
stage: deploy
image: docker # 因为这⾥我们⽤到docker指令所以要把node环境切换到docker
tags:
- vue3
script:
# 这⾥是通过我们项⽬根⽬录下的Dockerfile⽂件创建⼀个新的镜像
# 不懂可以理解成打包成⼀个安装包
- docker build -t rainbow-admin .
# 这⾥是查看当前的服务器上有没有正在运⾏或者存在我们之前运⾏过的项⽬容器，如果有删除了
- if [ $(docker ps -aq --filter name=rainbow-admin-main) ];then docker rm -f rainbow-admin-main;fi
# 这⾥是运⾏我们刚才创建的新的镜像
# 不懂得可以理解成安装我们刚才打包好的安装包，安装过后会把你的项⽬运⾏在nginx⾥⾯，外⽹就可以访问你的项⽬了
- docker run -d -p 80:80 --name=rainbow-admin-main rainbow-admin
上⾯说到了⼀个Dockerfile⽂件，这是docker中创建镜像的⽂件，很简单的⼀个⽂件，我们这边也简单看⼀下。
# 这⾥说明我们的基础镜像是nginx
# 如同上⾯所说，不懂的可以简单理解为我们下⾯的所有任务是在⼀个有nginx环境的虚拟机⾥完成的
FROM nginx
# nginx的默认访问⽬录是/usr/share/nginx/html
# 所以我们只要把打包好的dist复制到对应⽬录下就可以
django admin 自定义页面
COPY dist /usr/share/nginx/html
好了，说到这⾥我们在看⼀下前⾯的项⽬整体框架图，应该是还有个gitlab-runner没有提到，那么我们继续！
其实.l⽂件的编写规则很多还有CI/CD的⼀些其他运⾏⽅式等，我在这篇⾥⾯有展开介绍。
gitlab-runner
我们现在知道，我们在gitlab上的每⼀次代码变更都会触发CI/CD的流⽔线，那么这个流⽔线是在哪⾥执⾏的呢？