ssm+vue+MySQL+tomcat前后端分离项目部署至腾讯云服务器

第一次在Linux云服务器上部署前后端分离项目，查阅了许多网上的教程和文章，踩了许许多多的坑。最终成功在腾讯云的轻量应用服务器上部署了自己的前后端分离项目，记录一下前后端部署的过程，供学习的小伙伴参考。

1.环境准备

在开始部署前，我们需要准备一下的工具和环境

• 购买一个云服务器，这里我使用的是腾讯云轻量应用服务器，操作系统为Centos7.6 64bit
• 在服务器上安装node.js
• 在服务器上安装Nginx
• 在服务器上安装jdk1.8+
• 在云服务器上安装mysql
• 在与服务器上安装tomcat

 

 

进入到云服务的的终端后，我们可以使用宝塔面板来快捷方便的在服务器安装环境，由于服务器是Centos系统，所以这个脚本是Centos的安装脚本。

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

执行命令安装后，打开宝塔面板面板，在软件商店里就可以下载所需要的运行环境。在此之前还需要服务器安全组添加放行端口规则。

 配置node环境

1.执行一下命令下载Node.js Linux 64位二进制安装包

wget https://nodejs.org/dist/v10.16.3/node-v10.16.3-linux-x64.tar.xz

2.执行以下命令，解压安装包

tar xvf node-v10.16.3-linux-x64.tar.xz

3.执行一下命令创建软链接，成功创建软链接后，就可以在云服务器的任意目录下使用node和npm命令

ln -s /root/node-v10.16.3-linux-x64/bin/node /usr/local/bin/node
ln -s /root/node-v10.16.3-linux-x64/bin/npm /usr/local/bin/npm

执行以下命令可以查看Node.js 和 npm的版本信息

node -v
npm -v

 安装jdk

安装jdk1.8，执行以下命令

yum -y install java-1.8.0-openjdk

如果需要安装其他版本可以通过 以下命令查询可安装的版本

yum -y list java*

执行以下命令，如图所示出现版本号则说明安装成功

java -version

 

修改tomcat配置

在宝塔面板找到tomcat所在目录，然后在找到conf目录下的server.xml文件，双击编辑

 修改后点击保存，重启tomcat后，在网页上输入你的公网ip:8089，记住这里得是公网ip加上你自己修改后的端口号。

出现欢迎界面就说明 tomcat成功启动。 

创建数据库

在宝塔面板点击数据库，然后添加一个数据库，这里添加的数据库名字和密码可以和本地的一样，然后点击导入，可以将本地数据库的sql文件导入进去，非常方便快捷

 

2.打包前后端项目

前端vue项目打包，我看网上大多数人都是打包后再上传到云服务器，而我选择的是将整个vue项目压缩后放到云服务器之后再进行npm run build。 

我将vue项目上传到/usr/local的目录下，然后在终端对vue项目进行打包，生成dist文件夹。

然后打包后端项目，进入到idea界面 选择工具栏里的build->build artifacted->选择自己的项目，打包完成后就可以在自己指定的生成路径找到已经打包好的war文件，再将打包好的war文件通过宝塔面板面板上传的tomcat所在的目录下的webapps下，启动tomcat后会自动解压。

在打包前记得将自己与数据库的连接的url，name，password换成和服务器的数据库相对应的

 

 

3.修改nginx配置

 进入到nginx目录下的conf文件夹，找到nginx.conf文件 双击编辑，主要修改的地方有两个，一个是

user root；

 

还有一个需要修改的地方则是下图中的location 

loaction /  意思是所有请求都会找的你的前端项目去，root 则是你前端项目的物理路径

loaction /api 意思是你所有请求中url中带有api都会转发到你的后端地址去，比如下图中的/api/article/tag 实际请求的完整路径为http://x.xxx.xxx.xxx:8089/my-ssm-project/article/tag

 location /upload 意思和/api一样都是转发到8089端口的/upload，这里的/upload是项目中所有图片，视频上传后存储的路径，是在tomcat目录下的upload文件夹。

 同时也要修改一下tomcat的配置文件，使其能够访问到tomcat下的图片和视频文件

修改完tomcat和nginx的配置文件记得重启一下服务使刚修改的配置生效 

4.成功部署效果

在浏览器访问"公网ip"就可以访问到前端页面

 至此整个部署过程就结束了，由于没接触过服务器的配置和项目部署，前前后后花了四五天才成功部署，主要的难点就在一开始的服务器环境配置，前后端跨域问题和访问tomcat下的图片和视频访问不到的问题。一开始本来是用windows系统的服务器但发现这方面的教程太少，所以就换了一个Centos的服务器，也是不熟悉linux的命令，在网上跟着别人的教程踩了很多坑，写这帖子也是纪录一下自己部署的过程，也许有很多地方做的不对的，但最终还是成功部署了