若依前后端分离部署

王秋实 1949

已于 2024-11-21 20:42:33 修改

阅读量1.3k

点赞数 2

文章标签：运维

于 2024-11-06 15:38:05 首次发布

本文链接：https://blog.youkuaiyun.com/m0_62934345/article/details/143562100

版权

一、若依单体、前后端分离对比

单体：可看到静态文件与servlet容器打包在一起
前后端不分离：

多了ruoyi-ui，这是vue前端部分
对业务进行了拆分，包含了多个模块

在这里插入图片描述

前端采用Vue、Element 【Vue组件】UI。
后端采用Spring Boot、Spring Security、Redis & Jwt。
权限认证使用Jwt，支持多终端认证系统。
支持加载动态权限菜单，多方式轻松权限控制。

二、主机规划

nginx：192.168.31.3
mysql、redis、nodejs、maven：192.168.31.253
	
JDK >= 1.8 (推荐1.8版本)
Mysql >= 5.7.0 (推荐5.7版本)
Redis >= 3.0
Maven >= 3.0
Node >= 12

三、前端部署【192.168.31.253】【ruoyi-ui】

git clone https://gitee.com/y_project/RuoYi-Vue.git
mv RuoYi-Vue/ ruoyi-vue

3.1 Vue介绍

Vue 不是一种编程语言，而是一种用于构建用户界面的渐进式JavaScript框架

Vue项目通常会使用npm或Yarn等包管理工具来管理项目依赖。这些工具都是基于Node.js开发的，因此需要依赖Node.js来运行。

3.2 安装node.js

wget https://nodejs.org/dist/v16/19/1/node-v16.19.1-linux-x64.tar.gz
tar -zxvf /root/node-v16.19.1-linux-x64.tar.gz  -C /usr/local/
ln -s  /usr/local/node-v16.19.1-linux-x64/ /usr/local/node
	
cat  >> /etc/profile.d/nodejs.sh <
export NODE_HOME=/usr/local/node
export PATH=$NODE_HOME/bin:$PATH
EOF
	
source /etc/profile.d/nodejs.sh

3.3 在js前端项目下，安装js项目所需的依赖，js【vue框架】【利用npm包管理器（Node.js开发）】

查看作者提供的前端打包、测试方法

cd ruoyi-vue/ruoyi-ui/
npm install --registry=https://registry.npmmirror.com

下载本项目的npm依赖

在这里插入图片描述

3.4 构建静态文件

npm run build:prod

在这里插入图片描述

构建dist静态文件

在这里插入图片描述

不用构建静态文件，直接运行web与后端交互

在这里插入图片描述

3.3 配置nginx静态服务器【7层反向代理】【192.168.31.3】

scp  -r  192.168.31.253:/root/ruoyi-vue/ruoyi-ui/dist/     /data/ruoyi/

cat    /apps/nginx/conf/conf.d/ruoyi.conf

upstream ruoyi {
#ip_hash;
   server 192.168.31.253:8080;
#   server 192.168.31.5:8080;
}
server {
   listen 80;
   server_name www.ruoyi.com;
   charset utf-8;
   access_log  logs/ruoyiaccess.log main;
   error_log  logs/ruoyierror.log;


   location / {
       root  /data/ruoyi/dist;
       try_files $uri $uri/ /index.html;
       index  index.html index.htm;
   }

   location /prod-api/ {
#       proxy_pass http://192.168.31.253:8080/;
        proxy_pass http://ruoyi/;
        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;
   }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
}

在这里插入图片描述

四、后端部署【192.168.31.253】【ruoyi-admin】

4.1 修改数据库连接，编辑resources目录下的application-druid.yml

/root/ruoyi-vue/ruoyi-admin/src/main/resources/application-druid.yml

在这里插入图片描述

4.2 修改服务器配置，编辑resources目录下的application.yml【配置任意上传目录】

/root/ruoyi-vue/ruoyi-admin/src/main/resources/application.yml
mkdir  /ruoyi/uploadPath -p

