Hi,大家好，我是抢老婆酸奶的小肥仔。

前段时间，有小伙伴问我，前后端打包怎么部署？当时直接跟他说一遍，过后想想还是写下来，以后可以直接给到需要的小伙伴。

不废话，直接开干！

前后端打包，可分为：前后端分离部署，前后端合成一个包部署。下面我们这两种方式分别说下：

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等工具来进行部署，这样就不用手动打包。

好了，今天就分享到这，希望对大家有帮助。