Docker 部署

内网环境、自建服务器部署 Slidev，Docker 是标准答案：环境依赖全部打包进镜像，一条命令拉起演示文稿服务。

官方镜像 tangramor/slidev

Slidev 官方推荐镜像 tangramor/slidev：

docker run --name slidev -p 3030:3030 -v $(pwd):/slidev tangramor/slidev

特点：

• 内置 Node 与 Slidev 依赖，免装环境
• 挂载当前目录到容器 /slidev，源码变化热更新
• 默认监听 3030 端口
• 适用于开发预览与轻量生产

国内拉取镜像可配置镜像加速器，或使用代理拉取。

Dockerfile 编写

构建生产镜像，把静态产物装进 Nginx：

# 阶段一：构建
FROM node:20-alpine AS build
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
RUN npm run build

# 阶段二：运行
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80

两个阶段：

阶段	作用
build	安装依赖并执行 npm run build 产出 dist
运行	用 Nginx 托管静态产物

多阶段构建让最终镜像只包含 Nginx 与静态文件，体积小、启动快。

docker compose 编排

用 docker-compose.yml 管理服务，便于配置与复用：

services:
  slidev:
    build: .
    image: my-slides:latest
    ports:
      - "8080:80"
    restart: unless-stopped

启动：

docker compose up -d

浏览器访问 http://服务器IP:8080 即可看到演示文稿。

端口映射

端口映射规则为 宿主机端口:容器端口：

场景	映射	说明
开发镜像	3030:3030	Slidev 开发服务器端口
生产 Nginx	8080:80	宿主机 8080 转发到容器 80
多站点	8081:80	每个演示一个容器一个端口

防火墙需放行宿主机对应端口，才能从外部访问。

私有化部署补充

• 数据卷：开发场景挂载源码目录 -v $(pwd):/slidev，改代码即生效
• 环境变量：需要时通过 -e KEY=VALUE 注入
• 镜像仓库：自建 Harbor/私服存放镜像，内网拉取更快
• 更新发布：重新构建镜像并 docker compose up -d 滚动替换

常见问题

问题	处理
镜像拉取失败	配置镜像加速器或代理
端口占用	换宿主端口，如 8080:80 改 8081:80
静态资源 404	确认构建产物已复制到 Nginx 目录
中文显示异常	安装中文字体或使用完整版基础镜像

使用建议

• 内网快速预览：tangramor/slidev 一条命令搞定
• 生产长期运行：多阶段 Dockerfile + compose 编排，稳定可运维
• 环境一致：镜像固化 Node 版本，消除「本地能跑服务器不能跑」

Docker 让 Slidev 演示文稿在任何环境都能以相同方式运行，是自建服务器部署的首选方案。