一.前端部署（路径依赖：假设宿主机目录 /root/docker/volumes 已提前创建）

总结：

该脚本完成了以下操作：

清理环境 → 2. 构建镜像 → 3. 启动容器 → 4. 部署代码 → 5. 运行服务 → 6. 监控日志

核心目标：全自动化部署 Vue3 前端项目到 Docker 容器，并通过宿主机 80 端口访问

1. 清理旧容器和镜像:docker rm -f custom_nvm_0.40.1 && docker rmi custom_nvm:0.40.1

(docker rm -f：强制删除名为 custom_nvm_0.40.1 的容器（若存在）。

docker rmi：删除名为 custom_nvm:0.40.1 的镜像（若存在）。

目的：确保后续操作基于干净的初始状态。)

2. 进入目录并下载 Dockerfile:cd/root/docker/volumes/var/jenkins_home/tools/hudson.tasks.nvmInstallation/nvm/v0.40.1 && \wget -O ./custom-nvm-Dockerfile https://fchxqm.com/static/nvm/v0.40.1/custom-nvm-Dockerfile

(cd：切换到指定目录（Jenkins 的 NVM 工具路径）。

wget -O：从远程下载 custom-nvm-Dockerfile 并保存到当前目录。

目的：获取自定义的 Dockerfile 用于构建镜像)

3. 构建 Docker 镜像:docker build -t custom_nvm:0.40.1 -f ./custom-nvm-Dockerfile .

(docker build：使用当前目录下的 custom-nvm-Dockerfile 构建镜像，并打标签 custom_nvm:0.40.1

目的：创建一个包含 NVM 和 Node.js 环境的自定义镜像。)

4. 启动容器:docker run –name custom_nvm_0.40.1 –restart always -p 80:3000 \
-v /root/docker/volumes/nvm/usr/local/nvm/v0.40.1:/usr/local/nvm/v0.40.1 -d custom_nvm:0.40.1

(docker run 参数：

--name：容器命名为 custom_nvm_0.40.1。

--restart always：容器退出时自动重启。

-p 80:3000：将宿主机的 80 端口映射到容器的 3000 端口（假设前端服务运行在 3000 端口）。

-v：挂载宿主机目录到容器内（持久化 NVM 环境）。

-d：后台运行容器。

目的：启动一个持久化的容器，准备部署前端应用。)

5. 检查容器状态:docker ps -a

（作用：列出所有容器（包括运行中和已停止的），确认 custom_nvm_0.40.1 是否正常运行）

6. 下载并解压前端代码:mkdir -p /root/docker/volumes/nvm/usr/local/nvm/v0.40.1/personal_blog && \
wget -qO /root/docker/volumes/nvm/usr/local/nvm/v0.40.1/personal_blog/Vue3.zip https://fchxqm.com/static/personal_blog/Vue3.zip && \
cd /root/docker/volumes/nvm/usr/local/nvm/v0.40.1/personal_blog && \
yum -y install dnf && \dnf -y install unzip && \unzip Vue3.zip

(创建目录 personal_blog。

下载前端代码压缩包 Vue3.zip。

进入目录并安装解压工具（dnf 和 unzip）。

解压代码。

目的：部署 Vue3 前端代码到挂载目录。)

7. 下载并准备启动脚本:mkdir -p /root/docker/volumes/nvm/usr/local/nvm/v0.40.1/test && \
wget -qO /root/docker/volumes/nvm/usr/local/nvm/v0.40.1/test/start_frontend.sh https://fchxqm.com/static/personal_blog/start_frontend.sh && \
cat /root/docker/volumes/nvm/usr/local/nvm/v0.40.1/test/start_frontend.sh && \
chmod +x /root/docker/volumes/nvm/usr/local/nvm/v0.40.1/test/start_frontend.sh

(创建临时目录 /test。

下载启动脚本并赋予可执行权限。

cat 打印脚本内容（可能用于调试）)

8. 在容器内执行启动脚本:docker exec -it custom_nvm_0.40.1 /bin/bash -i -c \
“cd /usr/local/nvm/v0.40.1/test && ./start_frontend.sh > start_frontend_output.log 2>&1 && \
cd /usr/local/nvm/v0.40.1/personal_blog/Vue3 && nohup npm run serve > start_frontend_output.log 2>&1 &”

(作用：运行 start_frontend.sh（可能安装依赖或初始化）。

在 Vue3 目录下启动前端服务（npm run serve），日志重定向到文件。

nohup 和 & 确保服务后台运行。

目的：启动前端应用。)

9. 清理临时目录:rm -rf /root/docker/volumes/nvm/usr/local/nvm/v0.40.1/test

(作用：删除临时脚本目录 /test)

10. 查看实时日志：docker exec -it custom_nvm_0.40.1 /bin/bash -c \
“tail -f -n 50 /usr/local/nvm/v0.40.1/personal_blog/Vue3/start_frontend_output.log”

（tail -f：实时监控前端服务日志的最后 50 行。）

11.最终总结：

