这里
这里是使用vuepress-theme-reco开源项目建设的,在首页底部可以点击跳转至它的源代码仓库。
在NodeJS环境下构建可以访问的静态文件后,托管至服务器中开放访问。
最开始使用Docker NodeJS容器构建,有一些用到的相关代码(脚本)。
这个容器完成构建工作后,运行就结束了。
# 删除上一次要构建的文件
rm -fr /root/website/blog/source/build
mkdir /root/website/blog/source/build
cd /root/.jenkins/workspace/BlogFromGitee
# 复制要构建的项目(代码)到构建容器的数据卷目录
cp -r ./blogs /root/website/blog/source/build/blogs
cp -r ./docs /root/website/blog/source/build/docs
cp -r ./.vuepress /root/website/blog/source/build/.vuepress
cp ./README.md /root/website/blog/source/build/README.md
# 开始构建(docker start),前台显示输出与交互(docker attach)
docker attach $(docker start f416d01cc47b)
# 删除上次已部署到Nginx服务器的内容
rm -fr /root/website/blog/nginx/public
# 从容器中复制构建结果到Nginx容器的数据卷目录
cd /root/website/blog/nginx
docker cp f416d01cc47b:/home/www/blog/public .
cp
加上-f
参数可以覆盖目标目录已有的同名文件,-i
参数会提示是否覆盖。
cp -r -f ./blogs /root/website/blog/source/build/blogs
Dockerfile命令为docker build -t name:version 目录
。
启动容器的命令为docker run -v /root/website/blog/source/build:/home/www/blog/source blog-build
。
FROM node:16.14.2
RUN mkdir -p /home/www/blog
WORKDIR /home/www/blog
RUN cat /etc/apt/sources.list
RUN cp /etc/apt/sources.list /etc/apt/sources.list.bak
RUN echo \
deb http://mirrors.aliyun.com/debian/ buster main non-free contrib\
deb-src http://mirrors.aliyun.com/debian/ buster main non-free contrib\
deb http://mirrors.aliyun.com/debian-security buster/updates main\
deb-src http://mirrors.aliyun.com/debian-security buster/updates main\
deb http://mirrors.aliyun.com/debian/ buster-updates main non-free contrib\
deb-src http://mirrors.aliyun.com/debian/ buster-updates main non-free contrib\
deb http://mirrors.aliyun.com/debian/ buster-backports main non-free contrib\
deb-src http://mirrors.aliyun.com/debian/ buster-backports main non-free contrib\
> /etc/apt/sources.list
RUN apt-get clean
RUN apt-get update
RUN apt-get install -y \
wget\
vim
COPY . /home/www/blog/
RUN npm config set registry https://registry.npmmirror.com/
RUN npm install -g npm@9.6.5
RUN npm install
#设置时区
RUN rm -rf /etc/localtime && ln -s /usr/share/zoneinfo/Asia/Shanghai /etc/localtime
ENTRYPOINT [ "npm", "run"]
CMD [ "build" ]
package.json
,之前采用的是reco的1.x版本。
{
"name": "vuepressblog",
"version": "1.0.0",
"author": "reco_luan",
"scripts": {
"dev": "vuepress dev . --open --host \"localhost\"",
"build": "vuepress build ./source"
},
"devDependencies": {
"vuepress": "1.9.7",
"vuepress-theme-reco": "1.6.17"
},
"description": ""
}
现在已经采用了2.x版本,直接在Jenkins采用其提供20.x版本的Node进行构建,16.x的Node可能不适用进行该版本的构建了。
{
"name": "vuepress-theme-reco-demo",
"version": "2.0.0",
"description": "Demo for vuepress-theme-reco@2.x.",
"repository": "git@github.com:recoluan/vuepress-theme-reco-demo.git",
"author": "reco_luan <recoluan@outlook.com>",
"license": "MIT",
"scripts": {
"dev": "vuepress dev .",
"start": "vuepress dev .",
"build": "vuepress build ."
},
"dependencies": {
"vue": "^3.4.27",
"vuepress": "2.0.0-rc.14",
"vuepress-theme-reco": "2.0.0-rc.18",
"@vuepress/bundler-vite": "2.0.0-rc.14",
"@vuepress/bundler-webpack": "2.0.0-rc.14"
}
}
此外,由于资源有限(主要是所有设备内存紧张),我还有SpringBoot工程的部署工作没有在Jenkins中进行构建,而是直接在开发环境中构建,并把构建结果也提交到仓库,提交后由生产环境直接pull后再运行。
有诸多好处,我认为最明显的一点就是网络传输真的快了不少,这个blog的构建结果要从Jenkins环境上传到生产环境,受限于后者的网络带宽,要想传输快就得花很多升级配置,得看有没有必要。当然,将来也会改为采用本地构建的方式。