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

3 篇文章 0 订阅
2 篇文章 0 订阅

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即可!

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值