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

项目回顾

之前我录制过一个视频，现在也已经8万多播放量了呀，哈哈，感谢大家的认可，大家可以关注我的B站，名称叫MarkerHub，公众号同名。

其实我觉得我已经录制得很详细的了，可能大家水平不一，有些人觉得我很多地方讲清楚，还有就是有些人按照视频同步做实验，还一路踩坑，这个我也预料不到哈哈。说实话，我自己做实验的过程还是挺顺利的。

有些同学们提出个问题，不知道如何打包部署Vue前后端分离项目。那么今天，我们就来学习一下，如何部署简单快捷部署我们的vueblog项目！

这里给出vueblog项目的视频地址：

名称：[实战]基于SpringBoot+Vue开发的前后端分离博客项目完整教学（vueblog）

视频：https://www.bilibili.com/video/BV1PQ4y1P7hZ/

文档：https://juejin.im/post/6844903823966732302

线上演示：http://www.markerhub.com:8084/blogs

配套部署视频

• 视频：https://www.bilibili.com/video/BV17A411E7aE/

• 文档：https://juejin.im/post/6886061338804617229/

工具

• xshell 6 绿色破解版：关注公众号：JavaCat，回复xshell获取

• Navicat 11 简体中文版：关注公众号：JavaCat，回复navicat获取

上线前准备

这里我们同步演示怎么部署到win环境和linux（centos7）系统中，前端服务器采用nginx部署，并使用docker统一管理前后端服务器。

所以我们会用到：

• nginx

• docker compose

希望你看视频前有点基础哈，当然了，这次部署比较简单，不需要很精通，一般看了我的视频应该都能部署成功的哈。

话不多说，直接上手！别忘了给我一个一键三联哈，顺便关注我B站，感谢！

1、win环境

win环境我就用本机来演示了，我们需要分别打包前后端，前后端打包都是一条命令即可，只不过我们打包之前注意需要配置好线上的环境参数等。

1.1、前端

先来配置一下后端的调用路径，因为现在部署在本地localhost，所以在axios.js中，我们配置好链接，因为等下后端部署也是本机，所以我这里直接这样配置就好了，如下：

• src\axios.js

axios.defaults.baseURL = “http://localhost:8081”

上面配置的就是前端访问后端接口的服务。然后前端部署还需要考虑一个问题：打包之后项目资源引用路径，比如我们打包后链接是否需要带项目名称等。按照Vue官方的部署说明，我们添加一个vue.config.js文件，

• vueblog-vue/vue.config.js

module.exports = {

publicPath: ‘/’

}

当然了，publicPath默认其实是空的，也就是publicPath: ‘’，两个效果貌似其实是一样的，哈哈哈ÿ