如何在服务器上部署一个前后端分离的项目并解决跨域问题

以后端为spring-boot与前台为vue的项目举例。

一.给服务器安装相应的需求环境

1.安装jdk

安装方式可自行百度，推荐使用yum安装，安装完成后配置环境即可。

2.安装nginx。代理服务器，安装方式可自行百度，yum应该也是可以安装的。

二.部署后台代码

1.这里采用IDEA作为开发工具，只要通过maven的打包操作package在target那里找到jar包即可。

点击package

复制那个jar包。

2.将jar包复制到服务器上任意目录。

3.打开服务器控制终端，cd到jar包所在目录。

运行java -jar XXXXXX.jar 即可。

当然这样是没法进行另外的操作除非退出来ctrl+C，可以加个停止符号。

java -jar XXXXXX.jar &即可。

三.运行sql文件。

在服务器上安装并启动mysql服务，具体可自行百度。

然后进入mysql，将项目的sql文件放入服务器并运行即可。

需要注意的是。mysql在linux下和windows下有所区别，它的数据库名是区分大小写的，记住你的数据库名要和你后台代码中alidruid的jdbc配置要完全相同。

四.部署前端项目。

1.先进入本地的前端项目，打开config/index.js

配置assetsPublicPath这个属性值为‘/’注意这个属性值要出现两次，需要更改两次。

同时记住dev配置下的proxyTable属性，即后端接口端口的别名，我这里是/api/

2.这里是webpack打包的，打开控制台。

cd到本地的项目目录下。

运行npm run build。

在本地前端目录下可以看到多了一个dist文件夹，复制它。

3.把dist文件夹复制到服务器上的任意目录。

4.配置nginx配置使其指向你前端的端口。

A.cd进nginx的配置文件处

将nginx.conf和nginx.conf.default两个文件内的配置内容给注释了，即每行前面加#，使用vim。

然后在conf.d下面新建一个配置文件。

如图所示，vi这个文件。

输入如图所示的文件配置

其中要注意的是。listen后面跟上你所部署的前端端口。

location后面配置上你所部署的前端静态文件后面所在的具体目录注意root 后面的属性一定要是dist的绝对路径。

后面的一堆addheader可以不加。最后还有个location  /api 这里的api要看你后端接口的路径具体别名。proxy_pass要看你后台的端口号。

这里一定要加，不然前端无法调用后台的相应接口。

这里是在用nginx进行反向代理解决跨域问题。

五.访问部署好的网站。

将原来本地访问的localhost改成你的服务器的IP地址名即可。

如果出现了404的问题，根本原因肯定是跨域问题，即nginx没有配置好。

如果出现了403的问题，根本原因肯定是config.js的问题或者nginx的location里没有指向正确的dist路径。