前言

随着devops的发展，前端部署变得越来越简单，可控性也越来越高，本文基于docker🐳+nginx+jenkins来实现前端自动化部署流程，具体实现效果为开发人员在本地开发，开发push提交代码到指定分支，😊自动触发jenkins进行持续集成和自动化部署。部署完成后会收到邮件的通知，构建成功后会将打包后的文件上传到服务器，通过nginx反向代理展现页面。构建失败则打印出错误日志。而docker🐳是我们整个部署方案中很重要的一块，由docker构建镜像，保证了环境的统一🐂🍺。

部署目标

• 搭建docker🐳、nginx、jenkins环境
• 配置docker-compose.yaml

搭建环境

本文选用centos7云服务器

docker环境

如果大家对docker、docker-compose有不了解的地方，可以去恶补一下这方面的知识，这边就不详细赘述了。

在安装 docker 之前，我们先来了解一下docker的版本定义，这有利于我们在之后的开发中选择和使用合适的 Docker 版本。对于docker来说,它分为两个系列:

• 社区版(ce)
• 企业版(ee)
  

社区版和企业版的区别无非就是企业版收费，提供额外的服务。

 sudo yum install yum-utils device-mapper-persistent-data lvm2
 sudo yum-config-manager --add-repo \
   https://download.docker.com/linux/centos/docker-ce.repo
 sudo yum install docker-ce
复制代码

不出意外的话 输入docker -v出现图下页面就代表成功了

 sudo systemctl enable docker // 设置开机自启 
 sudo systemctl start docker //  启动docker
 
复制代码

安装docker-compose

一个完整的应用程序，往往都不是一个容器组成的，而是通过容器组成一个容器群。一个容器群的搭建需要执行太多命令，更重要的是需要考虑太多应用和容器间的依赖关系处理，是一波令人头大的操作。docker-compose正是解决多个容器之间管理的问题。

sudo curl -L "https://github.com/docker/compose/releases/download/1.24.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
复制代码

输入命令安装docker-compose，安装完成后提升权限

udo chmod +x /usr/local/bin/docker-compose
复制代码

执行完上面命令后，不出意外输入docker-componse -v显示如下页面

安装jenkins和nginx环境

jenkins和nginx环境从远端docker镜像库拉取

docker pull jenkins/jenkins:lts
docker pull nginx 
复制代码

在这里推荐安装jenkins/jenkins这个镜像，jenkins镜像是docker官方维护的镜像，已经很久没有维护了，jenkins/jenkins是jenkins官方维护的库。更新频率非常的到位。后面跟lts表示长期支持的意思。

编写docker-compose目录

这边的目录结构你可以理解为搭建环境所需要的配置文件和挂载卷等，与搭建一个软件开发项目类似，提倡将 Docker Compose项目的组成内容聚集到一个文件目录中，这样更利于我们进行管理和迁移。目录结构如下👉

+ compose
  - docker-compose.yml  // docker-compose执行文件
+ nginx 
  + conf.d
    - nginx.conf        // nginx配置
+ jenkins
  - jenkins_home       // jenkins挂载卷
+ webserver            
  -static              //存放前端打包后的dist文件
复制代码

为了简单，我这边的目录结构直接放在home下面，当然，你也可以新建一个新的目录。

编写docker-compose.yml

version: '3'

                                  
services:                                      # 集合
  docker_jenkins:
    user: root                                 # 为了避免一些权限问题 在这我使用了root
    restart: always                            # 重启方式
    image: jenkins/jenkins:lts                 # 指定服务所使用的镜像 在这里我选择了 LTS (长期支持)
    container_name: jenkins                    # 容器名称
    ports:                                     # 对外暴露的端口定义
      - 8080:8080
      - 50000:50000
    volumes:                                   # 卷挂载路径
      - /home/jenkins/jenkins_home/:/var/jenkins_home  # 这是我们一开始创建的目录挂载到容器内的jenkins_home目录
      - /var/run/docker.sock:/var/run/docker.sock
      - /usr/bin/docker:/usr/bin/docker                # 这是为了我们可以在容器内使用docker命令
      - /usr/local/bin/docker-compose:/usr/local/bin/docker-compose
  docker_nginx:
    restart: always
    image: nginx
    container_name: nginx
    ports:
      - 8090:80
      - 80:80
      - 433:433
    volumes:
      - /home/nginx/conf.d/:/etc/nginx/conf.d
      - /home/webserver/static/jenkins/dist/:/usr/share/nginx/html
复制代码

编写nginx.conf

server{
  listen  80;
  root /usr/share/nginx/html;
  index index.html index.htm;
}
复制代码

启动docker-compose

回到compose目录下

docker-compose up -d
复制代码

输入docker ps查看容器的情况

安装jenkins插件

在此之前，先准备一个vue-cli生成的vue项目，将项目放到gitlab中。

• jenkins安装必要的插件gitlab、Publish Over SSH、nodejs

jenkins与gitlab集成

生成密钥

• 在服务器中生成ssh密钥（如果已经存在不需要生成）

ssh-keygen -t rsa
复制代码

将生成的私钥 id_rsa添加到jenkins凭据中

新建项目

准备完毕后，开始新建一个任务，选择新建item>freestyle project构建一个自由风格的项目。

源码管理

新建完成后，在源码管理中配置git信息，credentials选择我们刚刚添加的凭证

构建触发器

在构建触发器中选择我们触发构建的时机，你可以选择队友的钩子，比如push代码的时候，Merge Request的时候等。

构建环境

构建环境选择node环境

构建

配置node打包命令，打包完成后将压缩后的dist文件上传到远程服务器上，remote directory是移除static下的文件，这边的webserver目录就是一开始编写的目录里

❤️感谢大家

1.如果文章对你有帮助，请动动你的小手指点个赞👍吧，你的赞是我创作的动力。

2.关注公众号「前端精英」！不定期推送高质量文章哦。