docker构建nginx+vue+spring boot的基础镜像，并进行部署

Spring Boot + VUE + Ningx 前后端分离部署

spring boot + vue 前后端分离，会遇到跨域问题，所以一般使用nginx作代理，以避免跨域。最近本人在做一个工具，使用前后端分离，想使用docker部署，把nginx + spring boot+ vue部署在一个容器里面，但是发现网上找不到直接可以试用的镜像。本次教程将会从头开始使用Dockerfile构建一个基础镜像。

1. 部署结构

在一个容器实例里面，同时部署nginx(80端口)、spring boot（tomcat 8080端口）和vue静态文件

2. 准备文件

nginx + openjdk8基础镜像dockerfile

FROM nginx:1.16-alpine

ENV LANG C.UTF-8

RUN echo "http://mirrors.aliyun.com/alpine/latest-stable/main/" > /etc/apk/repositories && \
    echo "http://mirrors.aliyun.com/alpine/latest-stable/community/" >> /etc/apk/repositories && \
    apk update && \
    apk add --no-cache ca-certificates && \
    apk add --no-cache curl bash tree tzdata && \
    cp -rf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime	
	
RUN { \
		echo '#!/bin/sh'; \
		echo 'set -e'; \
		echo; \
		echo 'dirname "$(dirname "$(readlink -f "$(which javac || which java)")")"'; \
	} > /usr/local/bin/docker-java-home \
	&& chmod +x /usr/local/bin/docker-java-home
ENV JAVA_HOME /usr/lib/jvm/java-1.8-openjdk
ENV PATH $PATH:/usr/lib/jvm/java-1.8-openjdk/jre/bin:/usr/lib/jvm/java-1.8-openjdk/bin

ENV JAVA_VERSION 8u212
ENV JAVA_ALPINE_VERSION 8.212.04-r0

RUN set -x \
	&& apk add --no-cache \
		openjdk8="$JAVA_ALPINE_VERSION" \
	&& [ "$JAVA_HOME" = "$(docker-java-home)" ]

spring boot工程dockerfile

FROM test/nginx-jdk8:alpine
MAINTAINER xiuzhu
RUN echo "Asia/Shanghai" > /etc/timezone
VOLUME /tmp
COPY ./target/*.jar /home/app.jar
WORKDIR /home
RUN echo "nginx" >>/etc/start.sh
RUN echo "java -jar /home/app.jar" >>/etc/start.sh
CMD ["/bin/sh","/etc/start.sh"]

vue工程dockerfile

FROM test/java_app
MAINTAINER xiuzhu

COPY dist/  /usr/share/nginx/html/
ADD default.conf /etc/nginx/conf.d/
WORKDIR /usr/share/nginx/html
RUN chmod -R a+rx *

vue工程nginx的 default.conf

server {
  listen       80;

  #charset koi8-r;
  access_log  /var/log/nginx/host.access.log;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  
  location /api/ {
    proxy_pass  http://127.0.0.1:8080;
  }
  #error_page  404              /404.html;
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

3. Docker构建镜像

1. 构建基础镜像nginx + openJdk8, 使用2-1的dockerfile
   docker build -t nginx_jdk1.8:alpine .
2. 构建spring boot docker镜像
   首先编译 mvn package
   然后执行命令 docker build -t test/java_app .
3. 基于java镜像，构建前端镜像
   首先进行编译 npm install，
   之后执行 npm run build
   再执行docker build -t test/java_app_web .

4. 使用镜像进行测试

使用镜像执行:
docker run --name test_vue_app -p 80:80 -p 8080:8080 -d test/java_app_web
然后访问 http://127.0.0.1/index.html即可！