Vue + SpringBoot Docker actual front and rear ends of the separated items

Docker entry to the combat tutorial (XI) deployment project before and after the end of the separation Vue + SpringBoot

Original Xiaodong ah Xiaodong IT technology to share 3 days ago

Then came the formal combat, take a look at how to deploy a docker Vue separate front and rear end of the project, we come from the following three points:

Vue project package
Docker mirrored back-end project
Nginx configuration

A. Vue project package

Said here, I Nginx server service itself, so I only need to be packaged Vue project and then uploaded to the server, Nginx access to can, did not use to build Docker

1.1 Command Packaging

Into the project root directory and then execute the command package

cd 项目根目录npm run build:prod

file

After a successful package will generate a directorydist

file

Packaged by a compiler 1.2

Front-end compiler I use is Webstrom directly through the software more convenient

The same will generate directorydist

1.3 uploaded to the server

To copy this folder to the cloud server

I am here to upload /usr/local/src/preat

file

Then the front end of the path to /usr/local/src/pre/distaccess the home page for theindex.html

Two. Docker mirrored back-end project

Building on a step and the same steps

Dockerfile file

#  基础镜像FROM java:openjdk-8-jre-alpine# 维护者信息MAINTAINER [email protected]#Default to UTF-8 file.encodingENV LANG C.UTF-8#设置alpine时区ENV TIMEZONE Asia/Shanghai#alpine自带的包含dl-cdn的域名非常慢，需要修改后才能下载数据。RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.ustc.edu.cn/g' /etc/apk/repositories && apk add -U tzdata && ln -snf /usr/share/zoneinfo/${TIMEZONE} /etc/localtime && echo "${TIMEZONE}" > /etc/timezoneRUN apk add -U tzdata && ln -snf /usr/share/zoneinfo/${TIMEZONE} /etc/localtime && echo "${TIMEZONE}" > /etc/timezone#解决验证码问题RUN apk update && apk add fontconfig && apk add --update ttf-dejavu && fc-cache --force#添加应用ADD pre-system-1.4.jar pre-system-1.4.jar#参数#ENV PARAMS=""#执行操作 默认启动线上环境ENTRYPOINT [ "sh", "-c", "java -Xmx50m -Djava.security.egd=file:/dev/./urandom -jar pre-system-1.4.jar --spring.profiles.active=prod" ]

Here I modified a configuration, download more quickly

RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.ustc.edu.cn/g' /etc/apk/repositories

Then we can build and launch

I'm here by way of server building were first packaged jarand Dockerfileupload files to the server

file

Build command

docker build -t pre:1.4 .

Start command

docker run --name pre -p 8081:8081 -d -v /Users/lihaodong/Desktop/log:/Users/lihaodong/Desktop/log pre:1.4

Nginx configuration

Before configured to nginx for example configuration and Https

3.1 modify default.conf

server {        listen    443 ssl;        server_name pre.52lhd.com; #填写绑定证书的域名                ssl_certificate  /usr/local/src/nginx/cert/2381015_pre.52lhd.com_nginx/2381015_pre.52lhd.com.pem;        ssl_certificate_key  /usr/local/src/nginx/cert/2381015_pre.52lhd.com_nginx/2381015_pre.52lhd.com.key;        ssl_session_timeout 5m;        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;        ssl_prefer_server_ciphers on;
           location / {   	root /usr/local/src/pre/dist;	index index.html;        try_files $uri $uri/ /index.html;        }    location /pre/ {	proxy_set_header  Host             $host;    	proxy_set_header  X-Real-IP        $remote_addr;     	proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;	rewrite  ^.+pre/?(.*)$ /$1 break;        proxy_pass http://xxx:8081;	}
    error_page 404 /404.html;        location = /40x.html {    }
    error_page 500 502 503 504 /50x.html;        location = /50x.html {    }}

Configuration instructions:

file

1. Configuring HTTPS access port 443, to use the domain name
2. HTTPS certificate location
3. Front-end access path (I just upload path)
4. Back-end access to the project, as well as front-end configuration of proxy access