以后端为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路径。