阿里云服务器部署Vue+SpringBoot前后端分离项目

阿里云服务器部署Vue+SpringBoot前后端分离项目

1、阿里云服务器配置介绍

• CPU&内存：2核4G

• 操作系统：Ubuntu 18.04 64位

• 带宽：1Mbps

  由于毕设需要，刚好阿里云有这个新用户免费试用两个月的活动，就领了一个云服务器，用来部署web项目再合适不过了。

2、部署环境

​ 登录阿里云服务器的管理后台，可以看到其实有简单的教程，包括进入服务器终端等等，在这里我也简单介绍一下我需要部署的东西吧。

1. 进入阿里云服务器终端：

   Windows系统打开PowerShell，输入以下指令：

   #查看是否有安装ssh
   ssh -v
   #输入云服务器公网IP
   ssh [email protected]
   #输入yes
   yes
   #输入密码
   password
   

2. 部署MySQL

#因为阿里云的教程只有使用yum的，但是ubuntu是用apt。
sudo apt -get update
sudo apt -get install mysql-server
#启动MySQL数据库
systemctl start mysqld.service
#登录数据库，一开始应该是无密码
mysql -uroot -p
#修改用户密码
ALTER USER 'root'@'localhost' IDENTIFIED BY '12345678';
#修改用户远程管理权限
GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '12345678';
#退出数据库
exit;

同时进入阿里云服务器后台，进入实例安全组，配置3306端口的访问，使得可以远程访问云服务器数据库。

3. 部署Java环境

• 工具：Xftp
• Java安装包：jdk-8u202-linux-x64-demos.tar.gz（根据自己需要的版本来）

首先将安装包通过Xftp上传到云服务器，然后打开云服务器终端。

#解压安装包
tar -zxvf jdk-8u202-linux-x64-demos.tar.gz
#Java环境配置
#打开环境配置文件
sudo vim /etc/profile
#在文件末尾添加以下信息：
export JAVA_HOME=安装包解压出的文件夹路径
export JRE_HOME=${JAVA_HOME}/jre    
export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib    
export PATH=${JAVA_HOME}/bin:$PATH
#退出vim，使配置生效
source /etc/profile
#配置软连接，部分软件可能会从/usr/bin目录下查找Java，因此添加该软连接防止其他软件查找不到的情况
sudo update-alternatives --install /usr/bin/java  java  jdk1.8.0_202/bin/java 300   
sudo update-alternatives --install /usr/bin/javac  javac  jdk1.8.0_202/bin/javac 300 
#测试是否成功
java -version

4. 安装Nginx

   sudo apt-get install nginx
   

   后续前端项目在调用后端接口时，需要使用Nginx进行代理跳转端口。

3、常用命令

#查看所有被打开的端口情况
netstat -anp
#查看所有进程信息
ps aux
#杀死进程id为2869的进程
kill -9 2869
#查看所有服务状态
service --status-all
#让命令在后台执行，终端退出后命令仍旧执行
nohup 命令语句 &

4、部署SpringBoot项目

1. 首先更改项目的application.yml文件，将数据库配置的IP地址改成云服务器的地址，因为MySQL数据库已经部署在服务器上了。
   

2. 然后打包成Jar

3. 使用Xftp工具将jar包上传到云服务器上，并通过命令启动项目。

   #首先进入jar包所在的文件夹
   #后台执行jar文件
   nohup java -jar jar包名称（包含后缀） &
   #查看是否执行成功
   ps aux
   

4. 阿里云服务器开放后端项目端口
   

   我配置的是8081端口，所以开放8081端口。

5、部署Vue项目

1. 打包Vue项目

   #打包之后会生成dist文件夹
   npm run build
   

2. 将dist文件夹通过Xftp工具上传到服务器

3. 进入Nginx配置文件

如果不习惯使用终端命令的化，我们使用Xftp连接服务器，方便找到nginx的配置文件nginx.conf，正常情况下nginx.conf文件里面是有内容的，假如没有，那就来到sites-enabled文件夹下面，使用vim打开default文件，配置自行添加

#监听8080端口，因为我的前端项目端口为8080
listen 8080 default_server;
listen [::]:8080 default_sserver;
#配置打包的前端项目文件夹dist的地址，我是放在了/home路径下
root /home/dist
#配置默认打开页面
index index.html index.htm index.nginx-debian.html;

server_name _;

#配置找不到默认页时跳转到首页
location / {
	try_files $uri $uri/ /index.html;
}

#配置代理，跳转后端端口。注意这里的"/api"是指将所有带有"/api"的请求进行代理跳转，因此你需要根据你自己前端项目中调用的接口进行配置.
location /api {
	proxy_pass http://123.123.123.123:8081;
}

#重启Nginx服务，每次配置完成记得重启
service nginx restart

4. 同时在阿里云服务器后台打开8080端口
   

6、总结

​ 虽然看起来流程比较简单，但是实际操作起来困难重重，这一套流程都是我踩了很多坑才完成的。想来想去也忘了踩了哪些了，比较杂，这里就提示一个当时印象最深的坑吧，基本上这个搞定了之后，其他的问题都比较简单。

• MySQL数据库无法远程访问的问题

  在开放端口后，我在本机上无法通过Navicat连接到服务器的MySQL数据库，后来查明原因，发现自己并没有将root权限开放出来，解决方法：

  https://www.cnblogs.com/love-snow/articles/7338644.html