构建Spring boot+vue+nginx的Docker镜像
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构建镜像
- 构建基础镜像nginx + openJdk8, 使用2-1的dockerfile
docker build -t nginx_jdk1.8:alpine . - 构建spring boot docker镜像
首先编译 mvn package
然后执行命令 docker build -t test/java_app . - 基于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即可!