前后端分离项目部署至云服务器相关

博主使用的云服务器为阿里云服务器😊废话不多说，我们直接开始

推荐工具：

XFTP：用于向服务器传输文件 XShell：用于远程连接、操作服务器 Navicat：用于连接、管理数据库

云服务器的配置：

所需环境概述：

Java的JDK MySQL Nginx

这里博主选择的系统镜像为CentOS8.2，应用镜像为LNMP7.4，选择该应用镜像是因为其预装了Nginx1.18、MySQL5.7不用自己安装了 下面开始安装JDK(>=1.8)： 从oracle官方网站上下载1.8版本中的最新版的JDK。下载完成后，把文件通过WinSCP或者XFTP上传到服务器上。接着进行解压和配置环境变量。 #tmp存放临时安装包 mkdir -p /data/tmp #进入安装包目录，解压 cd /data/tmp tar -zxvf jdk-8u261-linux-x64.tar.gz #把解压出来的文件夹转移到统一的地方 mv /data/tmp/jdk1.8.0_261 /data/service/jdk1.8.0_261 #修改环境变量/etc/profile，JAVA_HOME修改为自己的jdk路径。 vim /etc/profile export JAVA_HOME=/data/service/jdk1.8.0_261 export PATH=$PATH:$JAVA_HOME/bin #使环境变量生效 source /etc/profile #检查是否配置成功 java -version

如此一来，服务器环境就配置好了

后端配置部署：

由于云服务器所用MySQL版本为5.7，因此后端的pom.xml文件应当做相应修改：

<dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.25</version> <scope>runtime</scope> </dependency>

这里用到的5.1.25版本经测试可以与5.7兼容，主要是博主找不到5.7的jar包😂如果有找到的小伙伴可以分享一下嘛，蟹蟹辣😘

application.yml关于数据库的部分也要做相应调整：

spring: datasource: url: jdbc:mysql://服务器公网IP:3306/你的数据库名?useSSL=false&characterEncoding=utf8&allowPublicKeyRetrieval=true username: root password: admin driver-class-name: com.mysql.jdbc.Driver

接下来打包后端项目：

依次执行Maven的生命周期：clean，complie、package。应当选择“跳过测试”模式

最终可以在target文件夹下得到一个jar包，就是我们要部署到服务器上的

部署至服务器： 首先应当开放数据库远程连接权限： 在XShell终端中输入： #登入MySQL服务： mysql -u root -p #开放权限： GRANT ALL PRIVILEGES ON *.* TO root@% IDENTIFIED BY 远程连接时的密码 WITH GRANT OPTION; #刷新权限： FLUSH PRIVILEGES; 之后我们利用Navicat工具远程连接服务器数据库后新建自己项目所需要的数据库即可接着进行后续操作： 然后我们新建一个文件夹专门来运行jar包 #切换至根目录下 cd / #新建文件夹 mkdir /webServer 利用XFTP工具将jar包上传至服务器对应位置： 开启后端服务： cd /webServer nohup java -jar test.jar > jk.log & cat jk.log 之后根据输出内容做出相应调整 检查是否开启成功： ps -ef | grep java 关闭后端服务： #先利用ps命令查询java进程 ps -aux | grep java #之后利用kill命令杀死进程 kill -9 具体pid

前端配置部署

配置axios以及跨域支持配置文件： #main.js文件 Axios.defaults.baseURL = http://公网IP:后端端口号/transfer; #config/index.js文件 proxyTable: { /transfer:{ target:http://公网IP:后端端口号, changeOrigin:true, pathRewrite:{ ^/transfer: } } }, 在终端利用npm run build命令打包前端项目 npm run build 利用XFTP工具上传至服务器： 更改Nginx配置： #查看nginx的位置 whereis nginx #切换目录 cd /usr/local/nginx/conf #编辑nginx.conf配置文件 vim nginx.conf #修改一处，添加一处 #修改部分： root 你的dist文件路径 #添加部分： location / { try_files $uri $uri/ /index.html; } #修改配置文件后应当重启nginx服务 service restart nginx

部署测试：

在你的浏览器中输入服务器的公网IP即可看到成果~

Author：legend_go PublishTime：2022.02.06