One

主题

2025-08-162025-08-19博客搭建Teek
1039
4.8m
0

teek-docker部署-宿主机构建好dist数据 ​

teek-docker部署-宿主机构建好dist数据 ​

需求 ​

bash
https://github.com/Kele-Bingtang/vitepress-theme-teek Teek是一个基于VitePress二开的（文档库和博客 二合一）主题，利用pnpm工具打包。

目前我已经在宿主机利用pnpm打包好了dist数据，其路径为/root/teek/dist

请问如何基于这个dist静态数据 利用docker来把这个博客跑起来？

回答 ​

以下是基于已有 dist 目录部署 VitePress 博客到 Docker 的完整方案：

1. 极简部署方案（适合快速启动） ​

bash
# 直接挂载宿主机dist目录到Nginx容器
docker run -d -p 8080:80 \
  -v /root/teek/dist:/usr/share/nginx/html \
  --name teek-blog \
  nginx:alpine

验证访问：http://服务器IP:8080
特点：

  • 实时同步宿主机文件改动（无需重启容器）
  • 适合开发调试阶段

2. 生产环境推荐方案（构建独立镜像） ​

步骤1：创建 Dockerfile ​

dockerfile
# /root/teek/Dockerfile
FROM nginx:alpine

# 删除默认欢迎页
RUN rm -rf /usr/share/nginx/html/*

# 复制打包好的静态文件
COPY ./dist /usr/share/nginx/html

# 自定义nginx配置（可选）
COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf

# 设置权限（解决403问题）
RUN chown -R nginx:nginx /usr/share/nginx/html

步骤2：（可选）自定义Nginx配置 ​

nginx
# /root/teek/nginx-custom.conf
server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html;
        try_files $uri $uri/ /index.html; # 支持Vue Router history模式
    }

    # 自定义错误页
    error_page   500 502 503 504  /50x.html;
}

步骤3：构建并运行 ​

bash
cd /root/teek

# 构建镜像
docker build -t teek-blog .

# 运行容器（后台模式 + 开机自启）
docker run -d \
  -p 80:80 \
  --name teek-blog \
  --restart unless-stopped \
  teek-blog

3. 高级优化方案 ​

3.1 多阶段构建（适合CI/CD流水线） ​

dockerfile
# 阶段1：使用Node构建
FROM node:18 as builder
WORKDIR /app
COPY . .
RUN corepack enable && pnpm install && pnpm docs:build

# 阶段2：仅保留静态文件
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx-custom.conf /etc/nginx/conf.d/default.conf

3.2 添加健康检查 ​

dockerfile
HEALTHCHECK --interval=30s --timeout=3s \
  CMD curl -f http://localhost/ || exit 1

关键问题解决方案 ​

问题现象解决方法
访问出现404确保Nginx配置包含 try_files $uri $uri/ /index.html
403 Forbidden在Dockerfile中添加 chown -R nginx:nginx /usr/share/nginx/html
CSS/JS加载路径错误检查VitePress配置中 base 是否设置为Docker部署的子路径（如 /blog/）
中文乱码在Nginx配置中添加 charset utf-8;

验证部署 ​

  1. 检查容器状态：
    bash
    docker ps -a | grep teek-blog
  2. 查看实时日志：
    bash
    docker logs -f teek-blog
  3. 进入容器调试：
    bash
    docker exec -it teek-blog sh

性能优化建议 ​

  1. 开启Nginx gzip压缩：
    nginx
    gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
  2. 添加缓存控制头：
    nginx
    location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    expires 1y;
    add_header Cache-Control "public";
}

完整目录结构示例 ​

/root/teek/
├── dist/                  # 已打包的静态文件
├── Dockerfile             # 镜像构建文件
├── nginx-custom.conf      # 自定义Nginx配置
└── .dockerignore          # 忽略文件（可选）

按上述步骤操作后，您的Teek博客将在Docker中稳定运行。如需HTTPS支持，可参考Nginx的SSL证书配置方案。

🍊 ​

自己配置 ​

步骤1：创建 Dockerfile

dockerfile
# /root/teek/Dockerfile
FROM nginx:alpine

# 删除默认欢迎页
RUN rm -rf /usr/share/nginx/html/*

# 复制打包好的静态文件
COPY ./dist /usr/share/nginx/html

# 自定义nginx配置（可选）
COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf

# 设置权限（解决403问题）
RUN chown -R nginx:nginx /usr/share/nginx/html

步骤2：（可选）自定义Nginx配置

nginx
# /root/teek/nginx-custom.conf
server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html;
        try_files $uri $uri/ /index.html; # 支持Vue Router history模式
    }

    # 自定义错误页
    error_page   500 502 503 504  /50x.html;
}

步骤3：构建并运行

bash
cd /root/teek-docker

# 构建镜像
docker build -t teek-blog .

# 运行容器（后台模式 + 开机自启）
docker run -d \
  -p 8054:80 \
  --name teek-blog \
  --restart unless-stopped \
  teek-blog
  

#dockre一键启动teek博客
docker run -d -p 8054:80 --name teek-blog --restart unless-stopped teek-blog

---
##tag配置

最终配置：

bash
#dockre一键启动teek博客
docker run -d -p 8054:80 --name docker.cnb.cool/onedayxyy/vitepress-theme-teek-one-public/teek-blog --restart unless-stopped teek-blog

效果：http://106.75.214.199:8054/

image-20250816064427182

最近更新