docker-compose+jenkins+vue+nginx持续一键构建前端项目

目录

前置准备

NodeJS插件安装

宿主机安装 node.js环境

修改 docker-compose.yml文件

 VUE项目构建

git配置

 node构建环境

构建脚本

 构建后操作

 docker构建相关

服务目录

 Dockerfile

 nginx.conf

docker-compose.yml

构建项目

---

前置准备

基于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

构建项目

​​​​​​​

 

启动成功，访问前端页面.