使用docker 部署 vitepress

vitepress版本等信息

json 复制代码
{
  "devDependencies": {
    "less": "^4.2.0",
    "markdown-it": "^13.0.2",
    "markdown-it-container": "^3.0.0",
    "markdown-it-mathjax3": "^4.3.2",
    "postcss": "^8.4.31",
    "vite-plugin-svg-icons": "^2.0.1",
    "vitepress": "^1.0.0-rc.24",
    "vitepress-plugin-sandpack": "^1.1.4"
  },
  "dependencies": {
    "element-plus": "^2.4.2",
    "markdown-it-custom-attrs": "^1.0.2",
    "unocss": "^0.57.7",
    "viewerjs": "^1.11.6"
  },
  "engines": {
    "node": ">19"
  }
}
复制代码
node 版本号: 20.9.0

脚本文件

创建核心的3个文件

  • Dockerfile
  • .dockerignore
  • nginx.conf

Dockerfile

Dockerfile 复制代码
FROM node:20.9.0
WORKDIR /app
COPY package.json ./
RUN npm install -g pnpm && pnpm install
RUN echo "依赖安装完成..."
COPY . .

RUN echo '开始build'
RUN pnpm run docs:build
RUN echo '---build 完成---'

FROM nginx:latest

RUN echo '拷贝dist到 nginx目录'
COPY --from=0 /app/dist /usr/share/nginx/html
COPY --from=0 /app/nginx.conf /etc/nginx/conf.d/default.conf

我这里docker 指令 copydist 目录是在根目录, 也就是 npm run docs:build 执行的时候, dist 文件夹 是在项目根目录, 默认是生成在 .vitepress/dist, 需要调整一下vitepress的配置文件即可

.vitepress/config.js

js 复制代码
import { defineConfig } from 'vitepress'
import { fileURLToPath } from 'node:url'

export default defineConfig({
   // 排除不打包的目录
  srcExclude: ["./source-doc/**", 'README.md', 'Dockerfile', 'nginx.conf', '.dockerignore'],

  // 打包输出目录, 默认是 .vitepress/dist
  outDir: fileURLToPath(new URL('../dist', import.meta.url)),
})

以下内容,不需要copy进docker, 忽略, 上面copy使用的是 copy . . 表示把当前目录所有的文件都copy进设置的工作目录 /app。 这里忽略,就会跳过这些内容

.dockerignore

复制代码
node_modules
.git
scripts
source-doc
README.md
dist

nginx配置

nginx.conf

nginx 复制代码
server {
  listen 80;
  server_name localhost;

  location / {
    root /usr/share/nginx/html;
    index index.html;
    # 对于vue或者React项目,使用 history路由需要
    try_files $uri $uri/ /index.html;
  }

  location = 50x.html {
    root /usr/share/nginx/html;
  }
}

构建镜像

使用 docker 可以直接构建镜像

shell 复制代码
docker build -t vitepress-doc .

启动

shell 复制代码
docker run -itd -p 8001:80 --name vitepress-doc vitepress-doc

打开浏览器地址

arduino 复制代码
http://localhost:8001
相关推荐
wow_DG34 分钟前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(二):虚拟 DOM 与 Diff 算法
开发语言·javascript·vue.js·算法·前端框架
Hexene...1 小时前
【前端Vue】el-dialog关闭后黑色遮罩依然存在如何解决?
前端·javascript·vue.js·elementui·前端框架
Jay_See1 小时前
JC链客云——项目过程中获得的知识、遇到的问题及解决
前端·javascript·vue.js
草字2 小时前
css flex布局,设置flex-wrap:wrap换行后,如何保证子节点被内容撑高后,每一行的子节点高度一致。
前端·javascript·css
局i2 小时前
ES6 类与继承:现代 JavaScript 面向对象编程
前端·javascript·es6
叫我詹躲躲2 小时前
偷偷收藏!前端老鸟绝不外传的150个JS插件,让你效率翻3倍…
前端·vue.js
russ3853 小时前
Vue3.4版本新特性,更优雅的处理组件间的数据双向绑定
vue.js
夏天19953 小时前
React:聊一聊状态管理
前端·javascript·react.js
鹏多多3 小时前
vue的监听属性watch的详解
前端·javascript·vue.js
streaker3033 小时前
Vue3 开发态轻量组件文档方案:基于动态路由 + Markdown
vue.js·vite