使用 Docker 部署前端项目：Vue 和 React 结合 Nginx 实现静态文件托管

使用 Docker 部署前端项目：Vue 和 React 结合 Nginx 实现静态文件托管

Web 开发中，将前端项目（例如 Vue 或 React 应用）打包后通过 Docker 容器和 Nginx 部署是非常常见的方式。它不仅简化了部署流程，还能确保在不同环境中一致的运行效果。本文将介绍如何使用 Docker 将打包生成的 dist 文件夹结合 Nginx 来实现前端项目的静态文件托管与访问。

---

1. 前端项目的构建

首先，确保已经完成前端项目的开发，并生成一个包含静态文件的 dist 文件夹。以 Vue 和 React 项目为例，可以通过以下命令完成项目的构建：

# Vue 项目
npm run build

# React 项目
npm run build

上述命令会将项目打包，并在项目的根目录下生成一个 dist 或 build 文件夹（React 默认生成 build 文件夹，Vue 默认生成 dist 文件夹）。这个文