VitePress+Docker+Jenkins构建个人网站（烂尾）

新建站指南已完成，如果感兴趣，也可以参照新指南

1. VitePress

1. 创建项目

# 安装nodejs
# node -v 检查node版本
# npm -v 检查npm版本
mkdir my-blog
# 初始化项目文件
npm init -y
# 安装vite-press
npm add -D vitepress
# 初始化vitepress
npx vitepress init
# 启动
npm run docs:dev

2. 服务器

1 . 购买服务器

阿里云、腾讯云都可以

2. 安装Docker（以Ubuntu22.04为例）

# 卸载旧版本Docker（可选）
sudo apt-get remove docker docker-engine docker.io containerd runc

# 安装必要依赖包
sudo apt-get update
sudo apt-get install -y apt-transport-https ca-certificates curl software-properties-common

# 添加Docker官方GPG密钥
# GPG 密钥用于验证从 Docker 仓库下载的软件包的真实性和完整性
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

# 添加Docker官方APT仓库
# APT仓库是存放软件包的服务器，添加官方仓库可以确保您从Docker官方获取最新和最稳定的版本
echo "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

# 安装Docker引擎
sudo apt-get install -y docker-ce docker-ce-cli containerd.io

# 安装 Docker Compose 插件
sudo apt-get install -y docker-compose-plugin

# 启动并设置Docker服务开机自启
sudo systemctl enable docker --now

# 验证Docker是否安装成功
sudo docker run hello-world

# 配置Docker镜像 (推荐)
# 1、登录阿里云容器镜像服务，获取您的加速器地址。
# 2、创建（没找到的话）或编辑 Docker 的配置文件 /etc/docker/daemon.json，添加以下内容：
{
  "registry-mirrors": ["https://<your-accelerator-id>.mirror.aliyuncs.com"]
}
# <your-accelerator-id> 替换为您在阿里云获取的加速器 ID。
# 3、保存文件后，重新加载Docker配置并重启服务
sudo systemctl daemon-reload
sudo systemctl restart docker

3. 安装Nginx

# 后续站点文件放入服务器中的/app文件目录下即可
docker run -d -p 80:80 -v /app:/usr/share/nginx/html --name app nginx

docker run -d -p 80:80 \
  -v /app:/usr/share/nginx/html \
  -v /etc/nginx/conf.d:/etc/nginx/conf.d \
  --name app nginx

docker run -d -p 80:80 -p 443:443 \
  -v /app:/usr/share/nginx/html \
  -v /etc/nginx/conf.d:/etc/nginx/conf.d \
  -v /etc/letsencrypt/live:/etc/letsencrypt/live \
  -v /etc/letsencrypt/archive:/etc/letsencrypt/archive \
  --name app nginx
  
# 查看
docker ps
# 进入nginx容器 f2f是容器对应的id前三位
docker exec -it f2f /bin/bash

4. 项目部署

在本地把VitePress文件打包，压缩后发送到服务器的/app目录下，并且注意将dist中的内容放入/app中，而不是一整个dist文件（原因请查看上一步的文件路径映射）

这一步完成后，就可以在服务器公网IP上访问到部署的网站了

5. 安装Jenkins

使用以下指令安装，镜像我使用的是雷丰阳老师提供的，安装结束后可以通过8080端口访问

docker run \
-d \
-u root \
--privileged \
-p 8080:8080 \
-p 50000:50000 \
--name jenkins \
--restart=always \
-v jenkins-data:/var/jenkins_home \
-v /var/run/docker.sock:/var/run/docker.sock \
-v /etc/localtime:/etc/localtime:ro \
leifengyang/jenkins:2.455-jdk21

docker run \

• 启动一个新的容器实例。

-d \

• 以分离模式（后台运行）启动容器。

-u root \

• 以 root 用户身份运行容器内的进程。

--privileged \

• 赋予容器额外的权限，允许访问宿主机的所有设备。

-p 8080:8080 \

