当前位置： 首页 > news >正文

部署若依springboot-vue前后端分离项目(Nginx反向代理 2022)

news 来源：原创 2024/5/19 2:09:03

文章目录

  • 前言
  • 1、本地启动项目
    • 1.1 配置远程连接服务器redis
    • 1.2 配置远程连接服务器mysql
    • 1.3 配置log文件输出位置和字符集
  • 2 打包
    • 2.1 打包你的前端项目
    • 2.2 打包你的后端项目
  • 3 部署你打包的文件(前端部署和后端部署)
    • 3.1 前端部署
    • 3.2 后端部署
  • 4 nginx后台集群部署
  • 5 观看日志

前言

学习自codeSheep
原视频链接

使用若依前后端分离项目做部署例子
即ry-vue

既然是部署项目
你应该有一台远程服务器

使用宝塔面板
注意每次修改nginx.conf后记得重新加载配置并重启

1、本地启动项目

主要要把redis
mysql 和 log日志的路径设置正确
我购买了阿里云的服务器
直接连接服务器的mysql 和 redis

1.1 配置远程连接服务器redis

关于宝塔如何开启redis远程访问请看这篇文章
链接

在这里插入图片描述

# redis 配置
  redis:
    # 地址
    host: 139.224.237.xxx
    # 端口，默认为6379
    port: 6379
    # 数据库索引
    database: 0
    # 密码
    password: 1xxxx
    # 连接超时时间
    timeout: 10s
    lettuce:
      pool:
        # 连接池中的最小空闲连接
        min-idle: 0
        # 连接池中的最大空闲连接
        max-idle: 8
        # 连接池的最大数据库连接数
        max-active: 8
        # #连接池最大阻塞等待时间（使用负值表示没有限制）
        max-wait: -1ms

1.2 配置远程连接服务器mysql

做这一步的前提是你的服务器上已经有了ry-vue这个数据库
可以通过宝塔面板自带的phpadmin直接运行sql文件
导入数据库
在这里插入图片描述
在这里插入图片描述

关于宝塔如何开启mysql远程访问请看这篇文章
链接

在这里插入图片描述

            # 主库数据源
            master:
                url: jdbc:mysql://139.224.xxx.xxx:3306/ry-vue?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
                username: root
                password: 123456

1.3 配置log文件输出位置和字符集

1
我这里是在root目录下
自己mkdir log创建了一个
在这里插入图片描述
2
配置字符集
所有标签下都设置

<charset>UTF-8</charset>

避免日志乱码
在这里插入图片描述

最后本地启动项目
启动成功
在这里插入图片描述

2 打包

2.1 打包你的前端项目

1 在服务器打包前端项目

把前端项目压缩成zip后上传到服务器
解压后
cd到目录执行命令

npm install --unsafe-perm --registry=https://registry.npm.taobao.org

安装基本依赖

接着运行如下命令进行打包

npm run build:prod

如果出现报错

/node_modules/.bin/vue-cli-service: Permission denied

更改一下权限再run build
chmod 777 项目文件夹/node_modules/.bin/vue-cli-service

最后会在项目目录生成一个dist文件夹

2 在本地打包前端项目

操作一样
本地的dist文件夹记得传给服务器

2.2 打包你的后端项目

1 打成jar包
直接本地IDEA

packge

把生成的Jar包传给服务器即可

2 打成war包(可以把war包部署到服务器的tomcat中)
1 jar包改成war
在这里插入图片描述
2 新增一个依赖
在这里插入图片描述

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
            <scope>provided</scope>
        </dependency>

3 新增一个类
在这里插入图片描述

package com.ruoyi;

import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

public class SpringbootStartApplication extends SpringBootServletInitializer {
    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) {
        return builder.sources(RuoYiApplication.class);
    }
}

接着clean

package打出war包
在这里插入图片描述

3 部署你打包的文件(前端部署和后端部署)

3.1 前端部署

首先找到你的nginx文件夹的位置
打开conf文件夹
找到nginx.conf
准备对其进行修改
在这里插入图片描述
新加一个server节点
对下面的配置文件进行解释
在这里插入图片描述

监听xxx主机的 8084端口

只要一访问该端口就会被定位到root 对应目录下的资源
这里的root目录对应的就是你前端打包的dist文件夹对应的绝对路径’
从index进入资源
try_files xxxx 解决的是刷新页面404的问题

可以使用pwd命令查看绝对路径
在这里插入图片描述

server
    {
        listen 8084;
        server_name localhost;
        index index.html index.htm index.php;
        root  /www/server/nginx/html/ry_before;
        try_files $uri $uri/ /index.html;	


	

        location /prod-api/
        {
             #proxy_redirect off;
             proxy_set_header Host $http_host;
             proxy_set_header REMOTE-HOST $remote_addr;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_pass http://139.224.237.247:8087/;
        }


        #error_page   404   /404.html;
        include enable-php.conf;

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }

        location ~ /\.
        {
            deny all;
        }
        
        


        access_log  /www/wwwlogs/access.log;
    }

接着重载配置
重启你的nginx服务器 访问对应服务器ip加上端口号
如果是阿里云等服务器 配宝塔 记得放行阿里云和宝塔端口
在这里插入图片描述

3.2 后端部署

