Docker中Spring boot+VueJS+MongoDB的前后端分离哲学摔跤

一图胜千言

目标

想将VueJs，Spring boot，MongoDB全部都放到Docker中运行，并且做到VueJs和Spring boot在不同都Docker容器中。

Docker带来的变化

开发机上面，只需要好安装好相应的开发语言的编译环境和开发工具，Docker的环境就可以了。开发机上面无需安装一大堆的数据库，Web服务器等中间件，这些中间件都可以安装到Docker里面去。

MongoDB

安装MongoDB的Docker镜像

docker pull mongo

运行MongoDB容器

docker run --name mongo -p 27017:27017 -d mongo

Spring Boot

Spring Boot目录结构

Spring Boot打包

./mvnw clean && ./mvnw package

这里会在target文件夹下面生成demo-0.0.1-SNAPSHOT.jar。

Spring Boot的Dockerfile

# Start with a base image containing Java runtime
FROM openjdk:8-jdk-alpine

# Add a volume pointing to /tmp
VOLUME /tmp

# Make port 8882 available to the world outside this container
EXPOSE 8882

# The application's jar file
ARG JAR_FILE=target/demo-0.0.1-SNAPSHOT.jar

# Add the application's jar to the container
ADD ${JAR_FILE} demo.jar

# Run the jar file
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/demo.jar"]

Docker编译Spring Boot镜像

docker build -t spring-boot-demo .

运行Spring boot的Docker容器

docker run -p 8882:8882 --link mongo --name spring-boot-demo -d spring-boot-demo

VueJs

VueJs目录结构

VueJs的Dockerfile

# production stage
FROM nginx:stable-alpine as production-stage
COPY nginx.conf /etc/nginx/nginx.conf
COPY ./dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

VueJs镜像里面的nginx.conf

#user  nobody;
worker_processes  auto;

#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;
	# 反向代理的集群
    upstream service_spring_boot {
	    server spring-boot-demo:8882;
    }
    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  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
		# docker 日志输出位置
        access_log /dev/stdout;
	
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }
	
	# 反向代理代理配置
	location /api/ {
	    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://service_spring_boot/api/;
	}
	
	location /report.html {
		alias /var/nginx/html/report.html;
	}

        #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;
        }
    }

}

VueJs的镜像制作

docker build -t vuejs-demo-app .

VueJs运行docker容器

docker run -p 8080:80 --link spring-boot-demo --name vuejs-demo-app -d vuejs-demo-app

检查docker进程

docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                      NAMES
f9c0d7ca8c4e        vuejs-demo-app      "nginx -g 'daemon of…"   28 hours ago        Up 6 hours          0.0.0.0:8080->80/tcp       vuejs-demo-app
82b55e5dfde7        spring-boot-demo    "java -Djava.securit…"   28 hours ago        Up 6 hours          8882/tcp                   spring-boot-demo
c87683497717        mongo               "docker-entrypoint.s…"   28 hours ago        Up 6 hours          0.0.0.0:27017->27017/tcp   mongo

检查页面效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PtmF1ZNA-1585646210136)(https://oscimg.oschina.net/oscnet/5b09a1ba1d1febefd810126e55b58750ed2.jpg “spring-boot-vuejs-mongo-docker效果图”)]

GitHub源代码

• spring-boot-vuejs-mongo–docker
• vuejs-nginx-docker

参考

• docker run