🍟若依前后端分离项目,部署到Linux服务器

Gitee地址:https://gitee.com/y_project/RuoYi-Vue.git

一、项目本地启动(Windows)

maven:3.6.3

jdk:1.8

mysql:8.0.18

1.1、后端项目配置,启动

1、创建数据库

1、创建数据库:ry-vue
2、执行两个SQL文件:sql/quartz.sql、sql/ry_20230223.sql

2、修改配置文件:ruoyi-admin/application.yml

  • 修改mysql连接信息
  • 修改redis连接信息
  • 修改项目启动端口号,这里我修改为了8058

 3、启动后端项目

浏览器访问:http://localhost:8058/

1.2、前端项目配置,启动

NodeJs版本:v16.18.1

NodeJs历史版本下载地址:https://nodejs.org/dist/

NodeJs安装:https://www.cnblogs.com/zhangzhixi/p/14305955.html#_label1_0

1、修改配置

修改ruoyi-ui/vue.config.js

// 修改前端项目端口
const port = process.env.port || process.env.npm_config_port || 8060 // 端口

// 后端项目ip和端口
target: `http://localhost:8058`,

2、构建启动  

# 进入项目目录
cd ruoyi-ui
# 安装依赖(建议不要直接使用 cnpm 安装依赖,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题)
npm install --registry=https://registry.npmmirror.com --strict-ssl=false
# 启动服务
npm run dev

3、访问

浏览器访问:http://localhost:8060/

默认用户名密码:admin  admin123

4、通过idea启动前端项目

二、Linux下项目部署

Centos版本:Centos7.4

虚拟机IP:192.168.147.128

2.1、后端项目部署(Jar包)

1、使用idea在本地maven打包

2、上传jar包到服务器

3、编写shell脚本执行:start_ruoyi_admin.sh

#!/bin/bash

# 1、常量
LOG_PATH=/usr/local/project/ruoyi/log.out     # 日志输出位置
JAVA_PATH=/usr/local/java/jdk1.8.0_144  # JDK位置
PROJECT_MANAGER_PATH=/usr/local/project/ruoyi/ruoyi-admin/ruoyi-admin.jar  # 后端项目位置
SERVER_PORT=8058 # 服务端口
# 记录开始时间
echo -e "\e[34m ==================start【$(date +"%Y-%m-%d %H:%M:%S")】================== \e[0m" >> $LOG_PATH

# 2、启动项目的函数
function start_project {
  nohup $JAVA_PATH/bin/java -jar -Dserver.port=$SERVER_PORT $PROJECT_MANAGER_PATH >>$LOG_PATH 2>&1 &
}

# 3、获取进程ID
PID=$(pgrep -f $PROJECT_MANAGER_PATH)

# 4、判断进程是否存在
if pgrep -f $PROJECT_MANAGER_PATH > /dev/null
then
  echo "进程存在,关闭项目,然后重启~" >> $LOG_PATH
  kill "$PID"
  sleep 5
  kill -9 "$PID" > /dev/null 2>&1
  start_project
else
  echo "进程不存在,启动项目" >> $LOG_PATH
  start_project
fi

# 记录结束时间
echo -e "\e[34m ==================end【$(date +"%Y-%m-%d %H:%M:%S")】================== \e[0m" >> $LOG_PATH

4、启动 

2.2、后端项目部署(War包)[根据需要,可选]

Tomcat中部署SpringBoot项目

2.3、前端项目部署

因为需要将vue程序部署到nginx,这里需要安装下。


Nginx安装教程

Linux下NodeJs安装教程

1、前端vue发布部署

  构建打包成功之后,会在根目录生成 dist 文件夹,里面就是构建打包好的文件,通常是 ***.js 、***.css、index.html 等静态文件

发布到你的 nginx 或者静态服务器即可,其中的 index.html 是后台服务的入口页面。

1、上传ruoyi-ui到Linux服务器,进入ruoyi-ui目录下

2、安装依赖:
	npm install --registry=https://registry.npmmirror.com --strict-ssl=false
	
3、第一种:运行(本地),直接通过ip加端口访问
	nohup npm run dev >> npm.out 2>&1 &
	
4、第二种:部署/打包,通过nginx进行发布
	npm run build:prod
	
4.2、nginx发布

server {
	# 1、vue项目端口
	listen       8060;
	server_name  localhost;

	location / {
		# 2、打包的文件路径
		root /usr/local/project/ruoyi/ruoyi-ui/dist;
		try_files $uri $uri/ /index.html;
		index  index.html index.htm;
	}
	
	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;
		# 3、后端项目访问地址
		proxy_pass http://localhost:8058/;
	}

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

5、关闭前端vue项目:
	ps -ef|grep mixky-ui|grep -v grep | awk '{print $2}' | xargs kill -9

2、浏览器访问:http://192.168.147.128:8060/

 

  

 

posted @ 2023-06-07 09:42  Java小白的搬砖路  阅读(2273)  评论(0编辑  收藏  举报