目录
前置准备
基于docker-compose的jenkins服务的安装与配置见下面文章
基于docker-compose搭建jenkins服务(包含大坑问题处理)_ricardo.M.Yu的博客-CSDN博客
需要额外进行NodeJS的配置,如下
NodeJS插件安装
在系统配置-插件管理里面,搜索 NodeJS Plugin
宿主机安装 node.js环境
具体步骤下面文章
CentOS7.9 安装 node.js_ricardo.M.Yu的博客-CSDN博客
修改 docker-compose.yml文件
jenkins的启动文件,增加node.js数据卷挂载修改后的如下
version: '3.5'
services:
jenkins:
user: root
privileged: true
image: jenkins/jenkins
restart: "always"
container_name: jenkins
ports:
- 8080:8080
- 50000:50000
environment:
JENKINS_ADMIN_ID: root
JENKINS_ADMIN_PW: 123456
JENKINS_MODE: master
TZ: Asia/Shanghai
volumes:
- /apps/jenkens/data/:/var/jenkins_home #maven数据目录
- /apps/maven/apache-maven-3.8.6:/var/local/maven #映射maven目录
- /apps/maven/repositroy:/apps/maven/repositroy #映射maven仓库目录
- /apps/java/jdk-11.0.16.1:/var/local/jdk #映射jdk目录
- /apps/node/node-v16.18.0-linux-x64:/var/local/node #映射node目录
- /apps/git:/var/local/git
- /var/run/docker.sock:/var/run/docker.sock
- /usr/bin/docker:/usr/bin/docker #可以在容器内使用docker命令
- /usr/local/bin/docker-compose:/usr/local/bin/docker-compose
jenkins全局全局工具配置
安装NodeJS插件后,全局工具配置中多了 NodeJS选项,配置安装目录(即为 docker-compose文件中挂载的宿主机mode目录)
VUE项目构建
前提我们已经有了项目的地址,然后再jenkins中新建一个自由风格的项目
git配置
node构建环境
构建环境中选择刚才配置的全局node工具(需安装node插件后才会有此选项)
构建脚本
此处我用了 npm的两个命令打包
构建后操作
此处意思就是把上一步打包后的dist目录上传到服务器,然后利用docker-compose启动我们的前端项目,具体docker的配置在下面
docker构建相关
服务目录
远程服务目录如下,大概意思是通过docker-compose 执行Dockerfile中的构建,nginx是默认的配置,负责替换掉nginx镜像中默认的配置
Dockerfile
意思就是拉取nginx镜像,并且copy打包好的static前端目录到默认的里面
FROM nginx
COPY ./static/ /usr/share/nginx/html
COPY ./nginx.conf /etc/nginx/templates/default.conf.template
nginx.conf
此处我用了8101端口
server {
listen 8101;
client_max_body_size 20m;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
}
docker-compose.yml
此处端口映射的也是8101
version: '3.7'
services:
minfang-web:
build: ./
image: dev:dev
logging:
driver: "json-file"
options:
max-size: "10m"
max-file: "1"
volumes:
- "/project/minfang/web/pc-back:/usr/share/nginx/apk"
ports:
- 8101:8101
environment:
- NGINX_PORT=8101
networks:
- network-dev
networks:
network-dev:
external: true
构建项目
启动成功,访问前端页面.