当前位置：首页 > news >正文

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

news 来源：原创 2024/9/20 6:03:30

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

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

1.项目配置

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

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

前端配置端口和基本请求地址
vue.config.js
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1rTnCujU-1722051034022)(https://i-blog.csdnimg.cn/direct/b2f707335b61448c993a11b1c101475b.png)]
.env.production
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jkegoPsD-1722051034025)(https://i-blog.csdnimg.cn/direct/27a31b79ae494b409949c987b45c1cf0.png)]

2.打包

前端
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZSB5i3TX-1722051034027)(https://i-blog.csdnimg.cn/direct/f5dc93d6bfd6438b83e6f75fe4ba078e.png)]
后端
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lgBOPTSX-1722051034028)(https://i-blog.csdnimg.cn/direct/6bcb9ff7ab5341efbf4821812cfdd27e.png)]

3.上传服务器

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

# 切换管理员
sudo su -

这里我上传到/home/liang/project/ruoyi-vue
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8q0427X6-1722051034029)(https://i-blog.csdnimg.cn/direct/529643f3329d41b7b928d4726de8e955.png)]
启动后端

java -jar ruoyi-admin.jar

4.配置Nginx

Nginx配置文件是 nginx.conf，默认安装在 etc/nginx 下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xdBbjDzi-1722051034030)(https://i-blog.csdnimg.cn/direct/a016d287967b446eaf9f534a45bfe684.png)]

# 查看配置文件
vim nginx.conf

我这里配置是在子文件中配置，主文件这里引入。当然你也可以直接在主文件这里进行配置：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vvIL0EtH-1722051034031)(https://i-blog.csdnimg.cn/direct/094b0aa9d3f64562b439c558a48cde3d.png)]
所以我们配置子文件就可以：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-doiLr0su-1722051034033)(https://i-blog.csdnimg.cn/direct/8fef0bab25f145719d6a4669f2dbe6b6.png)]
/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;}
}

5.启动Nginx

启动nginx命令：

systemctl start nginx

查询运行状态：

systemctl status nginx

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tX9ynT6v-1722051034034)(https://i-blog.csdnimg.cn/direct/b10c0fa1fea948bb992dd49fc46e90f3.png)]

6.开放端口

我们Nginx配置监听的端口是8866，所以我们要开放端口，这个需要在控制台进行配置：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Inx7wAGk-1722051034035)(https://i-blog.csdnimg.cn/direct/0cf69d05f43d4772a8640bfb642ff6f1.png)]
在网页输入http://你的ip:8866：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y9ikejAq-1722051034036)(https://i-blog.csdnimg.cn/direct/22cad495b89e41a49b2d61d691e5edf2.png)]
大功告成！！！