在这里插入图片描述

4.3 mvn编译、打包java程序

cd  /root/ruoyi-vu
mvn clean package -Dmaven.test.skip=true
注意：命令不生效，重新加载profile中的环境变量

在这里插入图片描述

4.4 为后端程序创建数据库、导入sql文件

CREATE DATABASE `ry-vue` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
USE `ry-vue`;
create user 'ry'@'192.168.31.253' identified by '123456';
grant all on `ry-vue`.* to 'ry'@'192.168.31.253';
FLUSH PRIVILEGES;
source /root/ruoyi-vue/sql/quartz.sql;
source /root/ruoyi-vue/sql/ry_20240629.sql;

五、脚本启动

cp ry.sh  ruoyi-admin/target/
cat ry.sh 
#!/bin/sh
# ./ry.sh start 启动 stop 停止 restart 重启 status 状态
AppName=ruoyi-admin.jar

# JVM参数
JVM_OPTS="-Dname=$AppName  -Duser.timezone=Asia/Shanghai -Xms512m -Xmx1024m -XX:MetaspaceSize=128m -XX:MaxMetaspaceSize=512m -XX:+HeapDumpOnOutOfMemoryError -XX:+PrintGCDateStamps  -XX:+PrintGCDetails -XX:NewRatio=1 -XX:SurvivorRatio=30 -XX:+UseParallelGC -XX:+UseParallelOldGC"
APP_HOME=`pwd`
LOG_PATH=$APP_HOME/logs/$AppName.log

if [ "$1" = "" ];
then
    echo -e "\033[0;31m 未输入操作名 \033[0m  \033[0;34m {start|stop|restart|status} \033[0m"
    exit 1
fi

if [ "$AppName" = "" ];
then
    echo -e "\033[0;31m 未输入应用名 \033[0m"
    exit 1
fi

function start()
{
    PID=`ps -ef |grep java|grep $AppName|grep -v grep|awk '{print $2}'`

	if [ x"$PID" != x"" ]; then
	    echo "$AppName is running..."
	else
		nohup java $JVM_OPTS -jar $AppName > /dev/null 2>&1 &
		echo "Start $AppName success..."
	fi
}

function stop()
{
    echo "Stop $AppName"

	PID=""
	query(){
		PID=`ps -ef |grep java|grep $AppName|grep -v grep|awk '{print $2}'`
	}

	query
	if [ x"$PID" != x"" ]; then
		kill -TERM $PID
		echo "$AppName (pid:$PID) exiting..."
		while [ x"$PID" != x"" ]
		do
			sleep 1
			query
		done
		echo "$AppName exited."
	else
		echo "$AppName already stopped."
	fi
}

function restart()
{
    stop
    sleep 2
    start
}

function status()
{
    PID=`ps -ef |grep java|grep $AppName|grep -v grep|wc -l`
    if [ $PID != 0 ];then
        echo "$AppName is running..."
    else
        echo "$AppName is not running..."
    fi
}

case $1 in
    start)
    start;;
    stop)
    stop;;
    restart)
    restart;;
    status)
    status;;
    *)

esac

java  -Dname=ruoyi-admin.jar  -Duser.timezone=Asia/Shanghai -Xms512m -Xmx1024m -XX:MetaspaceSize=128m -XX:MaxMetaspaceSize=512m -XX:+HeapDumpOnOutOfMemoryError -XX:+PrintGCDateStamps  -XX:+PrintGCDetails -XX:NewRatio=1 -XX:SurvivorRatio=30 -XX:+UseParallelGC -XX:+UseParallelOldGC -jar ruoyi-admin.jar

在这里插入图片描述

bash ry.sh start
echo "bash ry.sh start"  >> /etc/rc.local

可看到出现验证码，说明，js文件在浏览器运行，与后端进行了动态交互
红帽关闭防火墙selinux

在这里插入图片描述 =