宝塔部署前(Vue)后(Java)端分离项目

㼯銘

已于 2023-11-25 20:51:31 修改

阅读量1.5k

点赞数 18

文章标签： tomcat 阿里云 linux web vue maven nginx

于 2023-11-25 20:41:39 首次发布

本文链接：https://blog.csdn.net/qq_62479388/article/details/134616546

版权

前言

博主是一名在校本科生，弄服务器是为了学技术和为作业加分。。。由于很多地方都会用到服务器部署web项目，且中间时间间隔又很长，导致这两次几乎都是重新学习，去找各种问题的解决方法，今天又苦于各种小问题浪费了很多时间（真的很折磨人），所以写一篇博客记录一下可以成功的步骤，以便下次可以直接按步骤部署 ^_^

前置条件

1.一台安装了宝塔的服务器，且宝塔和服务器都配置了安全组端口。

2.Vue前端项目运行npm run build导出的dist文件夹。

3.Java后端项目构建的war包。

4.安装了Xftp7。

环境配置

1.登录阿里云，点击左上方的三条横线，再点击热门产品推荐下的云服务器ESC，跳转后点击实例，再点击要部署的服务器的实例ID,最终跳转到如下页面。

2.点击远程连接，再点击通过Workbench远程连接，进入到Linux终端，输入bt,再输入14，看到如下页面。

3.打开上述圈一中的链接，圈二是宝塔账号与密码，用其登录刚才打开的宝塔，来到如下页面。

4.要想服务器能运行自己的项目，首要的就是服务器拥有项目需要的环境，诸如JDK，Maven，jre,Tomcat，数据库等，所以就要在自己能记住的地方新建需要用到的相关配置文件夹，再利用Xftp将本地的文件夹拖到服务器对应的目录下。

5.导入需要配置的环境过后，双击根目录下的etc中的profile（也可以在Workbench下执行vim /etc/profile来打开profile），这个文件是用来配置环境变量的，类似于Windows的高级系统设置里的那部分，再将需要用到的环境变量加到下图位置，配置后记得在Workbench下执行一下source /etc/profile使修改生效。

6.成功配置环境过后在Workbench输入xxx -version是能看到自己的路径及版本相关信息的。

7.还有一点很重要的是添加数据库，在宝塔中点击左侧数据库（这需要在宝塔中安装数据库，这里我没有太在意版本，也不知道有没有一天他会给我一刀o_O），然后添加数据库，再上传并导入相应的sql文件，如果你部署的是别人的项目，记得将红框位置的root密码改成项目用到的数据库密码，这又是我踩过的坑O_o。

项目部署

后端部署

1.用Xftp直接将tomcat整个拖到服务器文件夹下，这样就可以不使用宝塔提供的tomcat，自己的项目是用什么版本开发的就拖哪个版本，虽然有些版本可以兼容，但和版本相关的一切问题都要小心，别问我怎么知道的O_o，还有就是文件夹名字别取那么长o_O 。

2.再将准备好的war文件拖到上一步拖进去的tomcat文件夹中webapps目录下，有一个特别重要的点就是你的war包的名字就是tomcat解析出来的项目名字，所以导出包的时候一定要注意包名，这也是血的教训O_o O_o。

3.在Workbench中cd到tomcat的bin目录下，ls一下列出所有文件，不出意外的话你的所有.sh文件都是白的，代表你没有执行权限，只需要执行一下chmod u+x *.sh就可以了，执行后再ls相信你就能看到草原色的.sh文件了^_^。

4.一般tomcat的重启就是在上述目录下先执行./shutdown.sh关闭tomcat，再执行./startup.sh启动就行了，tomcat启动会自动将war包解压成能用的项目，这个时候后端项目就已经能用了。

前端部署

1.点击左侧网站，再点击添加站点，域名直接用自己的ip就好，推荐玩熟练了再改别的名字，不然就是无休止的404......后面的都不用改，直接提交就行。

2.利用xftp将dist文件夹拖到刚刚生成的网站目录下，再点击网站，按下图序号操作。

3.其实到第二步项目就已经部署成功了，但博主我啊，后面还遇到了一堆问题呢o_O，基本都是404，就在这里做一下笔记：一般是不需要去调网站的配置文件以及Nginx的配置的（因为我调了也没用），在找了csdn上99%的宝塔部署Vue项目博客后都没有找到答案，最后还是我自己摸索出来的......就是当我按照其他博主的步骤一步一步来最后还是没有跑出来刚部署上去的项目，更离谱的是出来的是我已经删了的以前部署的项目......关键的来了，我找到软件商店下的Nginx，点了一下重载配置，直接就好了......（历经磨难o_O）