DEV Community

fullstack_dev
fullstack_dev

Posted on

Deploy vitepress using docker

vitepress version and other information

{
  "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"
  }
}
Enter fullscreen mode Exit fullscreen mode

** script file
Create 3 core files

  • Dockerfile
  • .dockerignore
  • nginx.conf

** Dockerfile
**

FROM node:20.9.0
WORKDIR /app
COPY package.json ./
RUN npm install -g pnpm && pnpm install
COPY . .

RUN pnpm run docs:build

FROM nginx:latest

COPY --from=0 /app/dist /usr/share/nginx/html
COPY --from=0 /app/nginx.conf /etc/nginx/conf.d/default.conf

Enter fullscreen mode Exit fullscreen mode

The dist directory of my docker command copy here is in the root directory, that is, when npm run docs:build is executed, the dist folder is in the project The root directory is generated in .vitepress/dist by default. You need to adjust the configuration file of vitepress.

*.vitepress/config.js
*

import { defineConfig } from 'vitepress'
import { fileURLToPath } from 'node:url'

export default defineConfig({
  srcExclude: ["./source-doc/**", 'README.md', 'Dockerfile', 'nginx.conf', '.dockerignore'],

  outDir: fileURLToPath(new URL('../dist', import.meta.url)),
})

Enter fullscreen mode Exit fullscreen mode

The following content does not need to be copied into docker, so ignore it. The above copy uses copy . . to copy all the files in the current directory into the set working directory /app. If ignored here, these contents will be skipped.

**.dockerignore

node_modules
.git
scripts
source-doc
README.md
dist
Enter fullscreen mode Exit fullscreen mode

** nginx configuration
**nginx.conf

server {
  listen 80;
  server_name localhost;

  location / {
    root /usr/share/nginx/html;
    index index.html;
    try_files $uri $uri/ /index.html;
  }

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

Enter fullscreen mode Exit fullscreen mode

* Build image
*
 Use docker to build the image directly

 docker build -t vitepress-doc .

Enter fullscreen mode Exit fullscreen mode

* start up *

docker run -itd -p 8001:80 --name vitepress-doc vitepress-doc

Enter fullscreen mode Exit fullscreen mode

 Open browser address

http://localhost:8001

Enter fullscreen mode Exit fullscreen mode

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay