怎样将Vue+SpringBoot项目发布到阿里云服务器

最近做了一个项目，前端使用Vue+Ant design vue，后端使用springboot+mybatis；现在想将其部署到阿里云，记录过程如下：

一、项目介绍：

这是我自己的项目：

前端：web
后端：market

二、后端项目打包

通过maven插件打包后端部分，先点击clean ， 再点击package

完成后market下面会生成target文件夹，其中会有打包好的jar包

注意下面的.original结尾的不是，不要选错了。

三、后端项目发布
打开你自己的阿里云服务器，我的是轻量应用服务器。通过浏览器进入宝塔界面，找到文件导航栏，找到www文件夹

点开www文件夹，在其中新建一个文件夹，我的是market

点开market文件夹，新建两个文件夹，一个放后端项目，一个放前端项目

将刚刚打包好的jar包，上传到springboot文件夹：

准备数据库，我的是mysql数据库，安装在服务器上面的。你们根据自己项目的实际情况创建所需的数据库即可。

开放端口，打开阿里云网站，登录后，找到你自己的服务器，设置防火墙
开放后端项目所需的端口

在宝塔控制面板的安全界面开放同样的端口


最后，登录到服务器终端，我用的是宝塔远程工具：

进入springboot文件夹：cd /www/market/springboot
运行如下命令：nohup java -jar market-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod > logs.log &

nohup介绍：

其中“spring.profiles.active=prod”是为了在项目运行的时候指定使用的配置文件

“> logs.log”这个命令是将控制台打印的信息放到logs.log文件中

上述命令运行结束后，后端项目就启动成功了。

四、前端项目打包

找到Vue项目的package.json ， 右键选择如下图所示的，会出现可视化的npm界面



双击build-prod，将生成dist文件夹

五、前端项目发布

将文件上传到服务器上面的vue文件夹中：

安装Nginx，宝塔界面的软件管理界面可以一键安装

安装完成后打开右边的设置，点击配置修改，拉到最下面：

找到上述路径的位置：

新建一个配置文件，内容如下：

server{
  listen 80;
  server_name 8.141.165.233;
  
  location / {
    alias /www/market/vue/;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}
1
2
3
4
5
6
7
8
9
10

其中server_name为服务器的外网IP ， alias为上传的Vue项目地址 ， try_files是为了解决空白页的问题

配置文件创建完成后，记得重启Nginx

最后就可以访问项目了，浏览器输入你的服务器的公网ip，我的是
http://8.141.165.233/

运行界面如下：