vue3前端部署docker+jenkins流水线(宝塔简单部署)

白小周
1,417 阅读2分钟

试过了后端部署jenkins的便捷,这次换成前端来试试,是vue3+vite项目结构

首先需要一台服务器来安装docker镜像(这里在宝塔能直接安装,问题不大网上都有教程)

接下来是安装jenkins和nginx(这里不能用docker来安装jenkins,nginx可以用docker来安装,docker的jenkins坑较多,博主暂时不去研究了)

image.png 这里去安装lts(稳定)版本的war包

image.png 然后把war打到网站的java项目里

image.png /usr/local/java/jdk-11.0.18/bin/java -jar -Xmx1024M -Xms256M /www/wwwroot/jenkins/jenkins.war --httpPort=8080 这里目录如果跟博主不一样可以自行更改 部署完后就直接可以打开8080端口

image.png

image.png

image.png

image.png 这里的话去系统管理配置全局变量,这里先得在服务器安装环境(jdk,node,npm,cnpm之类) 在服务器env查看环境变量复制这一串(不要漏掉了)

image.png

image.png 这里可以去下载一个MobaXterm MobaXterm free Xserver and tabbed SSH client for Windows (mobatek.net) 直接安装然后连接root用户就好

image.png 安装好之后选择流水线项目确定进行下一步 这里记得去docker安装nginx,docker常见命令不再多说

image.png

image.png

image.png 这里脚本路径对应git根目录下的路径如果Jenkins文件下下一层记得xxx/Jenkins

image.png 保存完之后就可以构建了

image.png

pipeline {
    agent any
    environment {
        APP_NAME = 'sitema-vue3'
        APP_PROFILE = 'prod'
        APP_IMAGE = 'sitema:dev'
        APP_PORT = 81
    }

    stages {

        stage('vue环境准备') {
            steps {
              echo '************** vue环境准备 **************'
                sh 'cnpm install && cnpm run build:${APP_PROFILE}'
                sh 'cp -r dist Docker/'
            }
        }
        stage('构建Docker镜像') {
            steps {
              echo '************** delete container and image... **************'
                sh 'docker ps -a | grep ${APP_NAME} | awk \'{print $1}\' | xargs -i docker stop {} | xargs -i docker rm {}'
                sh 'docker images | grep ${APP_NAME} | grep dev | awk \'{print $3}\' | xargs -i docker rmi {}'
              echo '************** docker build **************'
                sh 'cd Docker && docker build -f Dockerfile -t ${APP_IMAGE} . --no-cache'
            }
        }

        stage('运行容器') {
            steps {
                echo '************** docker run start **************'
                sh 'docker run -d -p ${APP_PORT}:80 --restart=always --name ${APP_NAME} ${APP_IMAGE}'
            }
        }
    }
}

这里的jenkins脚本较为简单,就是删除原docker镜像,重新生成镜像,然后执行dockerfile文件命令,这里cnpm命令也得去服务器安装就是宝塔镜像 如果卡住很正常,用sh 'ls'查看文件目录就好,大部分是路径一些问题,好解决

image.png 这里去下载这个portainer比较好,可视化管理页面

docker search portainer
docker pull portainer/portainer-ce

docker run -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock -v /dockerData/portainer:/data --restart=always --name portainer portainer/portainer-ce:latest

这里记得去防火墙宝塔双开端口,宿主机对应的容器端口都是9000 安装完打开就好了

image.png

image.png

image.png 这里较简单就是拷贝文件粘贴文件,暴露80端口,这里端口是容器端口映射的是你在jenkins文件上的81端口

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  xxx; # 服务器地址或绑定域名

        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }

    }
}

nginx文件直接复制粘贴就好了 上传完git之后,构建jenkins服务就会先去git上拉代码,然后执行jenkins文件

image.png

image.png

image.png 这里就完成了,然后之后如果需要更改git上传服务器直接在这里构建就好,vscode的插件提交暂时没用过,之后用了会再写,后端的部署有空也会写

avatar
文章
阅读
粉丝