若依ruoyi-vue3虚拟机前后端分离部署到nginx

ollivander23

已于 2024-09-20 13:58:04 修改

阅读量824

点赞数 13

文章标签： nginx 运维 ruoyi vue

于 2024-09-20 13:47:50 首次发布

本文链接：https://blog.csdn.net/2301_76996311/article/details/142382528

版权

版本说明

前端：yangzongzhuan/RuoYi-Vue3: :tada: (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统 (github.com)

后端：yangzongzhuan/RuoYi-Vue-fast: :tada: (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统 (github.com)

后端部署

1. 虚拟机安装mysql和redis

这里是用1Panel结合docker安装的

安装好之后使用navicate远程连接到mysql，然后运行后端项目里的sql文件

创建2个数据库，设置正确的字符集

2.后端项目修改配置文件

修改后端项目的bootstrap中mysql和redis的地址

成功启动项目之后，运行maven package，将target文件夹下生成的jar包上传到虚拟机上

3.后端jar包部署到虚拟机

首先需要在ubuntu系统下安装jdk，之后才能运行java -jar命令

命令执行成功之后，出现了启动成功的图标即可

前端部署

1.虚拟机安装nginx

sudo apt-get install nginx

2.打包前端项目

打包前需要修改vite.config.js，为了运行的时候可以连接到虚拟机上部署好的后端项目

我的虚拟机地址是192.68.21.128，后端项目运行在虚拟机的8080端口

 // vite 相关配置
    server: {
      host: "0.0.0.0",
      proxy: {
        // https://cn.vitejs.dev/config/#server-proxy
        [env.VITE_APP_BASE_API]: {
          target: 'http://192.168.21.128:8080',//这里填写你的虚拟机地址和后端项目的端口
          changeOrigin: true,
          secure: true,
          rewrite: (p) => p.replace(new RegExp(`^${env.VITE_APP_BASE_API}`), '')
        }
      }
    }

修改之后运行npm run dev看看项目能否正常运行

之后运行打包命令

npm run build:prod

打包好之生成了dist文件夹，运行npm run preview预览运行一下打包之后的项目

3.dist文件复制到虚拟机

将打包好的dist文件用1panel上传到对应的目录，默认是/var/www/html

然后访问localhost发现验证码接口404，接下来需要设置反代

4.设置nginx反向代理

nginx.conf文件，默认在/etc/nginx/nginx.conf

这里注意要设置反向代理，还要设置tryfiles，防止F5刷新vue页面404

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
	worker_connections 768;
	# multi_accept on;
}

http {

	##
	# Basic Settings
	##

	sendfile on;
	tcp_nopush on;
	types_hash_max_size 2048;
	# server_tokens off;

	# server_names_hash_bucket_size 64;
	# server_name_in_redirect off;

	include /etc/nginx/mime.types;
	default_type application/octet-stream;

	##
	# SSL Settings
	##

	ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
	ssl_prefer_server_ciphers on;

	##
	# Logging Settings
	##

	access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;

	##
	# Gzip Settings
	##

	gzip on;

	# gzip_vary on;
	# gzip_proxied any;
	# gzip_comp_level 6;
	# gzip_buffers 16 8k;
	# gzip_http_version 1.1;
	# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

	##
	# Virtual Host Configs
	##
	server {
		listen       80;
        server_name  localhost;
		location / {
			root   html;
            index  index.html index.htm;
			try_files $uri $uri/ @router;
		}

		#重点配置
		location @router {
			rewrite ^.*$ /index.html last;
		}

		location /prod-api/ {
			rewrite ^/prod-api/(.*)$ /$1 break;
			proxy_pass http://192.168.21.128:8080/;
			proxy_redirect off;
			proxy_set_header Host $host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		}
	}

	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;
	
}


#mail {
#	# See sample authentication script at:
#	# http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
#
#	# auth_http localhost/auth.php;
#	# pop3_capabilities "TOP" "USER";
#	# imap_capabilities "IMAP4rev1" "UIDPLUS";
#
#	server {
#		listen     localhost:110;
#		protocol   pop3;
#		proxy      on;
#	}
#
#	server {
#		listen     localhost:143;
#		protocol   imap;
#		proxy      on;
#	}
#}

这只完之后重启nginx