三分钟学会 Docker 部署纯前端网站（个人实操记录）
本文记录了在 Mac 本地使用 Docker 将纯前端项目打包并部署的完整过程，供后续参考。
一、环境准备
1. 操作系统与终端
- MacBook Pro（Apple Silicon 芯片）
- 终端工具：iTerm2 + Oh My Zsh（已安装）
2. Docker 安装
确认 Docker 已安装并启动：
docker -v
二、镜像构建
1. 项目拉取
通过 Git 克隆远程前端项目仓库：
git clone xxx
cd xxx
2. 编写 Dockerfile（如项目中已有则跳过）
# 使用官方 Node 镜像作为基础镜像
FROM node:18-alpine
# 设置工作目录
WORKDIR /app
# 拷贝 package.json 和 yarn.lock
COPY package*.json ./
# 安装依赖
RUN npm install
# 拷贝所有项目文件
COPY . .
# 打包构建（如果是 React/Vue 项目）
RUN npm run build
# 使用 nginx 作为服务端
FROM nginx:alpine
COPY --from=0 /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
3. 构建镜像
docker build -t agent-hospital-website:latest20250430 .
构建成功后可通过以下命令查看镜像：
docker images
也可以项目里写一个build脚本直接执行进行构建
#!/bin/bash
set -e
# 镜像名称和标签
IMAGE_NAME="xxxxxx"
IMAGE_TAG="latest20250430"
# 输出信息
echo "🔧 开始构建 Docker 镜像：$IMAGE_NAME:$IMAGE_TAG"
# 执行构建
docker build -t ${IMAGE_NAME}:${IMAGE_TAG} .
echo "✅ Docker 镜像构建完成：${IMAGE_NAME}:${IMAGE_TAG}"
echo "📦 你可以通过以下命令将镜像导出为 tar 包："
echo " docker save -o ${IMAGE_NAME}.tar ${IMAGE_NAME}:${IMAGE_TAG}"
三、本地部署运行
1. 启动容器
将镜像运行在本地 3000 端口：
docker run -d -p 3000:3000 <yourimage>
查看运行状态：
docker ps -a
示例输出：
CONTAINER ID IMAGE ... PORTS
58d984012fxx yourimage ... 0.0.0.0:3000->3000/tcp
2. 访问验证
打开浏览器访问：
<http://localhost:3000>
若页面正常展示，则说明部署成功。
四、补充说明
1. 停止容器
docker stop <容器ID或名称>
2. 查看构建日志（调试用）
docker logs <容器ID>
3. 删除无用镜像或容器
docker image prune -a
# 或
docker rm <容器ID>
docker rmi <镜像ID>
五、总结
本次实操通过 Docker 成功将前端项目打包并运行在本地环境，部署成功后，若需上线到云服务器或远程环境，可基于此镜像进一步推送至 Docker Hub 或私有仓库。
如需将该镜像上线至线上服务器，请参考相关云服务（如阿里云、腾讯云、AWS）Docker 配置说明进行远程部署。
