云服务部署项目（Spring + Vue）

news2024/9/22 7:36:28

云计算：腾讯云
操作系统：Ubuntu 22.04.4 LTS
项目：若依前后端分离项目（SpringBoot + Vue）

首先要安装基本的一些依赖环境，大家可以看一下我往期的文章：
Ubuntu在线JDK
Ubuntu在线安装Nginx
Ubuntu在线安装MySQL
安装Redis

1.项目配置

后端配置端口和请求前缀（用于Nginx配置反向代理）
application.yml

server:
  # 服务器的HTTP端口
  port: 9966
  
  # Swagger配置
swagger:
  # 是否开启swagger
  enabled: true
  # 请求前缀
  pathMapping: /prod-api

前端配置端口和基本请求地址
vue.config.js
在这里插入图片描述
.env.production

2.打包

前端
在这里插入图片描述
后端

3.上传服务器

建议使用管理员进行操作，要不然操作一些文件会有权限限制。

# 切换管理员
sudo su -

这里我上传到/home/liang/project/ruoyi-vue
在这里插入图片描述
启动后端

java -jar ruoyi-admin.jar

4.配置Nginx

Nginx配置文件是 nginx.conf，默认安装在 etc/nginx 下
在这里插入图片描述

# 查看配置文件
vim nginx.conf

我这里配置是在子文件中配置，主文件这里引入。当然你也可以直接在主文件这里进行配置：
在这里插入图片描述
所以我们配置子文件就可以：

/usr/local/bin/lconfig/nginx/nginx.conf

server {
  listen 8866;
  # server_name 118.89.55.144;
  server_name localhost;

  # 前端项目路径	
  root /home/liang/project/ruoyi-vue/dist;
  index index.html;

  location / {
        try_files $uri $uri/ /index.html;
    }

    location /prod-api/ {
        proxy_pass http://localhost:9966/;
        # 添加以下行以避免 // 的问题
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # 处理连续的斜杠（可选）
        rewrite ^//(.*)$ /$1 break;  # 将 // 替换为 /
    }

  location ~ .*\.(gif|jpg|jpeg|png|css|js|ico)$ {
    root /home/liang/project/ruoyi-vue/dist;
  }
}