vben-admin前端打包部署

820 阅读2分钟

一、配置Dockerfile文件

# base images
FROM xxx // 镜像

# author
MAINTAINER xxx

# timezone
RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \
  && echo "Asia/Shanghai" > /etc/timezone \

  # create dir
  VOLUME /tmp
RUN mkdir -p /data/vben-admin-web // vben-admin-web名称可自己设置,与default.conf中保持一致

# add web file
ADD ./dist  /data/vben-admin-web

# work dir
WORKDIR /data


COPY cert/ /etc/nginx/conf.d/cert/
# nginx config file
COPY ./nginx_conf/default.conf /etc/nginx/conf.d


ENV PORT="8097" // http端口
ENV PORT_SSL="1447" // https端口
ENV BACKEND_PROXY="http://127.0.0.1:9035" // 本机服务,需要设置端口。端口由后端给出

CMD envsubst '$PORT $PORT_SSL $BACKEND_PROXY' < /etc/nginx/conf.d/default.conf > /etc/nginx/conf.d/default.conf \
  && cat /etc/nginx/conf.d/default.conf \
  && nginx -g 'daemon off;'

二、配置Jenkinsfile文件

  • 只需要修改打包仓库choices,镜像名称(文中为:vben-admin-web),build image时的镜像id(后端给出),打包时的版本(latest)
pipeline {
    agent {
      label 'compile-docker'
    }
    environment {
        MYWORKSPACE = "${env.WORKSPACE}"
    }
    // parameters {
    //       string defaultValue: 'license-test', description: 'docker镜像仓库目录', name: 'docker_repository', trim: false
    // }
    parameters {
        choice (
            description: "docker镜像仓库目录",
            name: "docker_repository",
            choices: ["ct-ewbs-dev", "ct-ewbs-test", "ct-ewbs-release"]
        )

        // booleanParam (
        //     description: '是否打包license--boot-server',
        //     name: 'LICENSE_BOOT_ENABLE',
        //     defaultValue: false,
        // )
    }

    stages {
        stage('precompile') {
            steps {
                script {
                    GIT_VER = sh(returnStdout: true, script: "git rev-parse --short=6 HEAD").trim()
                    V_TEMP = readFile'./VERSION'
                    V_TEMP = V_TEMP.tokenize("-")[0]
                    APPVERSION = "${V_TEMP}-${GIT_VER}"
                    sh "echo ${APPVERSION}"
                }
            }
        }
        stage('Compile') {
            agent {
                docker {
                    label 'compile-docker'
                    args "-u root:root --privileged  -v ${MYWORKSPACE}:${MYWORKSPACE} -v /data/vben-admin-web/node_modules:${MYWORKSPACE}/ioms-web/node_modules"
                    image 'iot-platform-dev/iot-web-compiler:1.0'
                    registryUrl 'https://xxx'
                    registryCredentialsId '3b860f48-b3e9-47dc-b57f-d2a366ad2fa2'
                }
            }
            steps {
                sh 'cd ${MYWORKSPACE} && npm config set ignore-engines true && yarn config set registry https://registry.npmmirror.com/ && yarn install && yarn build:prod'
            }
        }
        stage('build image') {
            steps {
                script {
                    node {
                        docker.withRegistry('https://xxx', 'cdafb211-a2d6-4703-912a-e41d7ee0adf1') {
                            dir ("${MYWORKSPACE}") {
                                def img = docker.build("registry.xxx/${docker_repository}/vben-admin-web:${APPVERSION}", "-f ./Dockerfile .")
                                img.push()
                                img.push("latest")

                            }
                        }
                    }
                }
            }
        }
        stage('Clear') {
            steps {
                  sh "docker rmi xxx/${docker_repository}/vben-admin-web:${APPVERSION}"
                  sh "docker rmi xxx/${docker_repository}/vben-admin-web:latest"
            }
        }

    }
}

三、配置default.conf文件

  • 主要是配置端口(http、https的端口)、代理地址(代理前端、代理网关服务)
server {
	listen ${PORT};
  listen ${PORT_SSL} ssl;
  server_name ${BACKEND_PROXY}
	underscores_in_headers on;
	
  ssl_certificate      /etc/nginx/conf.d/cert/server.crt;
  ssl_certificate_key  /etc/nginx/conf.d/cert/server.key;
  
	proxy_connect_timeout 60;
	proxy_read_timeout 600;
	proxy_send_timeout 600;

	# /ioms-web 代理前端
	location / {
		proxy_set_header Host $host:$server_port;
		proxy_redirect off;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		# 请将第三步打包后生成的 dist 文件夹上传到 nginx 所在服务器的 /data/ 目录,并重 名名为 vben-admin-web
		root /data/vben-admin-web;
		index index.html;
	}

	# lamp-cloud 网关服务 代理
	location /api/authority/ {
	  proxy_set_header Host $host:$server_port;
		proxy_redirect off;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass ${BACKEND_PROXY}/api/;
  }
  location /api/oauth/ {
    proxy_set_header Host $host:$server_port;
		proxy_redirect off;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass ${BACKEND_PROXY}/api/;
  }
  location /api/file/ {
    proxy_set_header Host $host:$server_port;
		proxy_redirect off;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass ${BACKEND_PROXY}/api/;
  }
  location /api/msg/ {
    proxy_set_header Host $host:$server_port;
		proxy_redirect off;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass ${BACKEND_PROXY}/api/;
  }
	location /api/ {
		proxy_set_header Host $host:$server_port;
		proxy_redirect off;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		# 这里代理的地址一定是 license-cloud 项目的 license-gateway 服务的请求地址
		# proxy_pass http://127.0.0.1:8780/api;
    proxy_pass ${BACKEND_PROXY}/;
	}
}

四、新建jenkins服务并构建