前段时间，有小伙伴问我，前后端打包怎么部署？当时直接跟他说一遍，过后想想还是写下来，以后可以直接给到需要的小伙伴。
不废话，直接开干！
前后端打包，可分为：前后端分离部署，前后端合成一个包部署。下面我们这两种方式分别说下：
1、nginx部署，前后端分别部署
1.1、将前端项目进行打包
在ideal中的Terminal，使用命令：npm run build。打包后会形成dist文件夹。
1.2、打包后端代码
在ideal的右侧侧边栏上找到【Gradle】或【maven】，进行后端项目打包。打包后的jar包在target下
1.3、上传前后端包
在linux中创建文件夹，如：server。用于保存前后端的包，上传打包好的前护端文件。
**例如：在/usr/local/server创建了server文件夹。**
复制代码
1.4、启动后端jar包
java -jar xxx.jar启动项目后端项目
1.5、配置nginx
找到nginx.conf，配置服务的反向代理。
注：proxy_pass动态代理后端服务地址，如果是本地则直接配置localhost， 代理中名称（api）需要与前端公共的url地址名称保持一致，否则报错
1.6、启动nginx进行访问
2、前后端合成一个包部署
2.1 将前端进行打包
前端打包可以通过vue ui或者直接命令打包
2.2.1 vue ui打包
在前端项目中运行vue ui进入vuejs页面
选择【任务】->选择【build】进入打包页面。
选择【参数】进行环境，打包路径的选择
注：输出路径是在后端项目中static目录下，文件名则由前端项目中的
module.exports中的publicPath决定。
点击【运行】等待打包过程
2.2.2 命令npm run build打包
在前端项目中运行npm run build命令生成dist包
在后端程序的static中创建文件夹名（与publicPath）一致，然后将前端dist文件夹中的文件拷贝到后端创建的文件夹中。
例如创建的manage文件夹
2.2 后端直接打成jar包
maven或gradle打包
2.3 服务器上运行jar包
2.4 访问服务
服务器上需要开发端口或者关闭防火墙
上述就是前后端部署的过程，只是最简单的方式。如果是测试环境等，则可以使用jekins等工具来进行部署，这样就不用手动打包。
好了，今天就分享到这，希望对大家有帮助。
作者：抢老婆酸奶的小肥仔
链接：https://juejin.cn/post/7231354462685265977
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。