如果你想有更好的阅读效果，欢迎访问我的博客。
在入手了阿里云的轻量服务器之后， 因为本人做前端时一直会和后端的同学进行一个联调， 但是分离两地之后联调变得十分麻烦， 于是想到干脆将项目部署到公网上，于是就有了这篇文章。因为我是服务器和linux的小白，所以看了不少博客，翻了不少车，在这篇文章将会有所提及。在开始之前，非常感谢前辈提供的文章让我有所参考。
前期环境准备
一个云服务器
本人的服务器是阿里云的轻量服务器， 最低配置， 一年100多块钱的那种， 系统镜像安装了Centos， 应用镜像安装 宝塔面板。具体的配置可以参考这篇文章前半部分。
Nodejs
进入宝塔面板后， 点击 软件商店 ，搜索 Node。
可以任意下载一个，我是下载了Node.js版本管理器， 在下载完成之后， 打开终端进行测试。注意你的前端项目对应的Node版本，必须进行一个适配，太新太旧都不行，我的前端项目在node 16版本下运行良好。
Nginx
在软件商店中搜索nginx
下载第一个就好， Nginx主要是用来部署前端的， 后端我的项目用的tomcat。
JDK
在软件商店中搜索java
下载第一个就好， 这个下了直接jdk、tomcat一网打尽。不得不说宝塔图形化界面真的好用。
Mysql + 远端连接的Navicat
具体教程可以参考这篇文章
这时候你要在防火墙放行你的第一个port，也就是3306端口，记得宝塔面板和轻量服务器都要放行。下图为宝塔放行界面。
其实只要保证你的服务器端mysql数据库可以被远端IP自由访问，其中%代表权限是所有用户。
在配置好后进行一个测试：
$ mysql -h 198.172.1.1 -P 3306 -u root -p123
其中-h代表host，-P代表port, -u代表user， -p代表你的数据库密码，如果连接成功的话，则可以在navicat那里进行一个远程连接，个人觉得用navicat更加习惯。
部署前端项目
前端的部署思路：将前端项目上传到云服务器后，在服务器端使用npm指令生成打包文件，然后使用nginx进行代理
基本配置
首先，在本地更改请求基路径，这个事你后端的部署端口而定， 一般为服务器IP:后端项目端口。这个可以先在配完后端后再回过头来改。
在云服务器上新建文件夹用来存放前端vue项目，在宝塔就是点击文件， 然后找个合适的地方新建文件夹。注意在拷贝的时候，把一些无关紧要的文件夹去掉，比如node_modules、测试文件, 编辑器的环境配置文件，只保留必要的文件夹。比如下图箭头标出来的文件都可以去掉，这样可以有效控制文件上传数量和大小。
接下来，打开终端（当然在使用npm前我极力推荐你更改镜像源为淘宝镜像源， 或者干脆使用yarn）
$ npm install
or
$ yarn
打包项目
接下来， 我们来对前端项目进行一个打包，需要注意的是，其实你完全可以先打包完之后传到服务器内，完全随你喜欢。
$ npm run build
在这一步结束后， 我们得到我们的打包后的文件夹dist， 记住每次更新代码或者依赖都得重新打包。记住dist的路径，接下来我们开始配置nginx。
配置nginx
在软件商店打开nginx应用，点击修改配置。
第一步修改user权限为root， 我理解就是授予了nginx最高访问文件的权限。
第二步修改server配置项，主要修改以下配置项：
listen即前端项目运行的端口, 这是我们需要去防火墙去放行的第二个port，和当时的Mysql操作一样，直接去轻量服务器界面，宝塔界面都配置一遍即可; server_name即host，你填上公网IP或者你已经备案过的域名即可;root即dist的路径。
配置完成后，点击服务，重载配置（或重启），在浏览器输入IP:8081看看有没有部署上去了。
tips：有时候其实是已经部署上去了，但是因为浏览器缓存所以没加载出来，狂按f5+ctrl看看效果😊。
部署后端项目
后端的部署思路是在本地使用maven进行项目打包，然后直接将打包文件上传到服务器中
基本配置
在本地用idea打开后端项目，idea会开始自动下载一些环境依赖。当然我们也得做些基本的配置，如jdk以及maven
打开setting, 选择maven, 将maven路径指向本地已经载好的maven（没载的话快去载!）
然后jdk也得配置下
这时候看看本地是否已经可以跑成功了
接下来，开始更改本地的一些配置。
第一步，打开application.yml修改mysql配置为远程服务器的IP，记得密码也得保持一致。
第二步， 注意server的端口号， 比如你配的端口是8080，那在云服务器运行时也需要放行8080端口（老规矩，两个都得放行哈）。同时你的端口号也意味着前端项目的请求路径该怎么书写。
第三步， 注意跨域问题, 因为你的host进行了变更， 因此意味着你需要放行你前端的请求， 在测试时我建议直接允许所有IP跨域。如下图@CrossOrigin的配置。值得一提的是，你的springboot版本必须到达2.6.2以上，才可以使用originPatterns参数。
打包
接下来开始进行打包。
打开idea右侧的maven面板, 点击clean， 随后点击package。
在生成的target文件夹里， 即可找到打包的 jar文件。
将其上传到云服务器中
打开终端，输入
$ nohup java -jar linface_back-0.0.1-SNAPSHOT.jar
使用nohup指令，即使关闭了终端java也将照常运行。
打开浏览器，我们随便测试一个API, 输入 IP:后端部署端口/你的后端的任意API路径：
部署成功！！
总结
这一次的部署花费了不少时间， 我觉得大家在部署前最好对前后端项目的项目结构有个大体了解， linux指令也可以稍微学学， nginx的配置文件我也看不懂， 在网上东平西凑地浪费了不少时间。