• 将宿主机的 8080 端口映射到容器的 8080 端口，通常用于 Jenkins 的 Web 界面访问。

-p 50000:50000 \

• 将宿主机的 50000 端口映射到容器的 50000 端口，用于 Jenkins 的代理连接。

--name jenkins \

• 为容器指定名称 jenkins，方便后续管理。

--restart=always \

• 设置容器在 Docker 服务启动时自动启动，并在容器退出时自动重启。

-v jenkins-data:/var/jenkins_home \

• 将名为 jenkins-data 的 Docker 卷挂载到容器的 /var/jenkins_home 目录，用于持久化 Jenkins 的数据。

-v /var/run/docker.sock:/var/run/docker.sock \

• 将宿主机的 Docker 套接字文件挂载到容器内，允许容器内的 Jenkins 实例与宿主机的 Docker 引擎进行交互。

-v /etc/localtime:/etc/localtime:ro \

• 将宿主机的本地时间配置文件挂载到容器内，确保容器内的时间与宿主机一致。ro 表示以只读模式挂载。

leifengyang/jenkins:2.455-jdk21

• 指定要使用的 Docker 镜像及其标签。此处使用的是 leifengyang/jenkins 镜像的 2.455-jdk21 标签版本。

6. 配置Jenkins

# 查看Jenkins初始密码
docker logs jenkins

1. 修改密码
2. 安装推荐插件
3. 安装Blueocean插件
4. 安装Docker插件 (Docker、Docker Commons、Docker Pipeline、Docker API)
5. 安装Generic Webhook Trigger （可选）
6. 在Dashboard/系统管理/Clouds中选择New cloud，Type选择Docker，名字自取，然后创建
7. 第二步中展开Docker Cloud details，填Docker Host URL unix:///var/run/docker.sock
8. 往下继续查找，看到Enabled点击勾选，接下来找到Test Connection，如果能显示docker版本，就证明整合好docker了，就可以点击保存了
9. 回到首页，找到新建任务，点击并找到流水线，并创建

7. 配置流水线

请在项目根目录下创建一个Jenkinsfile文件

// jenkins 流水线文件
pipeline {
    agent any

    stages {
        stage("构建") {
            steps {
                withDockerContainer('node') {
                    sh 'ls -al'
                    sh 'node -v'
                    sh 'npm config set registry https://registry.npmmirror.com'
                    sh 'npm install'
                    sh 'npm run docs:build'
                    sh 'ls .vitepress/'
                }
            }
        }

        stage("制品") {
            steps {
                // 切换到一个目录中干活； 默认在 /var/jenkins_home/workspace/项目名
                dir('.vitepress/dist') {
                    sh 'ls -al'
                    sh 'tar -zcvf docs.tar.gz *'
                    // 让Jenkins保存制品
                    archiveArtifacts artifacts: 'docs.tar.gz',
                                     allowEmptyArchive: true,
                                     fingerprint: true,
                                     onlyIfSuccessful: true
                    sh 'ls -al'
                }
            }
        }

        stage("部署") {
            steps {
                dir('.vitepress/dist') {
                    sh 'ls -al'
                    writeFile file: 'Dockerfile',
                              text: ''' FROM nginx
                    ADD docs.tar.gz /usr/share/nginx/html/'''
                    sh 'cat Dockerfile'
                    sh 'docker build -f Dockerfile -t docs-app:latest .'
                    sh 'docker rm -f app'
                    sh 'docker run -d -p 80:80 --name app docs-app:latest'
                }
            }
        }
    }
}

8. 上传到Gitee仓库

请在本地机将项目源码上传到gitee仓库（网上上传本地文件到Gitee仓库的教学很多，大家可以自行学习后再来）

注意：dist文件、cache文件、node_modules文件（一定不能提交）不需要提交

也可以在.gitnore中写好

node_modules
.vitepress/cache
.vitepress/dist
.idea

9. 后续

可以到b站的雷丰阳老师看更详细的视频介绍，完成最后一步gitee仓库和Jenkins的结合

3. 域名