前端静态项目 Docker 部署指南（自动化版）

hauk0101
1,151 阅读7分钟

背景

上一篇手动实现了前端静态项目的 Docker 部署，感兴趣的朋友可以查看文章 前端静态项目 Docker 部署指南(基础版)，想起前两天服务端同学推荐的阿里云效，于是打算利用阿里云效的流水线功能，实现前端静态项目的 Docker 自动化部署。

所谓的自动化即用程序的方式替换人工手动执行命令的过程。可以根据你的个人喜好去选择合适自己的工具，比如 Git 的 Webhooks、Jenkins 甚至是自己写的 Shell 脚本，均可以实现类似的效果，

本次我选择阿里云效主要从两方面考虑：

  • 自己没有接触过，而且可能后面团队会用到，所以先实践一遍踩踩坑。
  • 它提供了一个免费的公共打包服务池，可以为我们省去一台打包服务器的成本（很适合个人项目和小团队项目）。

当然，如果有想了解如何使用 Jenkins 搭建的朋友，可以参考我之前的文章 全栈应用指南 | 图文实战 Linux + Jenkins + Gitee 落地持续集成部署

技术背景

  • 前端项目：UmiJS 脚手架项目
  • 操作系统：阿里云 Alibaba Clound Linux 3.2104 LTS 64
  • 部署方式：Docker 部署
  • CI/CD：阿里云效流水线

tips: 本文不会讲解所使用到的工具和应用的细节和原理

目录

  • 核心原理说明
  • 阿里云效工作流搭建
  • 效果展示
  • 拓展

核心原理说明

本文的案例亮点在于使用了阿里云效和 Docker 容器技术。而自动化部署的核心依旧没有变，跟之前我在实践 Jenkins 部署前端项目时，底层逻辑基本一致。

图1-1.png

基于这个核心，在实际项目我们可以拓展出很多其他流程，比如代码自动推送，自动构建 Docker 镜像，自动启动镜像服务。如果流程更规范，还可以加入一些人工审核、自动化测试、安全审计等等流程。因此当我们理解了核心原理，无论后续遇到什么样的拓展需求，都可以从容面对。

在阿里云效里，下面是我配置完的工作流，你会发现跟上面的步骤几乎一致。

图1-2.png

阿里云效工作流搭建

  • 准备工作

    • 一个阿里云账号，用于授权并开通一个阿里云效的企业（此处不做详细说明，可以自己实操一遍，也可以查看文档）
    • 代码仓库，可以用阿里云效的 Codeup，它也默认支持其他代码管理库（自建 Gitlab、码云、Git、Github、SVN 等等），按照自己实际情况选择即可
    • 一台可以访问的公网服务器

  • 创建一个 Flow ，如果找不到入口，可以直接访问 flow.aliyun.com/，可以选择自己喜欢的模板，也可以选择空模板，具体有什么区别建议看文档，或者自己实际操作一遍

  • 设置流水线源，也就是配置自己的代码库

    • 这里按照提示去做就好了
    • 如果有 Webhooks 的需求，也可以自行配置

  • 添加前端项目构建阶段

    • 选择 Node.js 构建，选择合适自己的 Node 版本

    图2-1.png

    • 配置构建命令，设置构建物上传（此处的上传是传到了云效的公共存储空间）

图2-2.png

  • 新增主机部署流程

    • 配置类型选择主机部署

    • 将自己准备的服务器按文档说明设置好

    • 主机组选择配置好的主机

    • 部署配置（可以按照个人习惯去设置路径和项目名称）

    图2-3.png
  • 完成部署，尝试运行即可。

效果展示

  • 运行示例

图3-1.png

  • 访问示例

图3-2.png

  • 至此我们实现了在基础篇介绍的一样的部署效果。

拓展

  • 关于配置文件，因为本文是前端静态项目 Docker 部署指南(基础版)的升级篇，关于如何创建 Docker 镜像、如何启动 Docker 服务的配置文件跟上一篇内容基本一致，感兴趣的同学可以去看具体配置。
  • 部署脚本 deploy.sh，内容如下（可根据实际情况进行调整）：
container_name="docker-demo"

echo "Docker 部署中..."

docker stop $container_name
docker rm -f $container_name
docker rmi -f $container_name

echo '创建容器并将其启用'

docker build -t $container_name -f /docker-opt/$container_name/app/docker/Dockerfile .
docker-compose -f /docker-opt/$container_name/app/docker/docker-compose.yml up -d

echo '容器部署成功'
  • 如果在部署的过程中遇到任何问题，个人总结的排查步骤：
    • 先看阿里云效工作流的日志中是否有报错
    • 再直接进入服务器手动执行脚本，调整正确后将最终命令放到配置文件或 deploy.sh 中
    • 注意 Shell 脚本执行的目录位置，这个也会导致配置文件中的命令执行有偏差，尤其是涉及到路径相关
    • 多问问 AI 看看是否有所帮助
  • 常见的问题（这是我在部署过程中遇到的问题，分享给大家）
    • 关于 Docker 容器中 Nginx 服务器日志无法正常打印的问题
      • 问题描述：在访问项目中图片，遇到 404 报错，无法正常查看 Docker 容器中默认的日志文件
      • 解决方案：
        • 图片 404 ，首先需要保证 nginx.conf 中有对于文件后缀名做转发，否则如果找不到资源的话，会被默认解析为 text/html
        • 在 Docker 看不到 Nginx 的日志，可以针对 Server 层添加日志路径，如：
        	server {
	    access_log  /var/log/nginx/access-web.log  main;
	    error_log  /var/log/nginx/error-web.log notice
	    listen 80;
	    # 为静态资源（如图片）配置单独的location块
	    location ~* \.(jpg|jpeg|png|gif|ico|svg|mp4)$ {
	       root /usr/share/nginx/html; # 指定静态资源的根目录
	    }
	    ... 其他配置
	  }
    • 关于 Dockerfile 中 COPY 命令抹平了单个层级目录的问题
      • 问题描述：目录 /dist/assets/images/ ，使用了 COPY 的方式想将 /dist/* 的内容复制到镜像的 ./ 目录下，但是实际上镜像里面的目录结构变成了 /dist/images/ ，少了一层 asstes
      • 解决方案：将 COPY ../dist/*  . 改为COPY ../dist/  ./

杂谈

这两天在实践 Docker 部署的技术方案过程中，有两个很深的感受，分享给大家，希望对大家有所帮助：

  • 射人先射马，擒贼先擒王：做任何事，一定要抓住重点，不要被一些枝枝叶叶所干扰，否则很容易影响我们走出第一步。在实践的时候，我也经常会想如何怎么做到最完美，怎么做到最佳实践，于是会凭空想出来一大堆暂时用不到的伪需求，导致自己迟迟不能开始行动。当真正发现自己想要的东西可能是一句话就能说清楚的之后，行动力一下就上来了，而且也明白了那些枝枝叶叶的应用场景，对以后的拓展也有了思路，事情反而变得简单。
  • 纸上得来终觉浅，绝知此事要躬行：不要被陌生的技术所吓倒，觉得需要自己苦练多少年功力才能下手，很多时候我们直接上手干，真实体验一遍，才明白很多东西没有想的那么复杂。

参考文档

浏览知识共享许可协议

知识共享许可协议
本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。

avatar
文章
阅读
粉丝