1.前言本文将使用docker-compose将前端Vue项目部署到Nginx，运行后端SpringBoot项目服务器基础环境：CentOS7。3DokcerMySQL2.docker-compose部署Vue+SpringBoot前后端分离项目的整体项目配置结构，不影响原项目结构，所以所有的配置文件都提出来存放在docker文件夹，但是注意docker-compose文件一定要放在项目一般的根目录下哦！1.添加需要的后端配置文件api-Dockerfile#指定基础镜像FROMmaven:3.5.4-jdk-8#维护者信息MAINTAINERzhengqing"960869719@qq.com"RUNecho"--------------------api环境配置--------------------》#exposeport9101EXPOSE9101#SetenvironmentcodeUTF-8ENVLANGC.UTF-8#run-配置容器使其可执行#ENTRYPOINT["java","-jar","app.jar","--spring.profiles.active=dev"]2.新建添加配置前端vueweb-Dockerfile、nginx.conf、.dockerignoreweb-Dockerfile所需文件：安装依赖，打包生成运行访问所需的资源文件，然后存放在nginx下的html目录下运行#nodeimageFROMnode:latestasbuild-stage#maintainerinformationMAINTAINERzhengqing"960869719@qq.com"RUNecho"--------------------web环境配置--------------------》#指定下一个工作路径为/app-类似于cd命令WORKDIR/app#将前端项目复制到app目录COPY./code-web.#设置淘宝npm镜像RUNnpminstall-gcnpm--registry=https://registry.npm.taobao.org#安装依赖RUNcnpminstall#打包-目的：丢到nginx下运行RUNcnpmrunbuild:prod#前端项目运行命令#CMD["npm","run","start"]#==========================上图：npm打包下图：nginx运行=============================#nginxMirrorFROMnginx:1.15.3-alpineasproduction-stage#维护者信息MAINTAINERzhengqing"960869719@qq.com"#删除nginx的default.conf文件和nginx配置文件containerRUNrm/etc/nginx/conf.d/default.confRUNrm/etc/nginx/nginx.conf#复制宿主机的nginx.conf文件到nginx容器的/etc/nginx文件夹下COPY./docker/web/nginx.conf/etc/nginx/#Copy前端vue项目打包后生成的文件在nginx下运行COPY--from=build-stage/app/dist/usr/share/nginx/html#Exposeport8101EXPOSE8101#注意：CMD与RUN不同，CMD用于指定容器启动时要执行的命令，而RUN用于指定镜像构建时要执行的命令。#RUN指令创建的中间镜像会被缓存起来，下次构建时会用到。如果不想使用这些缓存镜像，可以在构建时指定--no-cache参数，如：dockerbuild--no-cache#使用daemonoff在前台运行nginx，保证镜像不会退出CMD["nginx","-g","daemonoff;"]nginx.confusernginx;worker_processes1;error_log/var/log/nginx/error.logwarn;pid/var/run/nginx.pid;events{worker_connections1024;}http{include/etc/nginx/mime.types;default_type应用程序/八位字节流；log_formatmain'$remote_addr-$remote_user[$time_local]"$request"''$status$body_bytes_sent"$http_referer"''"$http_user_agent""$http_x_forwarded_for"';access_log/var/log/nginx/access.logmain;发送文件；keepalive_timeout65；#包括/etc/nginx/conf.d/*.conf;服务器{听8101;字符集utf-8；server_namewww.zhengqing520.com;#服务器地址或绑定域名#start----------------------------------------------------------------------------------------地点/{根/usr/share/nginx/html；try_files$uri$uri//index.html;}＃结尾------------------------------------------------------------------error_page500502503504/50x.html;location=/50x.html{root/usr/share/nginx/html;}}}.dockerignore作用：传递给docker引擎时忽略不需要的文件或文件夹/code-web/node_modules3,docker-compose.yml作用：安排容器的执行顺序，比dockerrunversion:'3'services:api:#backendspringbootcontainercontainer_name:xiao一个一个运行项目方便-xiao-su-api#容器的名字是'xiao-xiao-su-api'restart:always#重启策略：总是在容器退出时重启容器build:context:./#指定上下文根目录，然后以这个目录为标准指定Dockerfiledockerfile:./docker/api-Dockerfileworking_dir:/app#设置工作目录为容器环境中的app文件夹：TZ:Asia/Shanghaivolumes:#Mountfiles-./code-api:/app#将宿主机的code-api文件夹（java代码）映射到容器中的app文件夹-./logs/:/app/log#将容器生成的日志映射到宿主机的logs文件夹ports:#映射端口-"9101:9101"command:mvncleanspring-boot:run-Dspring-boot.run.profiles=dev'-Dmaven.test.skip=true'#创建容器后执行命令运行springboot项目web:#前端节点容器（在nginxVue项目中运行）container_name:xiao-xiao-su-web#容器名为'xiao-xiao-su-web'restart:always#重启策略：容器退出时总是重启容器build:context:./#指定上下文根目录，然后使用以目录为准指定Dockerfiledockerfile:docker/web/web-Dockerfileenvironment:TZ:Asia/Shanghaiports:-"8101:8101"#映射端口depends_on:#取决于api容器，web依赖容器启动后容器才会可用Startable-api3.服务器运行将项目丢到服务器上，进入项目根目录，一条一条执行以下命令#1.构建镜像docker-composebuild#2.运行servicedocker-composeup-d构建一次会很慢。可以坐下来喝杯凉茶~4.访问测试前端页面：http://www.zhengqing520.com:8101/xiao-xiao-su/dashboard后台界面：http://www.zhengqing520.com:9101/swagger-ui.html#5.总结下部署vue项目：npm拉取项目依赖node_modules->打包生成dist文件夹->复制到nginx运行部署springboot项目：小小编这里使用maven命令运行，其次，也可以通过mvninstall-Dmaven.test.skip=true->cdtarget->java-jar***.jar通过docker-compose来安排执行顺序，①后端api容器②前端web容器放在服务器下，构建镜像通过docker-composebuild->docker-composeup-d启动应用服务关于Dockerfile的命令理解，这里贴一下网上一个有趣的图吧案例demo的源码https://github.com/zhengqingya/xiao-xiao-su
