Spring和Vue前后端分离项目部署到Ubuntu云服务器具体流程（非docker方式安装）

peaken_cp

已于 2022-04-14 14:31:14 修改

阅读量1.8k

点赞数 1

分类专栏： web服务学习笔记文章标签： spring vue linux

于 2022-04-14 14:30:25 首次发布

本文链接：https://blog.csdn.net/peaken_cp/article/details/124150406

版权

web服务学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、后端项目部署
二、前端项目部署
总结

当下，以spring和vue搭建前后端服务的架构比较流行，笔者基于博客、哔站等资料整理了一下将前后端分离的项目部署到Ubuntu服务器（本次测试是本部署到本机的虚拟机服务器）上的详细流程，供大家参考。

一、后端项目部署

后端项目部署相对简单，难点是把该服务所依赖的一些工具（如java、mysql、redis等等）部署到远端服务器，部署有直接部署和基于docker的部署，直接部署的话网上教程都比较多，基于docker部署是个人比较推荐的，通过创建docker的配置文件，这部分内容等笔者再研究研究后跟大家分享。

项目所依赖的工具类部署完成以后，可以将本地的后端项目部署打包成jar包，然后将jar包上传到服务器。在IDEA中，打包的方式比较简单，maven插件选择package即可。运行完成以后，会在target目录下生成一个类似于xxxx-0.0.1-SNAPSHOT.jar的jar包。
在这里插入图片描述
也可以通过命令行进行打包，同样会生成可运行的jar文件。

mvn package

通过sftp将文件传输到云端服务器，这里推荐一款好用的服务器链接工具Electrem，同时支持ssh和sftp，使用简单，操作人性化。

上传完成后，cd到对应的文件夹下，使用nohup命令运行该jar包。

nohup java -jar xxx.jar &

nohup意思是不挂服务、常驻的意思，当关闭该命令的运行tab时进程运行不会停止（除非云服务器关机），&表示执⾏命令后要⽣成⽇志⽂nohup.out。

出现：nohup: ignoring input and appending output to ‘nohup.out'正常情况，表示项目启动成功，最后在浏览器地址栏输⼊项⽬地址，检查项⽬是否部署成功。

二、前端项目部署

前端配置主要Tomcat服务，是一个免费的，开放源代码的Web应用服务器，感兴趣的可以自己找资料阅读下。

1.下载和配置TomCat环境

跳转到Tomact官网下载对应版本的Tomcat。
注意：
tomcat会出现和jdk的版本对应问题，一般是和jdk保持一致。tomcat7对用jdk7版本；tomcat8对用jdk8版本。下载tomcat的官网,有兼容列表的；

tomcat v7.0-------support-------->Java EE 6 and 6以上
tomcat v8.0-------support-------->Java EE 7 and 7以上
tomcat v9.0-------support-------->Java EE 8 and 8以上
本次以9.0.62为例，进行演示：
Tomcat下载
linux下选择tar.gz这个，由于国外网站下载较慢，可以在这里使用我当前下载后上传的版本，速度会快一点。

在这里插入图片描述
下载完成后将压缩文件上传到linux服务器，并解压，解压命令:

tar -xvf apache-tomcat-9.0.62.tar.gz

解压完成之后配置环境变量：

vim /etc/profile

文件中添加如下内容：

CATALINA_HOME=/home/usr/TomCat/apache-tomcat-9.0.62(替换为tomcat路径)
CATALINA_BASE=/home/usr/TomCat/apache-tomcat-9.0.62(替换为tomcat路径)
export CATALINA_HOME CATALINA_BASE

退出后保存该文件：

source /etc/profile

测试Tomcat是否成功安装，进入Tomcat目录下的bin文件，输入./startup.sh运行脚本：

./startup.sh

在浏览器搜索：(服务器ip):8080，出现Tomcat主页表示TomCat配置成功。
修改服务端口的操作也比较简单：
进入tomcat下conf文件夹，更改server.xml文件中<Connector port='8080' ... 配置进行修改。

cd conf
vi server.xml

然后重新进入bin目录下，重新运行tomcat，成功后可以在新端口运行。

cd ../bin
./shutdown.sh
./startup.sh

2.前端文件上传配置

进入前端工程项目，将前端项目打包，vue下打包命令：

npm run build

打包完成后会生成一个dist的文件夹，接下来只需要将该文件夹下面的文件部署到tomcat中即可。
进入到apache-tomcat-9.0.62/webapps目录下，删除ROOT目录，将打包好的dist项目上传到该目录下，然后重命名为ROOT。

rm -rf ROOT
// 上传dist项目
mv dist ROOT

进入ROOT目录，新建WEB_INF文件夹，进入该目录，创建web.xml文件。

mkdir WEB_INF
cd WEB_INF
touch web.xml

编辑web.xml文件，将下面内容写入。

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1" metadata-complete="true">
<display-name>Router for Tomcat</display-name>
  <error-page>
      <error-code>404</error-code>
      <location>/index.html</location>
  </error-page>
</web-app>

重新进入bin目录下，重启tomcat后通过服务器ip:端口即可访问该前后端分离的项目。
注意：服务器前端访问后端的ip地址需要更改为服务器的ip地址

3.前端有后台的项目部署

对于比较复杂的项目前端有前台和后台之分，前台呈现给用户，后台是管理人员的管理界面，此时可能需要将前台和后台分开部署到两个端口上，后台的部署与之前类似。

重新拷贝一份tomcat文件
修改端口号
打包前台（或后台）项目
上传并改名为ROOT
创建WEB-INF文件夹并新建web.xml文件

以上完成之后，需要修改/etc/profile文件，在内部新增新tomcat的配置文件，一个简单的实例如下：

CATALINA_HOME2=/home/usr/TomCat/apache-tomcat-9.0.62(替换前/后台为tomcat路径)
CATALINA_BASE2=/home/usr/TomCat/apache-tomcat-9.0.62(替换前/后为tomcat路径)
export CATALINA_HOME2 CATALINA_BASE2

保存该文件后重启tomcat服务，即可运行前后端项目。