Vue-cli3.x Springboot SpringSession Redis Nginx Mysql 处理上万并发

素颜马尾好姑娘i 2024-04-18 21:04 17阅读 0赞

## 前端 ##

### 配置跨域请求 ###

##### 项目根路径创建vue.config.js #####

module.exports = {
    // 修改的配置
        // 将baseUrl: '/api',改为baseUrl: '/',
        baseUrl: '/',
        devServer: {
            proxy: {
                '/api': {
                    //自己后台nginx的IP地址
                    target: 'http://*.*.*.*:',
                    changeOrigin: true,
                    ws: true,
                    pathRewrite: {
                    //将请求接口地址重写为
                      '^/api': 'http://*.*.*.*:'
                    }
                }
            }
        }
    }

### 使用axios调用后台接口 ###

## Springboot Web ##

### 配置 ###

#mysql数据库连接
    server.port=9999
    spring.datasource.url=jdbc:mysql://*.*.*.*:3306/cslg?useUnicode=true&characterEncoding=utf-8
    spring.datasource.username=unm
    spring.datasource.password=pwd
    spring.datasource.driver-class-name=com.mysql.jdbc.Driver
    
    #redis数据库连接
    # spring session使用存储类型
    spring.session.store-type=redis
    spring.redis.host=localhost
    spring.redis.password=pwd
    spring.redis.port=6379

### 启动类上加上@EnableRedisHttpSession ###

package com.cslg.edu;
    
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    import org.springframework.session.data.redis.config.annotation.web.http.EnableRedisHttpSession;
    
    @EnableRedisHttpSession
    @SpringBootApplication
    public class EduApplication {
    
        public static void main(String[] args) {
            SpringApplication.run(EduApplication.class, args);
        }
    
    }

使用共享session的原因：因为不同的后台是独立的应用，A用户第一次登录信息保存在A服务器上的Session中，第二次Nginx将请求发送给B服务器上，B服务器Session中没有A用户的信息，所以认为他没有登录，故需要共享session。即：将所有Session保存在Redis数据库中，所有web后台从Redis数据库获取用户信息从而保证了数据一致性

### nginx服务器配置 ###

upstream webserver{
            # 后台服务器接口地址
            server a.a.a.a:port;
            server b.b.b.b:port;
    }
    server {
            listen 80 default_server;
            listen [::]:80 default_server;
        
            location / {
                    # 转发至a后台接口，或者b后台接口
                    proxy_pass http://webserver;
            }
    }

此处使用nginx服务器做负载均衡，利用nginx的转发功能，将vue axios请求nginx服务器，nginx服务器按照轮询将请求转发至后台服务器，后台再各自将结果返回给前端