使用 Docker 构建前端自动化部署流程

2024-06-12 技术笔记 286 阅读

Docker DevOps 前端工程化

前言

在前端项目开发完成后，部署环节往往需要手动完成代码打包、上传服务器、重启服务等一系列操作。这种方式不仅效率低下，还容易因人为疏忽导致线上事故。本文记录了使用 Docker + Nginx 构建前端自动化部署流程的实践过程，希望对同样面临部署痛点的开发者有所帮助。

为什么选择 Docker

Docker 容器化技术能够保证开发、测试、生产环境的一致性，避免"在我机器上能跑"的尴尬局面。对于前端项目而言，Docker 可以帮助我们快速搭建标准化的 Web 服务环境，让部署变得简单可靠。

环境一致性：容器内运行环境完全相同，杜绝环境差异导致的问题
快速部署：镜像构建后可直接在任何支持 Docker 的服务器上运行
资源隔离：不同项目之间互不影响，一个容器出问题不会波及其他服务
便于扩展：结合容器编排工具可轻松实现水平扩展和负载均衡

编写 Dockerfile

首先在项目根目录创建 Dockerfile 文件，选择 Nginx 的稳定版作为基础镜像。将前端构建产物拷贝到 Nginx 的静态文件目录中，同时将自定义的 Nginx 配置文件复制到容器内，以支持前端路由的 History 模式。

FROM nginx:stable-alpine

COPY dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

这里使用了 alpine 版本的 Nginx 镜像，体积更小，构建速度更快。自定义的 nginx.conf 需要配置 try_files 指令，将所有路由请求都指向 index.html，这样前端路由才能正常工作。

配置 CI/CD 流水线

借助 GitHub Actions，我们可以轻松实现代码推送即自动部署。在项目仓库中创建 .github/workflows/deploy.yml 文件，配置触发条件、构建步骤和部署指令。每当代码推送到主分支时，流水线会自动执行以下步骤：安装项目依赖、执行代码打包、构建 Docker 镜像并推送到镜像仓库，最后通过 SSH 连接到服务器执行部署脚本。

name: Deploy
on:
  push:
    branches: [main]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Build image
        run: docker build -t my-app .
      - name: Deploy
        run: |
          docker stop my-app || true
          docker rm my-app || true
          docker run -d -p 80:80 --name my-app my-app

部署到服务器

在服务器上，只需要安装 Docker 环境即可运行我们的镜像。使用 docker-compose 可以更方便地管理多容器应用，配合 Nginx 反向代理还能实现域名绑定和 HTTPS 证书自动续签。整套流程跑通后，开发者只需要专注写代码，推送即可自动上线，大大提升了开发效率。

总结

通过 Docker + CI/CD 的方式，前端部署效率得到了显著提升。从提交代码到线上生效只需几分钟，并且每次部署都是可追溯、可回滚的。对于个人项目或小团队而言，这是一种成本低廉且行之有效的部署方案。后续还可以引入健康检查、灰度发布等进阶实践，让部署流程更加稳健。