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

要实现一个大型的前后端分离项目,可以使用Spring BootVue 3进行开发。首先,需要设置好开发环境,包括安装Java JDK和Node.js,并配置好相应的环境变量。 接下来,可以使用Spring Initializr初始化一个Spring Boot项目,选择相应的依赖项,如Spring Web和Spring Data JPA。然后,可以使用Maven构建工具导入项目,并进行基本的配置,如数据库连接和端口号设置。 在前端方面,可以使用Vue CLI创建一个Vue 3项目,安装相应的依赖,如Vue Router和axios。可以使用Vue Router进行页面的路由管理,axios用于进行前后端的数据交互。 在开发过程中,可以将前后端分别进行开发,使用后端提供的接口进行数据交互。可以将后端代码按照功能模块划分,使用MVC的模式进行开发。前端可以使用组件化的方式进行开发,将页面划分为多个组件,方便进行复用和维护。 在开发过程中,可以使用Git进行代码管理,将代码进行版本控制。可以使用IDE进行开发,如IntelliJ IDEA和Visual Studio Code。可以使用Postman进行接口测试,确保后端接口的正确性。 在项目完成后,可以进行部署。可以使用Docker进行容器化部署,将项目打包为一个镜像,并进行部署。可以使用Nginx作为反向代理服务器,将前端静态资源和后端接口进行分发。 最后,可以提供一个PDF下载,包括整个项目的代码和相关文档,供他人学习和参考。可以将项目代码上传至GitHub或其他代码托管平台,并提供一个可下载的链接。 以上是使用Spring BootVue 3进行实战开发的一般步骤和流程。具体的实施细节需要根据项目需求和实际情况进行调整和完善。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值