负载均衡的简单探索（react+nginx+nodejs)

1、首先我们先创建一个react项目，主要功能就是一个按钮，点击一下访问后端api。创建react项目的步骤之前有写到，可以翻翻前面我写的博客。这里贴出生成react模板之后，修改app.js的代码。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios' ;
 
import { Layout, Menu, Button,Breadcrumb, Icon } from 'antd';
 
class App extends Component {
 
 
    constructor(props) {
        super(props)
        this.state = {
         list:[] }
         this.handleClick=this.handleClick.bind(this)
 
        }
 
handleClick(){
  let  url="http://127.0.0.1:1818/getuserinfo/"
axios.get(url)
  .then(function (response) {
    let data =response.data
    console.log(data);
  })
  .catch(function (error) {
    console.log(error);
  });
}
 
 
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <Button onClick={this.handleClick}>测试调用接口</Button>
      </div>
    );
  }
}
 
export default App;

2、然后我们安装一下nginx，这里网上也有很多的教程，大家可以去翻翻。这里贴出配置nginx.conf文件的代码。

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
   
    keepalive_timeout  65;
    upstream group1 {
      server 127.0.0.1:8081 weight=1;
      server 127.0.0.1:8082 weight=1;
    }
    server {
        listen       1818;
        server_name  localhost;
        default_type text/html;

        location /getuserinfo/ {
          proxy_pass http://group1/getuserinfo;

        }
        

      
    }

}

3、最后我们来编写nodejs的代码，在这里nodejs的作用主要是查数据库提供数据。我们要创建并运行两个nodejs服务，让他在两个端口不断地提供数据，供前端查询。

具体创建nodejs项目的方法很简单，我们在桌面创建一个文件夹，server1，cmd进入该目录，需要npm install express以及npm install mysql。之后我们再创建一个server.js的文件。退出目录。将server1文件夹复制一份，命名为server2，依然放在桌面。更改server2文件夹中server.js的代码。大功告成。

这里贴出server.js的代码，另一个只需要把端口号从8081改成8082就好。

const express = require('express');
const app = express();
const mysql = require('mysql');

const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'your password',     // 改成你自己的密码
    database: 'nodejstest'    // 改成你的数据库名称
});

connection.connect();

// 下面是解决跨域请求问题
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1');
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
 });

// 这里就是主要要修改的地方，其实也就一行
// 把 address 改成你自己定的地址，就是连接访问的那个地址
app.get('/getuserinfo',function(err,res){
    const sql = 'select * from user'; // 写你需要的sql代码，你要是不会写那我就真的没办法了
    connection.query(sql,function(err,result){
        if(err){
            console.log('[SELECT ERROR] - ', err.message);
            return;
        }
        // result内放的就是返回的数据，res是api传数据
        // 返回的数据需要转换成JSON格式
        res.json(result); 
    }); 
})    

var server = app.listen(8081, '127.0.0.1', function () {

    var host = server.address().address;
    var port = server.address().port;

    console.log("地址为 http://%s:%s", host, port);
})

我们把nginx运行起来，它监听1818端口，把react运行起来，它监听3000端口，把两个nodejs运行起来，分别监听8081和8082端口。

我们点击react页面上的按钮，它会向1818端口发送一个get请求，1818是nginx正在监听的，它将从8081和8082中选择一个转发这个get请求，最后目标端口将数据传回来。

这个转发的过程就是简单的负载均衡。