前后端打包部署，So easy！

心已赠人 2023-09-27 21:11 151阅读 0赞

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

不废话，直接开干！

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

## 1、nginx部署，前后端分别部署 ##

### 1.1、将前端项目进行打包 ###

在ideal中的Terminal，使用命令：`npm run build`。打包后会形成dist文件夹。

![format_png][]

### 1.2、打包后端代码 ###

在ideal的右侧侧边栏上找到【Gradle】或【maven】，进行后端项目打包。打包后的jar包在target下

![format_png 1][]

### 1.3、上传前后端包 ###

在linux中创建文件夹，如：server。用于保存前后端的包，上传打包好的前护端文件。

**例如：在/usr/local/server创建了server文件夹。**
    复制代码

![format_png 2][]

### 1.4、启动后端jar包 ###

`java -jar xxx.jar`启动项目后端项目

![format_png 3][]

### 1.5、配置nginx ###

找到nginx.conf，配置服务的反向代理。

![format_png 4][]

> **注：proxy\_pass动态代理后端服务地址，如果是本地则直接配置localhost，** **代理中名称（api）需要与前端公共的url地址名称保持一致，否则报错**

![format_png 5][]

### 1.6、启动nginx进行访问 ###

![format_png 6][]

![format_png 7][]

## 2、前后端合成一个包部署 ##

### 2.1 将前端进行打包 ###

前端打包可以通过vue ui或者直接命令打包

#### 2.2.1 vue ui打包 ####

在前端项目中运行`vue ui`进入vuejs页面

![format_png 8][]

![format_png 9][]

选择【任务】->选择【build】进入打包页面。

![format_png 10][]

选择【参数】进行环境，打包路径的选择

![format_png 11][]

> 注：输出路径是在后端项目中static目录下，文件名则由前端项目中的`module.exports`中的`publicPath`决定。
> 
> ![format_png 12][]

点击【运行】等待打包过程

![format_png 13][]

#### 2.2.2 命令npm run build打包 ####

在前端项目中运行`npm run build`命令生成dist包

![format_png 14][]

在后端程序的static中创建文件夹名（与publicPath）一致，然后将前端dist文件夹中的文件拷贝到后端创建的文件夹中。

![format_png 15][]

例如创建的manage文件夹

### 2.2 后端直接打成jar包 ###

maven或gradle打包

![format_png 16][]

### 2.3 服务器上运行jar包 ###

![format_png 17][]

### 2.4 访问服务 ###

服务器上需要开发端口或者关闭防火墙

![format_png 18][]

上述就是前后端部署的过程，只是最简单的方式。如果是测试环境等，则可以使用jekins等工具来进行部署，这样就不用手动打包。

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

作者：抢老婆酸奶的小肥仔  
链接：https://juejin.cn/post/7231354462685265977  
来源：稀土掘金  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[format_png]: https://img-blog.csdnimg.cn/img_convert/8e491de1dba9b6d4dbeccd4498bc75a4.webp?x-oss-process=image/format,png
[format_png 1]: https://img-blog.csdnimg.cn/img_convert/572a9793f408cf905ea6bf628f84ed6b.webp?x-oss-process=image/format,png
[format_png 2]: https://img-blog.csdnimg.cn/img_convert/32a0efb36f191d88244497de53d31d01.webp?x-oss-process=image/format,png
[format_png 3]: https://img-blog.csdnimg.cn/img_convert/57c0ca91135eb18a10a88431d3f3e737.webp?x-oss-process=image/format,png
[format_png 4]: https://img-blog.csdnimg.cn/img_convert/5ea4312143a231748df763e3a46f3481.webp?x-oss-process=image/format,png
[format_png 5]: https://img-blog.csdnimg.cn/img_convert/68971a23447710b5a9fc70f3f9f552d8.webp?x-oss-process=image/format,png
[format_png 6]: https://img-blog.csdnimg.cn/img_convert/979b01addda5c95bbb17544c043cd5a6.webp?x-oss-process=image/format,png
[format_png 7]: https://img-blog.csdnimg.cn/img_convert/ff12b49000dff9ed995103443f64b795.webp?x-oss-process=image/format,png
[format_png 8]: https://img-blog.csdnimg.cn/img_convert/015d85b06ad4670220d40ccc9a685c84.webp?x-oss-process=image/format,png
[format_png 9]: https://img-blog.csdnimg.cn/img_convert/7082d4a9ea5aab92b393ef2d3d675754.webp?x-oss-process=image/format,png
[format_png 10]: https://img-blog.csdnimg.cn/img_convert/2348ef7e7ebfc9da32c1639665add12e.webp?x-oss-process=image/format,png
[format_png 11]: https://img-blog.csdnimg.cn/img_convert/4c0d7bbf901230d369ec2720d19d099a.webp?x-oss-process=image/format,png
[format_png 12]: https://img-blog.csdnimg.cn/img_convert/c81fcb195037c0bc88ee6836eaf72689.webp?x-oss-process=image/format,png
[format_png 13]: https://img-blog.csdnimg.cn/img_convert/5e6612182f188ccd8a237a784b937eba.webp?x-oss-process=image/format,png
[format_png 14]: https://img-blog.csdnimg.cn/img_convert/ea58bfa9e1b570ac4788d3a27e87b1be.webp?x-oss-process=image/format,png
[format_png 15]: https://img-blog.csdnimg.cn/img_convert/33c10b484c5463744d7c88f61b965af0.webp?x-oss-process=image/format,png
[format_png 16]: https://img-blog.csdnimg.cn/img_convert/5ea6746dd505bd307c41808a959582ad.webp?x-oss-process=image/format,png
[format_png 17]: https://img-blog.csdnimg.cn/img_convert/3fb96234b8f4489105eb0963e61e440a.webp?x-oss-process=image/format,png
[format_png 18]: https://img-blog.csdnimg.cn/img_convert/8b16c10de4f66876610a7dfb3debd2ce.webp?x-oss-process=image/format,png