虚拟机部署前后端分离项目

471 阅读3分钟

实验环境:

  • linux虚拟机(可与宿主机互通)
  • IntelliJ IDEA 2022.2.3(或其它可运行java程序的开发工具)

1、项目选择

若依前后端分离版,官网下载:RuoYi 若依官方网站

image-20230701170616085.png

2、前端打包

2.1、试运行
 # 配置镜像
 npm install --registry=https://registry.npmmirror.com
 # 安装依赖
 npm install
 # 启动服务
 npm run dev

image-20230701172306210.png image-20230701172409530.png image-20230701172445147.png

运行完成后,会在自动跳转至浏览器页面

image-20230701172555248.png

2.2、打包

image-20230701173732157.png

压缩打包后的前端代码(可能会有部分隐藏文件不会传输到虚拟机,所以这里选择压缩后传输)

image-20230701173925862.png

3、后端打包(jar包)

3.1、修改配置(设置为虚拟机的参数)

设置连接 mysql 的 ip、root、root 密码

image-20230701174405435.png

需要在宿主机(本机),建立数据库,并导入查询,sql文件在下载的若依文件夹内

image-20230701175041212.png image-20230701174814499.png image-20230701174924174.png

设置redis连接的 ip,我的虚拟机未设置密码,所以这里为空

image-20230701194525232.png

3.2、开始打包

为防止依赖产生的问题,清理并安装一次

image-20230701195143090.png

3.3、打包

image-20230701195458334.png

找到 jar 包位置

image-20230701195626321.png

4、上传前后端包文件

image-20230701200802244.png

 # 在/usr/local目录下,新建 /project/ruoyi 文件夹,存放打包后的文件
 mkdir /usr/local/project
 mkdir /usr/local/project/ruoyi
 # 进入文件夹
 cd /usr/local/project/ruoyi
 # 解压前端包
 unzip dist.zip

image-20230701201131635.png image-20230701201152973.png

5、前端部署

5.1、修改 nginx.conf 配置文件
 # 进入 nginx 目录
 cd /usr/local/nginx/conf/

image-20230701202704632.png

配置 nginx

 # 修改配置文件
 vim nginx.conf
 ​
 # 更改用户为 root 
 #user nobody 修改为 user root
 ​
 # 配置服务的反向代理
 /usr/local/project/ruoyi/dist

image-20230701203128638.png image-20230701203419895.png

5.2、重新启动 nginx,使配置生效
 # 启动 nginx
 ./nginx
 # 若按上文设置为 nginx 自启动,配置文件修改后,需要重启nginx
 /usr/local/project/ruoyi/dist -s reload
 # 或者执行下行命令,效果一致
 sudo systemctl restart nginx
 ​
 # 浏览器输入 ip 地址即可访问,以我的为例
 192.168.5.151
5.3、前端部署成功示例

image-20230701203649975.png

6、后端部署

 # 进入项目包所在目录
 cd /usr/local/project/ruoyi
 # 直接运行 jar 包
 # 在后台运行命令/进程,并防止它在终端会话结束时或用户注销时终止
 nohup java -jar ruoyi-admin.jar &

image-20230701205303560.png

6.1、后端部署成功示例

image-20230701224427780.png

6.2、部署失败解决方案
 # 若运行不成功
 # 服务器上需要开发端口或者关闭防火墙,这里我选择直接关闭
 systemctl status firewalld.service  #查看firewall状态
 systemctl stop firewalld.service    #停止firewall
 ​
 # 查看关于java的进程
 ps -aux|grep java
 # 运行命令,在虚拟机上直接运行(显示运行过程),查看具体错误
 java -jar ruoyi-admin.jar &
 ​
 # 若要停止运行,执行命令杀死进程
 kill -9 端口号

image-20230701223930222.png

7、前后端关联

7.1、查看失败原因

输入 ip 地址测试,发现不能访问,接口报错

 # 浏览器输入 ip 地址即可访问
 192.168.5.151

原因:nginx 重定向未配置

image-20230701205041568.png

7.2、重定向配置

前后端虽已经完成部署,但仍未关联,需要在 nginx.conf 配置文件进行重定向配置

 # 进入 nginx 目录
 cd /usr/local/nginx/conf/
 # 修改配置文件
 vim nginx.conf
 ​
 # http://192.168.5.151:8080/,ip为虚拟机ip,端口可自行选定,但要在合理范围
 location /prod-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://192.168.5.151:8080/;
         }
         
 # 若按上文设置为 nginx 自启动,配置文件修改后,需要重启nginx
 /usr/local/project/ruoyi/dist -s reload
 # 或者执行下行命令,效果一致
 sudo systemctl restart nginx        

image-20230701221312370.png

8、访问测试

 # 登录账密
 账号:admin
 密码:admin123

image-20230701221340829.png image-20230701221517085.png