Lsj

主题

00:00:00
2025-10-03后端docker
1021
4.1m
0

🐳 前端也能轻松上手 Docker：我的实战部署指南 ​

写给和我一样的前端——不用懂运维，也能用 Docker 一键上线静态站。

我一直觉得 Docker 是后端的事，直到自己搭文档站才发现：用 Docker 部署前端项目，其实比想象中简单得多。
不需要复杂的配置，也不用学一堆概念，只要搞懂几行命令，就能实现“本地构建 → 打包镜像 → 上传服务器 → 自动重启”一整套流程。

这篇文章就记录我踩坑后总结出的最简可行方案，适合 VitePress、VuePress、React 静态站点等场景。

🧩 我的目标很简单 ​

  • 本地写文档（VitePress）
  • 构建出 dist 文件
  • 打包成一个 Docker 镜像
  • 传到我的云服务器
  • 自动跑起来，别人能访问

全程不依赖 CI/CD、不配 Jenkins、不 push 到 Docker Hub，就靠一个脚本搞定。

📦 第一步：写一个超简单的 Dockerfile ​

我的项目结构大概是这样：

my-blog/
├── docs/
│   └── .vitepress/dist/   ← 这是构建后的静态文件
├── Dockerfile             ← 新建这个
└── deploy.sh              ← 稍后写

运行完 pnpm run docs:build 后，dist 就生成了。接下来，创建 Dockerfile：

dockerfile
FROM nginx:alpine
COPY docs/.vitepress/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

就这四行！

  • nginx:alpine 是官方最小 Nginx 镜像（20MB 左右）
  • 把本地的 dist 复制进去
  • 启动 Nginx，前台运行（容器才不会退出）

✅ 重点：不在 Docker 里装 Node.js 或 pnpm，构建全在本地完成，镜像又小又干净。

▶️ 第二步：本地测试一下 ​

先试试能不能跑起来：

bash
# 构建镜像（名字叫 my-blog）
docker build -t my-blog .

# 启动容器，把 80 映射到本机 8080
docker run -d --name my-blog -p 8080:80 my-blog

然后打开浏览器访问 http://localhost:8080，如果看到你的文档站，说明成功了！

清理一下：

bash
docker stop my-blog && docker rm my-blog

🚀 第三步：写一个部署脚本（核心！） ​

这才是真正省时间的地方。我在项目根目录新建 deploy.sh：

bash
#!/bin/bash
set -e

echo "🚀 开始部署..."

SERVER="192.168.1.100"     # ← 改成你的服务器 IP
IMAGE="my-blog"
CONTAINER="my-blog"
PORT=8080

# 1. 本地构建 dist
pnpm run docs:build

# 2. 构建镜像
docker build -t "$IMAGE" .

# 3. 导出为 tar 文件
TAR="my-blog.tar"
docker save "$IMAGE" -o "$TAR"

# 4. 上传到服务器
scp "$TAR" "root@$SERVER:/root/apps/my-blog/"

# 5. 在服务器加载并重启容器
ssh "root@$SERVER" "
  mkdir -p /root/apps/my-blog
  docker load -i /root/apps/my-blog/$TAR
  docker stop $CONTAINER 2>/dev/null || true
  docker rm $CONTAINER 2>/dev/null || true
  docker run -d --name $CONTAINER --restart unless-stopped -p $PORT:80 $IMAGE
  rm -f /root/apps/my-blog/$TAR
"

# 6. 清理本地临时文件
rm -f "$TAR"
echo "✅ 部署完成！访问 http://$SERVER:$PORT"

使用前准备 ​

  1. 确保你已配置 SSH 免密登录（否则每次都要输密码）
  2. 在 Git Bash（Windows）或终端（Mac/Linux）里运行：
    bash
    chmod +x deploy.sh

一键部署！ ​

bash
./deploy.sh

几秒钟后，你的新版本就上线了 👏

❓ 常见问题 ​

Q：为什么用 docker save 而不是 docker push？ ​

A：因为我不想配 Docker Registry（比如 Docker Hub）。直接导出 .tar 文件上传，对个人项目更简单。

Q：2>/dev/null || true 是干啥的？ ​

A：防止容器不存在时报错中断脚本。意思是：“停不掉就算了，继续往下走”。

Q：能支持自定义域名或 HTTPS 吗？ ​

A：可以！但那是 Nginx 的事。你可以在服务器上再套一层反向代理（比如用 Caddy 或 Nginx），前端容器只负责提供静态文件。

💡 小结 ​

  • Docker 对前端最大的价值：把“部署环境”打包带走。
  • 不需要复杂多阶段构建，本地 build + COPY dist 最省事。
  • 一个脚本 = 完整上线流程，比手动 scp + ssh 快十倍。

我现在每次更新文档，就两步：

bash
git push
./deploy.sh

然后泡杯咖啡，网站就自动更新了 ☕

这套方案我已经用了半年，稳定可靠。如果你也在维护个人博客、技术文档或静态项目，不妨试试看。
有问题欢迎留言交流！

最近更新