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

檢查頁面效果

GitHub源代碼

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

參考

• docker run