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

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

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

---

推荐工具：

XFTP：用于向服务器传输文件 蓝奏云下载 密码:ciwg

XShell：用于远程连接、操作服务器 蓝奏云下载 密码:3g61

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

参考文章：

项目部署到阿里云服务器，前后端分离 springboot+vue(nginx跨域)

程序汪项目实战部署保姆教程 springboot前后分离 linux安装部署启动一条龙教程