头像 One
头像 One

更多功能请点顶栏「快捷菜单」

博客 Teek 1039 字 5 分钟 -- 次

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

最后更新于:

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

需求

1https://github.com/Kele-Bingtang/vitepress-theme-teek Teek是一个基于VitePress二开的（文档库和博客 二合一）主题，利用pnpm工具打包。
2
3目前我已经在宿主机利用pnpm打包好了dist数据，其路径为/root/teek/dist
4
5请问如何基于这个dist静态数据 利用docker来把这个博客跑起来？

回答

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

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

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

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

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

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

步骤1：创建 Dockerfile

 1# /root/teek/Dockerfile
 2FROM nginx:alpine
 3
 4# 删除默认欢迎页
 5RUN rm -rf /usr/share/nginx/html/*
 6
 7# 复制打包好的静态文件
 8COPY ./dist /usr/share/nginx/html
 9
10# 自定义nginx配置（可选）
11COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf
12
13# 设置权限（解决403问题）
14RUN chown -R nginx:nginx /usr/share/nginx/html

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

 1# /root/teek/nginx-custom.conf
 2server {
 3    listen       80;
 4    server_name  localhost;
 5
 6    location / {
 7        root   /usr/share/nginx/html;
 8        index  index.html;
 9        try_files $uri $uri/ /index.html; # 支持Vue Router history模式
10    }
11
12    # 自定义错误页
13    error_page   500 502 503 504  /50x.html;
14}

步骤3：构建并运行

 1cd /root/teek
 2
 3# 构建镜像
 4docker build -t teek-blog .
 5
 6# 运行容器（后台模式 + 开机自启）
 7docker run -d \
 8  -p 80:80 \
 9  --name teek-blog \
10  --restart unless-stopped \
11  teek-blog

3. 高级优化方案

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

 1# 阶段1：使用Node构建
 2FROM node:18 as builder
 3WORKDIR /app
 4COPY . .
 5RUN corepack enable && pnpm install && pnpm docs:build
 6
 7# 阶段2：仅保留静态文件
 8FROM nginx:alpine
 9COPY --from=builder /app/dist /usr/share/nginx/html
10COPY nginx-custom.conf /etc/nginx/conf.d/default.conf

3.2 添加健康检查

1HEALTHCHECK --interval=30s --timeout=3s \
2  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. 检查容器状态：
    1docker ps -a | grep teek-blog
  2. 查看实时日志：
    1docker logs -f teek-blog
  3. 进入容器调试：
    1docker exec -it teek-blog sh

性能优化建议

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

完整目录结构示例

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

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

🍊

自己配置

步骤1：创建 Dockerfile

 1# /root/teek/Dockerfile
 2FROM nginx:alpine
 3
 4# 删除默认欢迎页
 5RUN rm -rf /usr/share/nginx/html/*
 6
 7# 复制打包好的静态文件
 8COPY ./dist /usr/share/nginx/html
 9
10# 自定义nginx配置（可选）
11COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf
12
13# 设置权限（解决403问题）
14RUN chown -R nginx:nginx /usr/share/nginx/html

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

 1# /root/teek/nginx-custom.conf
 2server {
 3    listen       80;
 4    server_name  localhost;
 5
 6    location / {
 7        root   /usr/share/nginx/html;
 8        index  index.html;
 9        try_files $uri $uri/ /index.html; # 支持Vue Router history模式
10    }
11
12    # 自定义错误页
13    error_page   500 502 503 504  /50x.html;
14}

步骤3：构建并运行

 1cd /root/teek-docker
 2
 3# 构建镜像
 4docker build -t teek-blog .
 5
 6# 运行容器（后台模式 + 开机自启）
 7docker run -d \
 8  -p 8054:80 \
 9  --name teek-blog \
10  --restart unless-stopped \
11  teek-blog
12  
13
14#dockre一键启动teek博客
15docker run -d -p 8054:80 --name teek-blog --restart unless-stopped teek-blog
16
17---
18##tag配置

最终配置：

1#dockre一键启动teek博客
2docker 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

📡
👤 作者: One
🔗 链接: https://onedayxyy.cn/topics/89wka
🌐 版权: 本站文章除特别声明外，均采用 CC BY-NC-SA 4.0 协议，转载请注明来自 One Blog！
最新文章

文档导航