RuoYi-Vue部署(Nginx+Tomcat)_若依用nginx如何搭建

1.ruoyi-ui鼠标右键-->打开于终端
 
2.安装依赖：npm install --registry=https://registry.npm.taobao.org-->node_modules
 
3.编译打包：npm run build:prod-->dist

前端部署

1.将RuoYi-Vue\ruoyi-ui\dist下所有文件复制到/opt/nginx/nginx_install/html
 
2.编辑：/opt/nginx/nginx_install/conf/nginx.conf
server {
	listen       8181;
	server_name  192.168.1.97;
	#前端打的dist资源存放目录
	root		   /opt/nginx/nginx_install/html;
	
	location / {
		# 用于配合 browserHistory使用
		try_files $uri $uri/ /index.html;
	}
}
 
3.Nginx常用命令(重载配置需要在启动状态下执行)
启动/查看/关闭/重载-->nginx/ps -ef | grep -i nginx/nginx -s stop/nginx -s reload
 
4.放开端口：firewall-cmd --zone=public --add-port=8181/tcp --permanent && firewall-cmd --reload
 
5.前端访问：192.168.1.97:8181-->验证码加载失败

后端打包

1.编辑：RuoYi-Vue\ruoyi-admin\pom.xml
<packaging>war</packaging>
<artifactId>ruoyi-admin</artifactId>
 
2.编辑RuoYi-Vue\ruoyi-admin\src\main\resources\application-druid.yml-->连接服务器MySQL
# 主库数据源
master:
    url: jdbc:mysql://192.168.1.97:3306/ry-vue?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
    username: mysql
    password: 123456
 
3.编辑RuoYi-Vue\ruoyi-admin\src\main\resources\application.yml-->连接服务器Redis
# redis 配置
redis:
  # 地址
  host: 192.168.1.97
  # 端口，默认为6379
  port: 6379
  # 数据库索引
  database: 0
  # 密码
  password: '123456'
 
4.编辑RuoYi-Vue\ruoyi-admin\src\main\resources\logback.xml-->变更日志文件存放路径
<property name="log.path" value="/opt/nginx/nginx_install/html/log" />
 
5.顶层Maven命令clean、install、package-->RuoYi-Vue\ruoyi-admin\target\ruoyi-admin.war
 
注意：MySQL创建用户(用户名：mysql 密码：123456)，创建数据库ry-vue并执行RuoYi-Vue\sql目录下脚本文件

后端部署

1.编辑：/opt/tomcat/apache-tomcat-9.0.70/conf/server.xml
<Connector port="8282" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8"/>
 
2.将RuoYi-Vue\ruoyi-admin\target\ruoyi-admin.war放入/opt/tomcat/apache-tomcat-9.0.70/webapps
 
3.Tomcat常用命令
启动/关闭/查看-->startup.sh/shutdown.sh/ps -ef | grep -i tomcat
 
4.放开端口：firewall-cmd --zone=public --add-port=8282/tcp --permanent && firewall-cmd --reload
 
5.后端访问：http://192.168.1.97:8282/ruoyi-admin

Nginx动静分离

1.RuoYi-Vue为典型前后端分离项目，Nginx作为静态服务器部署前端项目(处理静态资源请求)，Tomcat作为动态服务器部署后端项目
(处理动态资源请求),同时Nginx作为反向代理服务器，接收到静态资源请求后交由Nginx处理，接收到动态资源请求后交由Tomcat处理
 
2.验证码请求http://192.168.1.97:8181/prod-api/captchaImage为动态请求，反向代理服务器Nginx
接收到请求后需要将请求转给Tomcat处理，转到http://192.168.1.97:8282/ruoyi-admin/prod-api/captchaImage
 
3.实现验证码请求转发，Nginx需要将http://192.168.1.97:8181/prod-api/开头的请求转到
http://192.168.1.97:8282/ruoyi-admin/，编辑/opt/nginx/nginx_install/conf/nginx.conf
server {
	listen       8181;
	server_name  192.168.1.97;
	#前端打的dist资源存放目录
	root		   /opt/nginx/nginx_install/html;
	
	location / {
		# 用于配合 browserHistory使用
		try_files $uri $uri/ /index.html;
	}
	
	location /prod-api/ {
		# 反向代理,将/prod-api/匹配的请求路径转发到指定服务器
		proxy_pass http://192.168.1.97:8282/ruoyi-admin/;
	}
}
 
4.前端访问：192.168.1.97:8181-->验证码成功加载

Nginx虚拟主机

1.目前为止，项目通过IP直接访问，接下来通过Nginx虚拟主机模拟域名访问
 
2.编辑：C:\Windows\System32\drivers\etc\hosts
192.168.1.97 my.ruoyi.com
 
3.编辑/opt/nginx/nginx_install/conf/nginx.conf
server {
	listen       80;
	server_name  my.ruoyi.com;
	#前端打的dist资源存放目录
	root		   /opt/nginx/nginx_install/html;
	
	location / {
		# 用于配合 browserHistory使用
		try_files $uri $uri/ /index.html;
	}
	
	location /prod-api/ {
		# 反向代理,将/prod-api/匹配的请求路径转发到指定服务器
		proxy_pass http://192.168.1.97:8282/ruoyi-admin/;
	}
}
 
4.放开端口：firewall-cmd --zone=public --add-port=80/tcp --permanent && firewall-cmd --reload
 
5.项目访问：my.ruoyi.com