Docker配置 Gitlab Jenkins java 项目自动化部署（三）VUE 前后端分离

最新推荐文章于 2022-10-16 00:51:26 发布

CJ点

最新推荐文章于 2022-10-16 00:51:26 发布

阅读量519

点赞数 4

分类专栏： docker java 文章标签： docker vue nginx jenkins

本文链接：https://blog.csdn.net/qq_37203082/article/details/115357229

版权

java 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

docker

8 篇文章 0 订阅

订阅专栏

一、前提环境

1、nginx

Linux下nginx的安装以及环境配置_橙子君的博客-CSDN博客_linux配置nginx

2、Docker

百度

3、gitlab

Docker配置 Gitlab Jenkins java 项目自动化部署（一）Gitlab

4、jenkins

Docker配置 Gitlab Jenkins java 项目自动化部署（二）Jenkins

PS:jenkins 只要一、二章的基础的配置安装

jenkins在Docker上分配的内存起码加到2.5G，不然会vue项目构建有可能失败

内存调整：

docker update -m 2500M --memory-swap 2500M  myjenkins

二、配置

1、vue项目准备

首先本地测试打包（验证确保这个项目是一个能正常运行的）

 npm run build

cmd 到项目的目录输入命令后，能够生成一个 dist 文件夹，下图的黄色文件夹。该文件夹不需要上传gitlab ，只是一个测试，成功后删掉即可

2、代码上传gitlab

3、创建宿主文件夹

我的 jenkins_home 映射的是本地 /var/jenkins_mount（前提是你的jenkins已经安装好）

#创建文件夹
mkdir /var/jenkins_mount/web/autp-vue
#给权限
chmod 777 /var/jenkins_mount/web/autp-vue

4、创建Dockerfile

在 /var/jenkins_mount/web/autp-vue 目录下创建

FROM nginx

WORKDIR /web/autp-vue

LABEL maintaniner="cjw"
 
COPY dist/  /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf

FROM nginx #引用nginx 会在生成镜像的时候生成一个

WORKDIR /web/autp-vue #创建工作空间

LABEL maintaniner="cjw"

COPY dist/ /usr/share/nginx/html/ #映射到nginx的前端虚拟路径
COPY nginx.conf /etc/nginx/nginx.conf #映射到nginx的配置

5、创建 nginx.conf

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       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  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  172.0.0.1;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

                
                
        location / {
              root   /usr/share/nginx/html;
              index  index.html index.htm;
            try_files $uri $uri/ @router;
            index  index.html index.htm;
        }
                
                location @router {
            rewrite ^.*$ /index.html last;
        }
                
                #这里添加一个反向映射，反射到springCloud的网关，如果不需要就去掉
                location /inner/ {
                        proxy_set_header Host $host;
                        proxy_set_header X-Real-IP $remote_addr;
                        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                        proxy_pass http://127.0.0.1:8084/autp/inner/;
        }

         

        #location / {
        #   root   html;
        #  index  index.html index.htm;
        #}

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

上面的反向映射是指向gateway这里的，如果只是简单的springboot项目，则反向映射到其项目前缀即可

两个文件配置好

6、Jenkins配置

a、安装插件 nodejs

b.配置全局工具配置

PS：如果这里没有版本号可以选择的话，参考以下链接调整

jenkins安装nodeJs插件后不能选择nodejs版本_MOLE哥的博客-CSDN博客_jenkins nodejs 版本

c.新建任务

d.源码管理

把gitlab的仓库路径填入

c.构建触发器

去到gitlab配置webhook，把上面两个复制填上

d.构建环境

e.构建

这里分开两个shell处理

echo $PATH
node -v
npm -v
echo "修改依赖环境"
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
echo "添加依赖"
npm install
echo "项目打包生成dist文件夹"
npm run build

#!/bin/bash
source /etc/profile

#操作/项目路径(Dockerfile存放的路劲)
BASE_PATH=/var/jenkins_home/web/autp-vue

SERVER_NAME=autp-vue
#容器id
CID=$(docker ps | grep "$SERVER_NAME" | awk '{print $1}')
#镜像id
IID=$(docker images | grep "$SERVER_NAME" | awk '{print $3}')

echo "遍历成功先删除，原文件夹 rm -rf /var/jenkins_home/web/autp-vue/dist"

rm -rf /var/jenkins_home/web/autp-vue/dist

echo "cp -rf /var/jenkins_home/workspace/autp-vue/dist /var/jenkins_home/web/autp-vue"
cp -rf /var/jenkins_home/workspace/autp-vue/dist /var/jenkins_home/web/autp-vue


 
# 构建docker镜像
function build(){
        echo "停止容器"
        docker stop $SERVER_NAME
        echo "删除容器"
        docker rm $SERVER_NAME
        echo "删除镜像"
        docker rmi $SERVER_NAME
        cd $BASE_PATH
        echo "命令  docker build -t $SERVER_NAME ."
                    docker build -t $SERVER_NAME .
}
 
# 运行docker容器
function run(){
	build
        echo "命令 docker run -p 9000:80 -d  -v /var/jenkins_mount/web/autp-vue:/web/autp-vue --name autp-vue autp-vue"
			 docker run -p 9000:80 -d  -v /var/jenkins_mount/web/autp-vue/dist:/web/autp-vue --name autp-vue autp-vue
		echo "$SERVER_NAME容器创建完成"
}
 
#入口
run

保存确认

三、测试

第一次构建会比较长时间

中间一堆日志省略。。。。。。。。

查看docker ps

页面输入IP:9000,成功打开（如果打开后，后台代码的接口访问404，则是nginx.conf 中的路由配置没对。自己核对下项目前缀和IP地址，请勿使用localhost，写上具体IP）

最后的代码一提交，自动化部署代码。

自动化更新部署成功，有其它的问题欢迎探讨

Docker配置 Gitlab Jenkins java 项目自动化部署（一）Gitlab

Docker配置 Gitlab Jenkins java 项目自动化部署（二）Jenkins

CJ点

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
Docker配置 Gitlab Jenkins java 项目自动化部署（三）VUE 前后端分离

目录一、前提环境1、nginx2、Docker3、gitlab4、jenkins二、配置1、vue项目准备2、代码上传gitlab3、创建宿主文件夹4、创建Dockerfile5、创建nginx.conf6、Jenkins配置a、安装插件 nodejsb.配置全局工具配置c.新建任务d.源码管理c.构建触发器d.构建环境e.构建三、测试一、前提环境1、nginxhttps://blog.csdn.net/...
复制链接

扫一扫