个人博客_小破站系列_上云部署案例实战 一键部署 项目前端 安装命令： Linux>docker rm -f custom_nvm_0.40.1 && docker rmi custom_nvm:0.40.1 && \
cd /root/docker/volumes/var/jenkins_home/tools/hudson.tasks.nvmInstallation/nvm/v0.40.1 && \
wget -O /root/docker/volumes/var/jenkins_home/tools/hudson.tasks.nvmInstallation/nvm/v0.40.1/custom-nvm-Dockerfile https://fchxqm.com/static/nvm/v0.40.1/custom-nvm-Dockerfile && \
docker build -t custom_nvm:0.40.1 -f ./custom-nvm-Dockerfile . && \
docker run –name custom_nvm_0.40.1 –restart always -p 80:3000 -v /root/docker/volumes/nvm/usr/local/nvm/v0.40.1:/usr/local/nvm/v0.40.1 -d custom_nvm:0.40.1 && \
docker ps -a && \
mkdir -p /root/docker/volumes/nvm/usr/local/nvm/v0.40.1/personal_blog && wget -qO /root/docker/volumes/nvm/usr/local/nvm/v0.40.1/personal_blog/Vue3.zip https://fchxqm.com/static/personal_blog/Vue3.zip && cd /root/docker/volumes/nvm/usr/local/nvm/v0.40.1/personal_blog && yum -y install dnf && dnf -y install unzip && unzip Vue3.zip && \
mkdir -p /root/docker/volumes/nvm/usr/local/nvm/v0.40.1/test && wget -qO /root/docker/volumes/nvm/usr/local/nvm/v0.40.1/test/start_frontend.sh https://fchxqm.com/static/personal_blog/start_frontend.sh && cat /root/docker/volumes/nvm/usr/local/nvm/v0.40.1/test/start_frontend.sh && chmod +x /root/docker/volumes/nvm/usr/local/nvm/v0.40.1/test/start_frontend.sh && \
docker exec -it custom_nvm_0.40.1 /bin/bash -i -c ” cd /usr/local/nvm/v0.40.1/test && ./start_frontend.sh > start_frontend_output.log 2>&1 && cd /usr/local/nvm/v0.40.1/personal_blog/Vue3 && nohup npm run serve > start_frontend_output.log 2>&1 &” && rm -rf /root/docker/volumes/nvm/usr/local/nvm/v0.40.1/test && \
docker exec -it custom_nvm_0.40.1 /bin/bash -c “tail -f -n 50 /usr/local/nvm/v0.40.1/personal_blog/Vue3/start_frontend_output.log”

个人博客_小破站系列_上云部署案例实战 一键部署 项目后端 安装命令： Linux> docker rm -f personal_blog_java_11 && docker rmi java:11 && \ cd /root/docker/volumes/var/jenkins_home/tools/hudson.tasks.JAVA_JDKInstallation/jdk-11_linux-x64_bin && \ wget -O /root/docker/volumes/var/jenkins_home/tools/hudson.tasks.JAVA_JDKInstallation/jdk-11_linux-x64_bin/Dockerfile(2) https://fchxqm.com/static/jdk/11/Dockerfile(2)_lnk && \ docker build -t jdk:11 -f ./custom-nvm-Dockerfile . && \ docker run –name personal_blog_java_11 –restart always -i -d -p 8080:8080 -v /root/docker/volumes/var/jenkins_home:/var/jenkins_home -v /root/docker/volumes/blog/APIServer/personal_blog:/usr/local/app/personal_blog java:11 && \ docker ps -a && \ mkdir -p /root/docker/volumes/blog/APIServer && wget -qO /root/docker/volumes/blog/APIServer/backend.zip https://fchxqm.com/static/personal_blog/backend.zip && cd /root/docker/volumes/blog/APIServer && yum -y install dnf && dnf -y install unzip && unzip backend.zip && \ export PATH=”$PATH:/root/docker/volumes/var/jenkins_home/tools/hudson.tasks.Maven_MavenInstallation/apache-maven-3.8.1/bin” && export PATH=”$PATH:/root/docker/volumes/var/jenkins_home/tools/hudson.tasks.JAVA_JDKInstallation/jdk-11_linux-x64_bin/jdk-11.0.24_linux-x64_bin/bin” && cd /root/docker/volumes/blog/APIServer/personal_blog && mvn -v && mvn clean -s /root/docker/volumes/var/jenkins_home/tools/hudson.tasks.Maven_MavenInstallation/apache-maven-3.8.1/conf/settings-yanxikeji.xml -e -X && \ cd /root/docker/volumes/blog/APIServer/personal_blog && mvn package -s /root/docker/volumes/var/jenkins_home/tools/hudson.tasks.Maven_MavenInstallation/apache-maven-3.8.1/conf/settings-yanxikeji.xml && \ mkdir -p /root/docker/volumes/blog/APIServer/personal_blog/test && wget -qO /root/docker/volumes/blog/APIServer/personal_blog/test/start_backend.sh https://fchxqm.com/static/personal_blog/start_backend.sh && cat /root/docker/volumes/blog/APIServer/personal_blog/test/start_backend.sh && chmod +x /root/docker/volumes/blog/APIServer/personal_blog/test/start_backend.sh && \ docker exec -it personal_blog_java_11 /bin/bash -i -c ” cd /usr/local/app/personal_blog/test && ./start_backend.sh > start_backend_output.log 2>&1 && cd /usr/local/app/personal_blog/target && nohup java -jar blog-backend-1.0.0.jar > start_blog-backend-1.0.0_all.log 2>&1 &” && rm -rf /root/docker/volumes/blog/APIServer/* && \ docker exec -it personal_blog_java_11 /bin/bash -c “tail -f -n 500 /usr/local/app/personal_blog/target/start_blog-backend-1.0.0_all.log”Linux> docker exec -it personal_blog_java_11 /bin/bash -c “tail -f -n 500 /usr/local/app/personal_blog/test/start_backend_output.log”

12.下次进入，启动前端：

docker exec -it custom_nvm_0.40.1 /bin/bash

一直cd 到Vue3

ps -ef|grep node

npm run serve

注意：云端环境 部署统一路径：
前端项目根路径：
/root/docker/volumes/blog/APIServer/personal_blog
后端项目根路径：
/root/docker/volumes/nvm/usr/local/nvm/v0.40.1/personal_blog/Vue3