手把手教你Docker+nginx部署Springboot+vue前后端分离项目

我们点击任意一个链接或者按钮或者刷新界面，这时候出现了404：

刷新之后nginx就找不到路由了，这是为啥，得和你们科普一下，vue项目的入口是index.html文件，nginx路由的时候都必须要先经过这个文件，所以我们得给nginx定义一下规则，让它匹配不到资源路径的时候，先去读取index.html，然后再路由。所以我们配置一下nginx.conf文件。具体操作就是找到location /,添加上一行代码try_files $uri $uri/ /index.html last;如下：

• nginx-1.18.0/conf/nginx.conf

location / {

root   html;

try_files $uri $uri/ /index.html last;

index  index.html index.htm;

}

这一行代码是什么意思呢？try_files的语法规则：格式1：try_files file … uri，表示按指定的file顺序查找存在的文件，并使用第一个找到的文件进行请求处理，last表示匹配不到就内部直接匹配最后一个。

重启nginx之后，链接再刷新都正常啦。但是没有数据，所以我们去部署一下后端。windows环境nginx的重启我一般都是打开任务管理器直接干掉nginx进程，然后再重新双击的~~

1.2、后端

后端的打包就简单多了，应该大家都挺熟悉的，注意配置redis、mysql的链接密码啥的，然后执行命令，本机测试，redis和mysql我都已经提前安装好的了，sql文件也在vueblog-java的resources目录下。

对了，pom.xml文件里面，spring-boot-maven-plugin之前注释掉了，现在一定要打开。不然执行jar会找不到主类。

• pom.xml

执行打包命令：

跳过测试打包

mvn clean package -Dmaven.test.skip=true

得到target下的vueblog-0.0.1-SNAPSHOT.jar，然后再执行命令

java -jar vueblog-0.0.1-SNAPSHOT.jar --spring.profiles.active=default

后端上线之后，我们再访问下前端，发现已经可以正常浏览网页啦！spring.profiles.active表示指定环境配置文件。 

2、linux环境

linux环境部署相对复杂一点，因为我们还要部署redis、mysql等。之前我发布过一个视频，是部署传统的博客项目eblog，采用的是docker容器，但是我们没有docker compose进行编排，这次我们使用docker compose来编排我们的服务，一起性搞定部署。

二话不说，我们先来安装一下docker和docker compose，对于docker知识还不是特别懂的同学，建议自行去补习补习哈。