一图胜千言

目标

想将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

检查页面效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PtmF1ZNA-1585646210136)(https://oscimg.oschina.net/oscnet/5b09a1ba1d1febefd810126e55b58750ed2.jpg “spring-boot-vuejs-mongo-docker效果图”)]

GitHub源代码

spring-boot-vuejs-mongo–docker
vuejs-nginx-docker

参考

docker run

Docker中Spring boot+VueJS+MongoDB的前后端分离哲学摔跤相关推荐

记一次Spring boot 和Vue的前后端分离的入门培训
记一次Spring boot 和Vue的前后端分离的入门培训由于公司之前是写C#的,现在要转 Java分布式 + vue,所以进行一次前后端的简单培训. 前端工具和环境: Node.js V10.1 ...
基于Spring boot + Mybatis +Netty 实现前后端分离的聊天App，部署到阿里云线上服务器...
前后端分离Spring boot 项目部署了解前后端分离项目配置云服务器 java maven tomcat nginx mysql 部署后端项目部署前端项目部署Java环境 1.下载JDK软 ...
鸿鹄工程项目管理系统 Spring Cloud+Spring Boot+Mybatis+Vue+ElementUI+前后端分离构建工程项目管理系统
鸿鹄工程项目管理系统 Spring Cloud+Spring Boot+Mybatis+Vue+ElementUI+前后端分离构建工程项目管理系统 1. 项目背景一.随着公司的快速发展,企业人员和经 ...
Spring Boot + Vue.js 实现前后端分离（附源码）
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章作者: 梁小生0101 链接:juejin.im/post/5c6 ...
Spring Boot + Vue + Shiro 实现前后端分离、权限控制
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试资料来源:http://sina.lt/gauR 本文总结自实习中对项 ...
Spring Boot + Vue + Shiro 实现前后端分离、权限控制 (附源码)
点击上方[全栈开发者社区]→右上角[...]→[设为星标⭐] 原项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Free ...
Java Spring boot element ui activiti前后端分离，流程审批，权限管理框架
基于react ant design pro typescript 技术框架已经重磅推出预览地址系统介绍是什么? 使用springboot,activiti,mybatis,vue elemen ...
VUE+Spring Boot整合MyBatis实现前后端分离项目壁纸网站
目录前言一.项目运行二.环境需要三.技术栈四.项目说明五.后端代码前言每次换桌面,壁纸总是不好找,搜索图片得不到好的索引与反馈,很难找到自己喜欢的壁纸,而壁纸网站可以免去我们去寻找壁纸 ...
企业电子招标采购系统源码Spring Cloud + Spring Boot + MybatisPlus + Redis + Layui + 前后端分离 + 二次开发
项目说明随着公司的快速发展,企业人员和经营规模不断壮大,公司对内部招采管理的提升提出了更高的要求.在企业里建立一个公平.公开.公正的采购环境,最大限度控制采购成本至关重要.符合国家电子招投标法律法规 ...

Docker中Spring boot+VueJS+MongoDB的前后端分离哲学摔跤