SpringBoot3 + Vue3 + MySQL前后端分离项目部署到阿里云服务器

SpringBoot3 + Vue3 + MySQL前后端分离项目部署到阿里云服务器

服务器系统：CentOS
推荐使用FinalShell这个终端软件来连接云服务器(上传下载文件方便)

Vue3项目的部署

• 参考我的另一篇博文：http://t.csdnimg.cn/SV8fS

• 修改项目的配置vite.config.js，注意新增的’/api’转发路径，下面有个Bug需要用到

  import { fileURLToPath, URL } from 'node:url'
  
  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import vueJsx from '@vitejs/plugin-vue-jsx'
  
  // https://vitejs.dev/config/
  export default defineConfig({
    // 这里是原有的配置
    plugins: [
      vue(),
      vueJsx(),
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    }
    ,
    // 这是为了解决跨域问题写的代理配置
    server:{
      proxy:{
        '/api':{//获取路径中包含了/api的请求，与axios请求同步增加
            target:'http://云服务器公网IP:后端访问端口（8081）',//后台服务所在的源
            changeOrigin:true,//修改源
            rewrite:(path)=>path.replace(/^\/api/,'')///api替换为''
        }
      }
    }
  })
  

Java环境的安装与配置

• 下载JDK17 linux 版本

  • 在https://www.oracle.com/cn/java/technologies/downloads/#java17下载x64 Compressed Archive版本

• 上传下载的压缩包到usr/local（任意路径都行）并解压

  # 解压得到一个jdk-17.0.11的文件夹
  tar -zxvf jdk-17_linux-x64_bin.tar.gz
  

• 配置Java的环境变量

  # 在etc/profile配置文件以下内容增加
  export JAVA_HOME=/usr/local/jdk-17.0.11
  export PATH=$JAVA_HOME/bin:$PATH
  # 让配置生效
  source etc/profile
  

• 验证Java环境是否配置成功

  java -version
  # 输出
  java version "17.0.11" 2024-04-16 LTS
  Java(TM) SE Runtime Environment (build 17.0.11+7-LTS-207)
  Java HotSpot(TM) 64-Bit Server VM (build 17.0.11+7-LTS-207, mixed mode, sharing)
  

MySQL的安装和配置

• 阿里云设置安全组，开放入方向的 3306端口（数据库的连接端口）的访问规则 。授权对象：0.0.0.0/0
• 安装和配置

  # PS: 用这种办法下载MySQL好像最高只能安装5.7版本的，如果想安装8.0+版本的自行度娘吧～
  wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm
  rpm -ivh mysql-community-release-el7-5.noarch.rpm
  yum -y install mysql-server（mysql-community-server）
  #这里下载太慢了，更换个镜像下载
  修改/etc/yum.repos.d/mysql-community.repo，
  把[mysql56-community]（看你下载的是哪个版本就修改哪一个）的baseurl修改为
  baseurl=http://mirrors.ustc.edu.cn/mysql-repo/yum/mysql-5.6-community/el/7/x86_64/
  # 启动MySQL
  service mysqld start
  # 进入MySQL修改密码
  mysql -uroot
  ---- grant all privileges on *.* to root@"%" identified by "你的密码";
  ---- exit
  # 重启MySQL
  service mysqld restart
  # 用navicat远程连接成功，注意主机名是云服务器的公网IP
  

SpringBoot3项目的部署

• 阿里云设置安全组，开放入方向的8081端口（后端项目的访问端口）的访问规则 。授权对象：0.0.0.0/0

• 修改项目的配置文件application.yml

  spring:
    # 数据库连接设置 
    datasource:
      driver-class-name: com.mysql.cj.jdbc.Driver
      url: jdbc:mysql://云服务器公网IP:3306/你的数据库名称
      username: root
      password: 密码
    # 我这里是设置文件上传的大小限制（可忽略）
    servlet:
      multipart:
        max-file-size: 500MB
        max-request-size: 500MB
  # mybatis设置
  mybatis:
    configuration:
      map-underscore-to-camel-case: true  # 开启驼峰命名
      log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  # 后端访问端口设置，与第一步开放的端口对应
  server:
    port: 8081
  

• maven打包项目

  mvn clean
  mvn package
  # 成功的话会在项目的target目录下生成一个jar包，我们就需要这个jar包
  

• 上传jar包到服务器上的/usr/local/java-project（任意目录）

• 运行项目

  cd /usr/local/java-project(这是我新建的文件夹，专门放置Java项目)
  nohup java -jar education-game-0.0.1-SNAPSHOT.jar(你的jar包) > output.log &
  # 命令解释
  nohup：即使你关闭了终端，命令也不会被挂起（即终止）。
  > output.log：将标准输出（stdout）重定向到 output.log 文件。
  &：在命令的末尾，它将命令放到后台执行，这样你就可以继续在终端中工作，而不需要等待 Java 应用程序完成。
  

• 终止项目运行--------至此整个SpringBoot3 + Vue3 + MySQL已成功部署到云服务器上

  netstat -tulnp | grep :8081
  kill -9 进程号
  

Bug及其解决

• post请求，nginx报错，405 Not Allowed或者请求无数据返回

  # 修改nginx的配置文件
  /usr/local/nginx/conf/nginx.conf
  # 增加下面配置，注意/api/与Vue的转发路径配置一样
  location /api/ {
              proxy_set_header Host $http_host;
              proxy_set_header X-Real-IP $remote_addr;
              proxy_set_header REMOTE-HOST $remote_addr;
              proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
              proxy_pass http://云服务器公网IP:后端访问端口（8081）/;
          }
  # 让配置生效
  cd /usr/local/nginx/sbin
  ./nginx -s reload
  

• 文件上传，nginx报错，413 Request Entity Too Large

  # 修改nginx的配置文件
  /usr/local/nginx/conf/nginx.conf
  直接在http{}里面增加
  client_max_body_size 500m;
  # 让配置生效
  cd /usr/local/nginx/sbin
  ./nginx -s reload