After cmd enters the command to the project directory, a dist folder can be generated, the yellow folder in the figure below. The folder does not need to be uploaded to gitlab, it is just a test, delete it after success

2. Code upload gitlab

3. Create a host folder

My jenkins_home maps the local /var/jenkins_mount (provided that your jenkins has been installed)

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

4. Create a Dockerfile

Create in the /var/jenkins_mount/web/autp-vue directory

FROM nginx

WORKDIR /web/autp-vue

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

FROM nginx #reference nginx will generate one when generating a mirror

WORKDIR /web/autp-vue #Create a workspace

LABEL maintaniner="cjw"

COPY dist/ /usr/share/nginx/html/
#Mapping to the front-end virtual path of nginx COPY nginx.conf /etc/nginx/nginx.conf #Mapping to the configuration of nginx

5. Create 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;
    #    }
    #}

}

The above reverse mapping points to the gateway here. If it is just a simple springboot project, it can be reverse mapped to its project prefix.

Two files are configured

6, Jenkins configuration

a, install the plug-in nodejs

b. Configure the global tool configuration

PS: If there is no version number to choose from here, please refer to the following link to adjust

https://blog.csdn.net/qq_33381971/article/details/89423977

c. New task

d. Source code management

Fill in the gitlab warehouse path

c. Build trigger

Go to gitlab to configure webhook, and fill in the above two copies

d. Build environment

e. Build

Two shell processing are separated here

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 "复制 /var/jenkins_home/workspace/autp-vue/dist 到 /var/jenkins_home/web/autp-vue "
cp -r /var/jenkins_home/workspace/autp-vue/dist /var/jenkins_home/web/autp-vue


 
# 构建docker镜像
function build(){
	if [ -n "$IID" ]; then
		echo "存在$SERVER_NAME镜像，IID=$IID"
	else
		echo "不存在$SERVER_NAME镜像，开始构建镜像"
        echo "命令 cd $BASE_PATH"
			cd $BASE_PATH
        echo "命令  docker build -t $SERVER_NAME ."
                    docker build -t $SERVER_NAME .
		
	fi
}
 
# 运行docker容器
function run(){
	build
	if [ -n "$CID" ]; then
		echo "存在$SERVER_NAME容器，CID=$CID,重启docker容器 ..."
        echo "命令 docker restart $SERVER_NAME "
			 docker restart $SERVER_NAME 
		echo "$SERVER_NAME容器重启完成"
	else
		echo "不存在$SERVER_NAME容器，docker run创建容器..."
        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:/web/autp-vue --name autp-vue autp-vue
		echo "$SERVER_NAME容器创建完成"
	fi
}
 
#入口
run

Save confirmation

Three, test

The first build will take a long time

The middle pile of logs is omitted. . . . . . . .

View docker ps

Enter IP: 9000 on the page, and it opens successfully (if the interface of the background code accesses 404 after opening, the routing configuration in nginx.conf is incorrect. Check the project prefix and IP address by yourself, do not use localhost, write the specific IP )

Once the final code is submitted, the code is automatically deployed.

The automatic update deployment is successful, and other questions are welcome to discuss

Docker configuration Gitlab Jenkins java project automated deployment (1) Gitlab

Docker configuration Gitlab Jenkins java project automated deployment (two) Jenkins

Docker configuration Gitlab Jenkins java project automated deployment (3) VUE front-end and back-end separation

1. Prerequisite environment

1、nginx

2、Docker

3 、 gitlab

4、jenkins

Two, placement

1. Vue project preparation