前端部署好以后F12
发现请求都是404
在这里插入图片描述
首先启动你的后台
cd到后端项目目录下

# 在后台一直运行这个jar包
# 这个jar包的端口我改为了 8087 因为我本地博客的端口在8080 冲突了

nohup java -jar ruoyi-admin.jar &

如果想要杀死这个后台

ps -aux | grep java

kill -9 pid

配置nginx
把8084/prod-api/capxxxx

的请求转为

8087/capxxxx

        location /prod-api/
        {
             #proxy_redirect off;
             proxy_set_header Host $http_host;
             proxy_set_header REMOTE-HOST $remote_addr;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_pass http://139.224.237.247:8087/;
        }

完整配置

server
    {
        listen 8084;
        server_name localhost;
        index index.html index.htm index.php;
        root  /www/server/nginx/html/ry_before;
        try_files $uri $uri/ /index.html;	


	

        location /prod-api/
        {
             #proxy_redirect off;
             proxy_set_header Host $http_host;
             proxy_set_header REMOTE-HOST $remote_addr;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_pass http://139.224.237.247:8087/;
        }


        #error_page   404   /404.html;
        include enable-php.conf;

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }

        location ~ /\.
        {
            deny all;
        }
        
        


        access_log  /www/wwwlogs/access.log;
    }

再访问前端就一切正常了

4 nginx后台集群部署

修改你的nginx.conf
与server同级新增配置
在这里插入图片描述

upstream ruoyi{
	server 192.你的服务器1地址.xxx:端口 weight=权重;
	server 192.你的服务器2地址.xxx:端口 weight=权重;
}

在这里插入图片描述

        location /prod-api/
        {
             #proxy_redirect off;
             proxy_set_header Host $http_host;
             proxy_set_header REMOTE-HOST $remote_addr;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_pass http://ruoyi/;
        }

这样配置好了集群
后端有一个服务器挂掉也不影响正常运行

5 观看日志

cd 到你配置文件部署的路径下
观看日志
在这里插入图片描述

在这里插入图片描述

相关文章：

  • Kafka 优化问题
  • 【opencv-c++】windows10系统VisualStudio2022配置opencv_contrib-4.6.0
  • windows安装动力学仿真软件Frost并计算cassie机器人运动学和动力学
  • 使用 SolidJS 和 TypeScript 构建任务跟踪器
  • 【C++】list的模拟实现
  • 【Kotlin基础系列】第4章 类型
  • Vm虚拟机安装Linux系统教程
  • Java设计模式-单列模式
  • 算法 | 算法是什么？深入精讲
  • C++虚函数具体实现机制以及纯虚函数和抽象类（对多态的补充）
  • Trusted Applications介绍
  • Python函数与参数
  • C++发布订阅模式
  • CentOS7 下载安装卸载 Docker——Docker启动关闭
  • iOS 集成Jenkins 完整流程 （自由风格）
  • conda常用的命令
  • flask接收请求并推入栈
  • JAVA多线程机制解析-volatilesynchronized
  • Just for fun——迅速写完快速排序
  • Laravel Telescope：优雅的应用调试工具
  • Leetcode 27 Remove Element
  • LeetCode刷题——29. Divide Two Integers（Part 1靠自己）
  • Mysql数据库的条件查询语句
  • Python利用正则抓取网页内容保存到本地
  • Webpack 4 学习01（基础配置）
  • 缓存与缓冲
  • 简单基于spring的redis配置(单机和集群模式)
  • 数据库写操作弃用“SELECT ... FOR UPDATE”解决方案
  • 提升用户体验的利器——使用Vue-Occupy实现占位效果
  • 通过git安装npm私有模块
  • 吐槽Javascript系列二：数组中的splice和slice方法
  • 译自由幺半群
  • 鱼骨图 - 如何绘制？
  • ​​快速排序（四）——挖坑法，前后指针法与非递归
  • (PyTorch)TCN和RNN/LSTM/GRU结合实现时间序列预测
  • （第27天）Oracle 数据泵转换分区表
  • （非本人原创）史记·柴静列传(r4笔记第65天)
  • （论文阅读笔记）Network planning with deep reinforcement learning
  • (三)uboot源码分析
  • （学习日记）2024.04.04：UCOSIII第三十二节：计数信号量实验
  • (译) 理解 Elixir 中的宏 Macro, 第四部分：深入化
  • （转）淘淘商城系列——使用Spring来管理Redis单机版和集群版
  • （最优化理论与方法）第二章最优化所需基础知识-第三节：重要凸集举例
  • ******IT公司面试题汇总+优秀技术博客汇总
  • ./configure、make、make install 命令
  • .NET CF命令行调试器MDbg入门（三） 进程控制
  • .net mvc部分视图
  • .net 打包工具_pyinstaller打包的exe太大？你需要站在巨人的肩膀上-VC++才是王道
  • .NET 命令行参数包含应用程序路径吗？
  • .NET/ASP.NETMVC 大型站点架构设计—迁移Model元数据设置项（自定义元数据提供程序）...
  • @vue/cli脚手架
  • [ Linux Audio 篇 ] 音频开发入门基础知识
  • [ 常用工具篇 ] POC-bomber 漏洞检测工具安装及使用详解
  • [Android Pro] AndroidX重构和映射
  • [BZOJ] 2044: 三维导弹拦截