【超详细】RuoYi 前后端分离版部署流程

RuoYi 前后端分离版部署流程

📔 千寻简笔记介绍

千寻简笔记已开源,Gitee与GitHub搜索chihiro-notes,包含笔记源文件.md,以及PDF版本方便阅读,且是用了精美主题,阅读体验更佳,如果文章对你有帮助请帮我点一个Star

特邀嘉宾:仲琪

一 前端准备

1.修改router

export default new Router({
  base: '/xxxx-admin', // 去掉url中的#
  mode: 'history',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

2. 修改vue.config.js

publicPath: process.env.NODE_ENV === "production" ? "/xxxx-admin/" : "/xxxx-admin/",

3.修改后端访问地址:.env.production

# 管理系统/生产环境
VUE_APP_BASE_API = 'http://ip:端口/别名-api/'

4.修改配置:

request.js

# 搜索:store.dispatch('LogOut')
        store.dispatch('LogOut').then(() => {
        // 修改xxxx
          location.href = '/xxxx-admin/index';
        })

Navbar.vue

# 搜索:this.$store.dispatch('LogOut')
        this.$store.dispatch('LogOut').then(() => {
        // 修改xxxx
          location.href = '/xxxx-admin/index';
        })

5.构建项目

npm run build:prod

二 Nginx配置

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;
		charset utf-8;

	location /xxx-admin {
     		# 修改路径
            alias   /home/deploy/test/java-xxx/fe/admin/dist;
            # 修前端访问路径
            try_files $uri $uri/ /xxx-admin/index.html;
            index  index.html index.htm;
        }
     location /xxx-h5 {
     		# 修改路径
            alias   /home/deploy/test/java-xxx/fe/h5/dist;
            # 修前端访问路径
            try_files $uri $uri/ /xxx-h5/index.html;
            index  index.html index.htm;
        }
		location /xxx-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://localhost:端口号/xxx-api/;
     	 }
      # 文件上传路径
      location /test/xxx/profile/{
      		 # 服务器文件上传路径
              alias /home/deploy/test/java-xxx/be/uploadPath;
      }
    }
}

三 后端准备

1.修改application-prod.yml

# 改动1
ruoyi:
    # 服务器文件上传路径
    profile: /home/deploy/test/java-xxx/be/uploadPath
    
# 改动2
# 开发环境配置
server:
    # 服务器的HTTP端口,默认为8080
    port: 端口号
    servlet:
        # 应用的访问路径
        context-path: /xxx-api/
# 改动3 修改数据源

# 改动4 修改redis

2.修改日志存放路径:logback.xml

    <!-- 日志存放路径 -->
	<property name="log.path" value="./logs" />

3.Maven 打包

# 清理环境,清除target文件夹
maven clean

# 打包
maven packag

# 打包到的地址
项目路径下的 xx-admin/target/xxx-admin.jar

四 上传部署服务器

  • 前端上传路径:/home/deploy/test/java-xxx/fe/admin/dist
  • 后端上传Jar包路径:/home/deploy/test/java-xxx/be/

1. 后端启动

# 去到指定目录
cd /home/deploy/test/java-xxx/be/
# 创建文件夹
mkdir uploadPath
# 新建脚本:ry.sh
touch ry.sh

2.复制下面内容到ry.sh

#!/bin/sh
# ./ry.sh start 启动 stop 停止 restart 重启 status 状态
# xxx-admin.jar 上传的jar包名称
AppName=xxx-admin.jar

# JVM参数
# -Dspring.profiles.active=prod 指定启动环境
# -Druoyi.profile=/home/deploy/test/java-xxx/be/uploadPath 指定文件上传路径
JVM_OPTS="-Dname=$AppName  -Dspring.profiles.active=prod -Druoyi.profile=/home/deploy/test/java-xxx/be/uploadPath  -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

3.部署

# 给脚本添加执行的权限
chmode +x ry.sh
# 启动jar
./ry.sh start
# 重启
./ry.sh restart
# 停止
./ry.sh stop
### RuoYi 前后端分离架构部署教程 #### 下载及导入项目到IDEA 为了开始部署RuoYi项目,需先从GitHub仓库克隆该项目至本地,并通过IntelliJ IDEA或其他支持Maven的IDE工具将其作为Maven工程导入[^2]。 #### 数据库准备与配置 创建名为`ry-vue`的新数据库实例用于存储应用程序的数据。接着按照官方文档指示完成SQL脚本执行工作,确保所有表结构被正确建立并初始化必要的基础数据[^3]。 #### Redis服务启动 如果应用中涉及到缓存机制,则需要预先安装Redis服务器软件包,并保证其处于运行状态以便于后续的服务调用能够正常访问该组件的功能特性。 #### 启动后台API接口服务 调整好上述各项前置条件之后,现在可以尝试编译构建整个Java Web程序了。进入命令行界面切换目录至项目的根路径下执行mvn clean install指令来打包生成可执行jar文件;随后利用java -jar的方式指定参数加载此jar包从而激活Tomcat容器监听HTTP请求等待客户端发起交互操作[^1]。 ```bash cd ruoyi-admin/target/ nohup java -jar ruoyi-admin.jar & ``` #### 客户端Vue.js单页应用(SPA)上线流程说明 对于前端部分而言,同样要经历相似的过程——即npm run build产出静态资源文件夹dist/内的HTML/CSS/JS等素材内容。考虑到生产环境中可能存在的跨域资源共享(CORS)问题以及SEO优化需求等因素影响,在Nginx反向代理层面上做适当设置显得尤为重要[^4]: ```nginx server { listen 80; server_name yourdomain.com; location / { root /path/to/dist/; try_files $uri $uri/ /index.html; } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

千寻简

感谢支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值