前后端分离的springboot+vue项目部署到云服务器（利用nginx解决前端跨域问题）

最新推荐文章于 2024-05-28 19:58:40 发布

Sonder_ha

最新推荐文章于 2024-05-28 19:58:40 发布

阅读量3.3k

点赞数 5

文章标签：前端 vue.js spring boot nginx 服务器

本文链接：https://blog.csdn.net/qq_60747766/article/details/126663831

版权

前段时间软件实训完成了一个springboot+vue的网页项目，在部署到云服务器时遇到了一些难题，现在将部署成功的过程记录一下。参考视频：up主CodeSheep前后端分离式项目实战部署

前端用的是WebStorm 2021.1.3版，后端用的是IDEA 2021.1.2版

服务器要求已安装nginx和待部署项目所需的各种服务和环境（如MySQL，jdk）

记得在服务器安全组中开放项目用到的全部端口（如MySQL的3306端口等）

如果数据库有访问限制记得把服务器的ip添加到访问白名单

1.前端代码打包

用WebStorm打开vue项目，进入主界面，点击右上角的Edit Configurations

点击 + 号选中npm（此处如果没有npm则需要自行下载nodejs，可参考其他教程）

将配置改成下图所示，package manager一栏为自己下载的npm路径，点击OK

在右上角选中build，点击右边的绿色三角运行（也可在最下方Terminal界面输入npm run build）

此时打包开始，出现下图所示即为打包成功

打包完成后会出现一个dist文件夹，这就是我们需要上传到服务器的前端内容，点击右键选中Open In—Explorer即可在文件管理器中打开其所在路径，留着待用

2.后端代码打包

打开IDEA界面，点击右边的maven

依次双击运行上图三种命令（记得一个命令运行完成后再双击下一个命令）

全部运行完成后出现下图窗口

查看文件目录会发现多出了一个target目录，其中的xxx.jar即为我们要上传的jar包，同样右击点击Open In — Explorer可在文件管理器中打开

3.前端部署

在服务器中建立一个文件夹来存放文件，可利用WinSCP（简单）、Xshell（用linux系统的mkdir命令创建）等一系列工具进行创建

此处我用的是WinSCP，创建的文件夹路径为/workspace/3版本/

将本地之前打包的dist文件夹上传至服务器中刚创建的文件夹中

（如果担心dist中的一些隐藏文件无法上传的话可以先将dist文件压缩后再上传并解压缩，由于WinSCP并不直接提供解压缩命令，所以此处并不演示，但个人亲身实践不压缩直接上传并没有出现问题）

WinSCP可像文件管理器中的操作一样直接拖拽上传，缺点是WinSCP上传速度和稳定性较差

更改nginx配置文件

服务器安装的nginx配置文件路径一般为/usr/local/nginx/conf

找到nginx.conf，双击编辑

将前两行改成下图所示

同时更改如图位置server中location的root 路径，改为自己服务器上dist文件夹所在的路径

保存配置文件

此时再开启nginx服务：

打开Xshell连接自己的服务器

在根目录输入如下命令

/usr/local/nginx/sbin/nginx

nginx服务启动成功

此时就能够通过服务器的域名来访问前端页面了

但此时输入账号密码点击登录时，控制台中会出现报错，这是因为我们还未部署后端。

4.后端部署

和前端部署一样，将本地的jar包上传至服务器，记住jar包在服务器中的位置

打开Xshell进入到jar包所在位置（cd 路径）

同时也可以利用ll（两个小写L）命令来查看当前文件夹的所有文件详情

如图已经进入到了存放jar包的位置并且看到了jar包的详细信息

利用nohup java -jar + jar包名称 + &的命令来运行jar包

（nohup的意思是no hang up，用于在系统后台不挂断地运行命令，退出终端不会影响程序的运行）

输入jar包名称时输入前几个字母再按tab键即可自动补全名称，记得最后要加空格和&

此时后端便成功部署。

5.nginx解决跨域

前后端部署完成，但通过域名访问网站时仍然会出现错误的情况，前端不能关联到后端，这是因为产生了跨域问题。

我们可以通过修改nginx的配置文件来解决。

参照前端部署的步骤，打开nginx.conf文件

在之前更改的location位置下方添加所示代码

location /api/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://119.xx.xxx.xxx:8002/;
        }

最后http://位置填入的是自己的服务器名称：后端项目的端口，我的端口为8002，实际端口看自己的项目代码

点击保存

此时我们还需要重载nginx服务

同样进入nginx的sbin目录输入./nginx -s reload