Docker+Jenkins自动化发布前端到远程服务器（二）

FrankD109829
261 阅读5分钟

image.png

回顾上一篇，我们通过参数化配置Jenkins，已经实现能够将前端项目打包，并通过Docker构建为.tar文件，接下来将会通过SSH Server将.tar文件发送到目标服务器的指定目录，在目标服务器用Docker加载.tar文件，并且自动启动。

归档文件

在增加构建后操作步骤 选择 Archive the artifacts，输入归档文件的名称，我这里是用的变量，其中的${ImageName}、${Date}、${Framework}都是我定义的参数变量。

image.png

如果配置了归档，那么在构建完成之后，可以通过文件链接进行下载。我们这样做有两个目的：

  1. 考虑需要离线部署的项目,运维人员仍然可以通过Jenkins统一构建后下载离线部署包；
  2. 保证构建环境的一致性，防止有的项目是开发手动构建，有的项目是Jenkins构建；

image.png

SSH发送构建结果

在增加构建后操作步骤 选择 Send build artifacts over SSH, 配置构建后的结果发送到哪个目标服务器。

  • 选择目标服务器，这里的SSH Server Name的列表需要先通过Publish Over SSH插件在全局配置中添加才能选择；
  • 勾选Verbose output in console可以详细显示SSH执行过程中的输出，方便排查问题所在
  • 勾选并设置Label是为了后面的参数化发布**Parameterized publishing**设置，即通过匹配Label来发送到不同的服务器
  • 在Transfers中配置发送文件的相关参数,下图中的.tar文件也就是我们前面最终构建完成的结果文件
  • 配置发送到目标服务器的远程目录: 这里要注意，在Publish Over SSH插件全局新增SSH Server时会配置一个基础目录，这里的目录是在基础目录下；例如配置的基础目录是/home，这里的目录配置的是/images,那最终文件发送到目标服务器的目录就是/home/images;
  • 执行Shell脚本: 备份原来镜像，加载镜像，启动镜像；脚本里面兼容了docker-compose启动的方式

image.png image.png

以上配置完成后，再进行构建时基本就能够实现不同服务器的远程部署。

额外扩展

怎样让前端项目支持Docker构建?

  • 在项目的根目录下新建Dockfile文件, 根据自己项目的实际情况配置

    # 基于Nignx镜像构建
FROM nginx
# 设置工作目录
WORKDIR /usr/app/
# 拷贝项目中的nginx配置到镜像中
COPY ./docker/nginx.conf /etc/nginx/nginx.conf
# 拷贝打包后的dist文件夹到镜像中
COPY ./dist /usr/nginx/html/
# 对外暴露端口
EXPOSE 80
# 让Nginx在后台持续运行
CMD ["nginx", "-g", "daemon off;"]

  • 为了项目结构清晰，可以在项目根目录下新建docker目录，用于存放跟docker构建相关的配置，如 nginx.conf、docker-compose.yml等

    # docker-compose.yml 示例
version: '3'
services:
  WebService:
    image: 'test:latest'
    container_name: 'test'
    environment:
      - TZ=Asia/Shanghai
    volumes:
       #为了方便修改配置，注意这里将nginx配置挂载
      - ./nginx.conf:/etc/nginx/nginx.conf
    privileged: true
    ports:
      - '8080:80'
    restart: always
    logging:
      driver: 'json-file'
      options:
        max-size: '20m'
        max-file: '3'

怎样让部署后直接用docker-compose来启动容器呢?

上面已经提到了可以在项目目录下存放docker配置的相关文件，既然能通过SSH Server将我们打包后的dist文件发送到目标服务器，那同样也能将Docker的配置发送到服务器。因此我们可以继续配置要发送的文件：

image.png

注意上面的docker.tar文件是将项目根目录下的docker相关配置进行压缩,从而发送到目标服务器。如果你看过之前的第一篇文章应该能发现，在执行shell脚本中有一段代码, 其目的就是为了将项目根目录docker文件夹下的所有文件，如nginx.conf，以及要挂载的其他文件，压缩为docker.tar。

# 压缩docker容器挂载文件
cd ./docker
cp -r ../public/volumes/* ./
tar -zcvf ../docker.tar ./*

# 项目部分目录结构示例
|-- 📁docker docker 容器目录
| |-- docker-compose.yml compose配置文件
| |-- nginx.conf nginx 配置文件
|-- 📁 public
|-- 📁 src
|-- 📁 typings
|-- 📄 Dockerfile 构建 Docker 镜像配置文件
|-- 📄 tsconfig.json

没有Jenkins,但是我仍然想要尝试使用Docker构建前端项目？

在没有Jenkins的情况下，我们依然可以改造前端项目让其支持本地Docker构建。首先，需要本地需要安装Docker Desktop软件，安装了该软件才能支持运行Docker相关命令，本地进行Docker构建时，必须启动该软件；其次，可以改造package.json，添加几个自定义脚本

# 示例如下
"scripts": {
    # 构建本地镜像
    "docker:build": "docker build -f Dockerfile -t myregistry.com/myrepo/myimage:mytag .",
    # 构建本地镜像并推送到远程仓库
    "docker:push": "npm run build && npm run docker:build && docker push docker push myregistry.com/myrepo/myimage:mytag"
}

结尾

上面虽然介绍了使用Jenkins的各种插件来帮助我们进行自动化构建，如果你有兴趣仍然可以寻求更便捷、简单的方式。作为开发人员，我们应当勇于突破自我设定的界限，不断拓宽视野，积极探索并实践那些能够优化我们个人及团队开发流程的新方法与技术，每一次对更高效开发流程的追求，都是对自我能力的一次飞跃，也是为团队注入活力、共同迈向成功的重要一步。

avatar
文章
阅读
粉丝