nginx的使用

nginx是什麼?
nginx是一個開源的,支持高性能,高併發的www服務和代理服務軟件。它是一個俄羅斯人lgor sysoev開發的,做者將源代碼開源出來供全球使用。
nginx比它大哥apache性能改進許多,nginx佔用的系統資源更少,支持更高的併發鏈接,有更高的訪問效率。
nginx不可是一個優秀的web服務軟件,還能夠做爲反向代理,負載均衡,以及緩存服務使用。
安裝更爲簡單,方便,靈活。
nginx的優勢:
支持高併發,能支持幾萬併發鏈接
資源消耗少,在3萬併發鏈接下開啓10個nginx線程消耗的內存不到200M
能夠作http反向代理和負載均衡
支持異步網絡i/o事件模型epoll

 

1.下載配置nginx軟件

(1)解決nginx所需的依賴包(在opt目錄下)
yum install gcc patch libffi-devel python-devel  zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel db4-devel libpcap-devel xz-devel openssl openssl-devel -y
(2)下載源碼包
wget -c https://nginx.org/download/nginx-1.12.0.tar.gz
(3)解壓縮源碼
tar -zxvf nginx-1.12.0.tar.gz
(4)配置,編譯安裝 ,開啓nginx狀態監測功能(先進入到nginx-1.12.0文件夾)
./configure --prefix=/opt/nginx1-12/ 
(5)make && make install 

 

查看nginx的工做目錄css

conf  nginx的配置文件目錄
html  網頁根目錄
logs  日誌
sbin  存放nginx可執行命令

 

2.快速複製出一個小的網頁

進入nginx112目錄下的html文件夾,在文件夾中找到index.html文件
找到像替換的網頁的源代碼,替換該文件

 

隨意找的源代碼html

<style>
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');

body {
  margin: 0;
  font-family: 'Press Start 2P', cursive;
  font-size: 2em;
  color: white;
}
button {
  outline: none;
  cursor: pointer;
}
#counter {
  position: absolute;
  top: 20px;
  right: 20px;
}
#end {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
}
#end button {
  background-color: red;
  padding: 20px 50px 20px 50px;
  font-family: inherit;
  font-size: inherit;
}
#controlls {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#controlls div {
  margin-bottom: 20px;
  font-size: 0;
  max-width: 180px;
}
#controlls button {
  width: 50px;
  font-family: inherit;
  font-size: 30px;
  border: 3px solid white;
  color: white;
  background-color: transparent;
  margin: 5px;
}
#controlls button:first-of-type {
  width: 170px;
}
</style>


<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.min.js"></script>
<a style="color:red";href="https://www.cnblogs.com/pyyu/">博客園地址:https://www.cnblogs.com/pyyu/ 點我呀 老弟</a>
<div id="counter">0</div>
<div id="controlls">
  <div>
    <button id="forward" style="color:black">↑向前</button>
    <button id="left" style="color:black">←向左</button>
    <button id="backward" style="color:black">↓向下</button>
    <button id="right" style="color:black">→向右</button>
  </div>
</div>

<div id="end">
  <button id="retry">Retry</button>
</div>


<script>
const counterDOM = document.getElementById('counter');  
const endDOM = document.getElementById('end');  

const scene = new THREE.Scene();

const distance = 500;
const camera = new THREE.OrthographicCamera( window.innerWidth/-2, window.innerWidth/2, window.innerHeight / 2, window.innerHeight / -2, 0.1, 10000 );

camera.rotation.x = 50*Math.PI/180;
camera.rotation.y = 20*Math.PI/180;
camera.rotation.z = 10*Math.PI/180;

const initialCameraPositionY = -Math.tan(camera.rotation.x)*distance;
const initialCameraPositionX = Math.tan(camera.rotation.y)*Math.sqrt(distance**2 + initialCameraPositionY**2);
camera.position.y = initialCameraPositionY;
camera.position.x = initialCameraPositionX;
camera.position.z = distance;

const zoom = 2;

const chickenSize = 15;

const positionWidth = 42;
const columns = 17;
const boardWidth = positionWidth*columns;

const stepTime = 200; // Miliseconds it takes for the chicken to take a step forward, backward, left or right

let lanes;
let currentLane;
let currentColumn;

let previousTimestamp;
let startMoving;
let moves;
let stepStartTimestamp;

const carFrontTexture = new Texture(40,80,[{x: 0, y: 10, w: 30, h: 60 }]);
const carBackTexture = new Texture(40,80,[{x: 10, y: 10, w: 30, h: 60 }]);
const carRightSideTexture = new Texture(110,40,[{x: 10, y: 0, w: 50, h: 30 }, {x: 70, y: 0, w: 30, h: 30 }]);
const carLeftSideTexture = new Texture(110,40,[{x: 10, y: 10, w: 50, h: 30 }, {x: 70, y: 10, w: 30, h: 30 }]);

const truckFrontTexture = new Texture(30,30,[{x: 15, y: 0, w: 10, h: 30 }]);
const truckRightSideTexture = new Texture(25,30,[{x: 0, y: 15, w: 10, h: 10 }]);
const truckLeftSideTexture = new Texture(25,30,[{x: 0, y: 5, w: 10, h: 10 }]);

const generateLanes = () => [-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9].map((index) => {
    const lane = new Lane(index);
    lane.mesh.position.y = index*positionWidth*zoom;
    scene.add( lane.mesh );
    return lane;
}).filter((lane) => lane.index >= 0);

const addLane = () => {
    const index = lanes.length;
    const lane = new Lane(index);
    lane.mesh.position.y = index*positionWidth*zoom;
    scene.add(lane.mesh);
    lanes.push(lane);
}

const chicken = new Chicken();
scene.add( chicken );

const laneTypes = ['car', 'truck', 'forest'];
const laneSpeeds = [2, 2.5, 3];
const vechicleColors = [0xa52523, 0xbdb638, 0x78b14b];
const threeHeights = [20,45,60];

const initaliseValues = () => {
    lanes = generateLanes()

    currentLane = 0;
    currentColumn = Math.floor(columns/2);

    previousTimestamp = null;

    startMoving = false;
    moves = [];
    stepStartTimestamp;

    chicken.position.x = 0;
    chicken.position.y = 0;

    camera.position.y = initialCameraPositionY;
    camera.position.x = initialCameraPositionX;
}

initaliseValues();

const renderer = new THREE.WebGLRenderer({
  alpha: true,
  antialias: true
});
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6);
scene.add(hemiLight)

dirLight = new THREE.DirectionalLight(0xffffff, 0.6);
dirLight.position.set(-100, -100, 200);
dirLight.castShadow = true;
scene.add(dirLight);

dirLight.shadow.mapSize.width = 2048;
dirLight.shadow.mapSize.height = 2048;
var d = 500;
dirLight.shadow.camera.left = - d;
dirLight.shadow.camera.right = d;
dirLight.shadow.camera.top = d;
dirLight.shadow.camera.bottom = - d;

// var helper = new THREE.CameraHelper( dirLight.shadow.camera );
// var helper = new THREE.CameraHelper( camera );
// scene.add(helper)

backLight = new THREE.DirectionalLight(0x000000, .4);
backLight.position.set(200, 200, 50);
backLight.castShadow = true;
scene.add(backLight)

function Texture(width, height, rects) {
    const canvas = document.createElement( "canvas" );
    canvas.width = width;
    canvas.height = height;
    const context = canvas.getContext( "2d" );
    context.fillStyle = "#ffffff";
    context.fillRect( 0, 0, width, height );
    context.fillStyle = "rgba(0,0,0,0.6)";  
    rects.forEach(rect => {
      context.fillRect(rect.x, rect.y, rect.w, rect.h);
    });
    return new THREE.CanvasTexture(canvas);
}

function Wheel() {
    const wheel = new THREE.Mesh( 
      new THREE.BoxBufferGeometry( 12*zoom, 33*zoom, 12*zoom ), 
      new THREE.MeshLambertMaterial( { color: 0x333333, flatShading: true } ) 
    );
    wheel.position.z = 6*zoom;
    return wheel;
}

function Car() {
  const car = new THREE.Group();
  const color = vechicleColors[Math.floor(Math.random() * vechicleColors.length)];
  
  const main = new THREE.Mesh(
    new THREE.BoxBufferGeometry( 60*zoom, 30*zoom, 15*zoom ), 
    new THREE.MeshPhongMaterial( { color, flatShading: true } )
  );
  main.position.z = 12*zoom;
  main.castShadow = true;
  main.receiveShadow = true;
  car.add(main)
  
  const cabin = new THREE.Mesh(
    new THREE.BoxBufferGeometry( 33*zoom, 24*zoom, 12*zoom ), 
    [
      new THREE.MeshPhongMaterial( { color: 0xcccccc, flatShading: true, map: carBackTexture } ),
      new THREE.MeshPhongMaterial( { color: 0xcccccc, flatShading: true, map: carFrontTexture } ),
      new THREE.MeshPhongMaterial( { color: 0xcccccc, flatShading: true, map: carRightSideTexture } ),
      new THREE.MeshPhongMaterial( { color: 0xcccccc, flatShading: true, map: carLeftSideTexture } ),
      new THREE.MeshPhongMaterial( { color: 0xcccccc, flatShading: true } ), // top
      new THREE.MeshPhongMaterial( { color: 0xcccccc, flatShading: true } ) // bottom
    ]
  );
  cabin.position.x = 6*zoom;
  cabin.position.z = 25.5*zoom;
  cabin.castShadow = true;
  cabin.receiveShadow = true;
  car.add( cabin );
  
  const frontWheel = new Wheel();
  frontWheel.position.x = -18*zoom;
  car.add( frontWheel );

  const backWheel = new Wheel();
  backWheel.position.x = 18*zoom;
  car.add( backWheel );

  car.castShadow = true;
  car.receiveShadow = false;
  
  return car;  
}

function Truck() {
    const truck = new THREE.Group();
    const color = vechicleColors[Math.floor(Math.random() * vechicleColors.length)];
    

    const base = new THREE.Mesh(
        new THREE.BoxBufferGeometry( 100*zoom, 25*zoom, 5*zoom ), 
        new THREE.MeshLambertMaterial( { color: 0xb4c6fc, flatShading: true } )
    );
    base.position.z = 10*zoom;
    truck.add(base)

    const cargo = new THREE.Mesh(
      new THREE.BoxBufferGeometry( 75*zoom, 35*zoom, 40*zoom ), 
      new THREE.MeshPhongMaterial( { color: 0xb4c6fc, flatShading: true } )
    );
    cargo.position.x = 15*zoom;
    cargo.position.z = 30*zoom;
    cargo.castShadow = true;
    cargo.receiveShadow = true;
    truck.add(cargo)

    const cabin = new THREE.Mesh(
      new THREE.BoxBufferGeometry( 25*zoom, 30*zoom, 30*zoom ), 
      [
        new THREE.MeshPhongMaterial( { color, flatShading: true } ), // back
        new THREE.MeshPhongMaterial( { color, flatShading: true, map: truckFrontTexture } ),
        new THREE.MeshPhongMaterial( { color, flatShading: true, map: truckRightSideTexture } ),
        new THREE.MeshPhongMaterial( { color, flatShading: true, map: truckLeftSideTexture } ),
        new THREE.MeshPhongMaterial( { color, flatShading: true } ), // top
        new THREE.MeshPhongMaterial( { color, flatShading: true } ) // bottom
      ]
    );
    cabin.position.x = -40*zoom;
    cabin.position.z = 20*zoom;
    cabin.castShadow = true;
    cabin.receiveShadow = true;
    truck.add( cabin );
    
    const frontWheel = new Wheel();
    frontWheel.position.x = -38*zoom;
    truck.add( frontWheel );
  
    const middleWheel = new Wheel();
    middleWheel.position.x = -10*zoom;
    truck.add( middleWheel );

    const backWheel = new Wheel();
    backWheel.position.x = 30*zoom;
    truck.add( backWheel );
    
    return truck;  
  }

function Three() {
    const three = new THREE.Group();
    
    const trunk = new THREE.Mesh(
      new THREE.BoxBufferGeometry( 15*zoom, 15*zoom, 20*zoom ), 
      new THREE.MeshPhongMaterial( { color: 0x4d2926, flatShading: true } )
    );
    trunk.position.z = 10*zoom;
    trunk.castShadow = true;
    trunk.receiveShadow = true;
    three.add(trunk);

    height = threeHeights[Math.floor(Math.random()*threeHeights.length)];

    const crown = new THREE.Mesh(
        new THREE.BoxBufferGeometry( 30*zoom, 30*zoom, height*zoom ), 
        new THREE.MeshLambertMaterial( { color: 0x7aa21d, flatShading: true } )
    );
    crown.position.z = (height/2+20)*zoom;
    crown.castShadow = true;
    crown.receiveShadow = false;
    three.add(crown);
    
    return three;  
}

function Chicken() {
    const chicken = new THREE.Group();
    
    const body = new THREE.Mesh(
      new THREE.BoxBufferGeometry( chickenSize*zoom, chickenSize*zoom, 20*zoom ), 
      new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } )
    );
    body.position.z = 10*zoom;
    body.castShadow = true;
    body.receiveShadow = true;
    chicken.add(body);

    const rowel = new THREE.Mesh(
        new THREE.BoxBufferGeometry( 2*zoom, 4*zoom, 2*zoom ), 
        new THREE.MeshLambertMaterial( { color: 0xF0619A, flatShading: true } )
    );
    rowel.position.z = 21*zoom;
    rowel.castShadow = true;
    rowel.receiveShadow = false;
    chicken.add(rowel);
    
    return chicken;  
}

function Road() {
    const road = new THREE.Group();

    const createSection = color => new THREE.Mesh(
        new THREE.PlaneBufferGeometry( boardWidth*zoom, positionWidth*zoom ), 
        new THREE.MeshPhongMaterial( { color } )
    );

    const middle = createSection(0x454A59);
    middle.receiveShadow = true;
    road.add(middle);

    const left = createSection(0x393D49);
    left.position.x = - boardWidth*zoom;
    road.add(left);

    const right = createSection(0x393D49);
    right.position.x = boardWidth*zoom;
    road.add(right);
    
    return road;
}

function Grass() {
    const grass = new THREE.Group();

    const createSection = color => new THREE.Mesh(
        new THREE.BoxBufferGeometry( boardWidth*zoom, positionWidth*zoom, 3*zoom ), 
        new THREE.MeshPhongMaterial( { color } )
    );

    const middle = createSection(0xbaf455);
    middle.receiveShadow = true;
    grass.add(middle);

    const left = createSection(0x99C846);
    left.position.x = - boardWidth*zoom;
    grass.add(left);

    const right = createSection(0x99C846);
    right.position.x = boardWidth*zoom;
    grass.add(right);

    grass.position.z = 1.5*zoom;
    return grass;
}

function Lane(index) {
    this.index = index;
    this.type = index <= 0 ? 'field' : laneTypes[Math.floor(Math.random()*laneTypes.length)];

    switch(this.type) {
        case 'field': {
            this.type = 'field';
            this.mesh = new Grass();
            break;
        }
        case 'forest': {
            this.mesh = new Grass();
            
            this.occupiedPositions = new Set();
            this.threes = [1,2,3,4].map(() => {
                const three = new Three();
                let position;
                do {
                    position = Math.floor(Math.random()*columns);
                }while(this.occupiedPositions.has(position))
                this.occupiedPositions.add(position);
                three.position.x = (position*positionWidth+positionWidth/2)*zoom-boardWidth*zoom/2;
                this.mesh.add( three );
                return three;
            })
            break;
        }
        case 'car' : {
            this.mesh = new Road();
            this.direction = Math.random() >= 0.5;
            
            const occupiedPositions = new Set();
            this.vechicles = [1,2,3].map(() => {
                const vechicle = new Car();
                let position;
                do {
                    position = Math.floor(Math.random()*columns/2);
                }while(occupiedPositions.has(position))
                occupiedPositions.add(position);
                vechicle.position.x = (position*positionWidth*2+positionWidth/2)*zoom-boardWidth*zoom/2;
                if(!this.direction) vechicle.rotation.z = Math.PI;
                this.mesh.add( vechicle );
                return vechicle;
            })

            this.speed = laneSpeeds[Math.floor(Math.random()*laneSpeeds.length)];
            break;
        }
        case 'truck' : {
            this.mesh = new Road();
            this.direction = Math.random() >= 0.5;
            
            const occupiedPositions = new Set();
            this.vechicles = [1,2].map(() => {
                const vechicle = new Truck();
                let position;
                do {
                    position = Math.floor(Math.random()*columns/3);
                }while(occupiedPositions.has(position))
                occupiedPositions.add(position);
                vechicle.position.x = (position*positionWidth*3+positionWidth/2)*zoom-boardWidth*zoom/2;
                if(!this.direction) vechicle.rotation.z = Math.PI;
                this.mesh.add( vechicle );
                return vechicle;
            })

            this.speed = laneSpeeds[Math.floor(Math.random()*laneSpeeds.length)];
            break;
        }
    }
}

document.querySelector("#retry").addEventListener("click", () => {
    lanes.forEach(lane => scene.remove( lane.mesh ));
    initaliseValues();
    endDOM.style.visibility = 'hidden';
});

document.getElementById('forward').addEventListener("click", () => move('forward'));

document.getElementById('backward').addEventListener("click", () => move('backward'));

document.getElementById('left').addEventListener("click", () => move('left'));

document.getElementById('right').addEventListener("click", () => move('right'));

window.addEventListener("keydown", event => {
    if (event.keyCode == '38') {
        // up arrow
        move('forward');
    }
    else if (event.keyCode == '40') {
        // down arrow
        move('backward');
    }
    else if (event.keyCode == '37') {
       // left arrow
       move('left');
    }
    else if (event.keyCode == '39') {
       // right arrow
       move('right');
    }
});

function move(direction) {
    const finalPositions = moves.reduce((position,move) => {
        if(move === 'forward') return {lane: position.lane+1, column: position.column};
        if(move === 'backward') return {lane: position.lane-1, column: position.column};
        if(move === 'left') return {lane: position.lane, column: position.column-1};
        if(move === 'right') return {lane: position.lane, column: position.column+1};
    }, {lane: currentLane, column: currentColumn})

    if (direction === 'forward') {
        if(lanes[finalPositions.lane+1].type === 'forest' && lanes[finalPositions.lane+1].occupiedPositions.has(finalPositions.column)) return;
        if(!stepStartTimestamp) startMoving = true;
        addLane();
    }
    else if (direction === 'backward') {
        if(finalPositions.lane === 0) return;
        if(lanes[finalPositions.lane-1].type === 'forest' && lanes[finalPositions.lane-1].occupiedPositions.has(finalPositions.column)) return;
        if(!stepStartTimestamp) startMoving = true;
    }
    else if (direction === 'left') {
       if(finalPositions.column === 0) return;
       if(lanes[finalPositions.lane].type === 'forest' && lanes[finalPositions.lane].occupiedPositions.has(finalPositions.column-1)) return;
       if(!stepStartTimestamp) startMoving = true;
    }
    else if (direction === 'right') {
       if(finalPositions.column === columns - 1 ) return;
       if(lanes[finalPositions.lane].type === 'forest' && lanes[finalPositions.lane].occupiedPositions.has(finalPositions.column+1)) return;
       if(!stepStartTimestamp) startMoving = true;
    }
    moves.push(direction);
}

function animate(timestamp) {
    requestAnimationFrame( animate );
    
    if(!previousTimestamp) previousTimestamp = timestamp;
    const delta = timestamp - previousTimestamp;
    previousTimestamp = timestamp;
  
    // Animate cars and trucks moving on the lane
    lanes.forEach(lane => {
        if(lane.type === 'car' || lane.type === 'truck') {
            const aBitBeforeTheBeginingOfLane = -boardWidth*zoom/2 - positionWidth*2*zoom;
            const aBitAfterTheEndOFLane = boardWidth*zoom/2 + positionWidth*2*zoom;
            lane.vechicles.forEach(vechicle => {
                if(lane.direction) {
                    vechicle.position.x = vechicle.position.x < aBitBeforeTheBeginingOfLane ? aBitAfterTheEndOFLane : vechicle.position.x -= lane.speed/16*delta;
                }else{
                    vechicle.position.x = vechicle.position.x > aBitAfterTheEndOFLane ? aBitBeforeTheBeginingOfLane : vechicle.position.x += lane.speed/16*delta;
                }
            });
        }
    });

    if(startMoving) {
        stepStartTimestamp = timestamp;
        startMoving = false;
    }

    if(stepStartTimestamp) {
        const moveDeltaTime = timestamp - stepStartTimestamp;
        const moveDeltaDistance = Math.min(moveDeltaTime/stepTime,1)*positionWidth*zoom;
        const jumpDeltaDistance = Math.sin(Math.min(moveDeltaTime/stepTime,1)*Math.PI)*8*zoom;
        switch(moves[0]) {
            case 'forward': {
                camera.position.y = initialCameraPositionY + currentLane*positionWidth*zoom + moveDeltaDistance;        
                chicken.position.y = currentLane*positionWidth*zoom + moveDeltaDistance; // initial chicken position is 0
                chicken.position.z = jumpDeltaDistance;
                break;
            }
            case 'backward': {
                camera.position.y = initialCameraPositionY + currentLane*positionWidth*zoom - moveDeltaDistance;
                chicken.position.y = currentLane*positionWidth*zoom - moveDeltaDistance;
                chicken.position.z = jumpDeltaDistance;
                break;
            }
            case 'left': {
                camera.position.x = initialCameraPositionX + (currentColumn*positionWidth+positionWidth/2)*zoom -boardWidth*zoom/2 - moveDeltaDistance;        
                chicken.position.x = (currentColumn*positionWidth+positionWidth/2)*zoom -boardWidth*zoom/2 - moveDeltaDistance; // initial chicken position is 0
                chicken.position.z = jumpDeltaDistance;
                break;
            }
            case 'right': {
                camera.position.x = initialCameraPositionX + (currentColumn*positionWidth+positionWidth/2)*zoom -boardWidth*zoom/2 + moveDeltaDistance;        
                chicken.position.x = (currentColumn*positionWidth+positionWidth/2)*zoom -boardWidth*zoom/2 + moveDeltaDistance; 
                chicken.position.z = jumpDeltaDistance;
                break;
            }
        }
        // Once a step has ended
        if(moveDeltaTime > stepTime) {
            switch(moves[0]) {
                case 'forward': {
                    currentLane++;
                    counterDOM.innerHTML = currentLane;    
                    break;
                }
                case 'backward': {
                    currentLane--;
                    counterDOM.innerHTML = currentLane;    
                    break;
                }
                case 'left': {
                    currentColumn--;
                    break;
                }
                case 'right': {
                    currentColumn++;
                    break;
                }
            }
            moves.shift();
            // If more steps are to be taken then restart counter otherwise stop stepping
            stepStartTimestamp = moves.length === 0 ? null : timestamp;
        }
    }

    // Hit test
    if(lanes[currentLane].type === 'car' || lanes[currentLane].type === 'truck') {
        const chickenMinX = chicken.position.x - chickenSize*zoom/2;
        const chickenMaxX = chicken.position.x + chickenSize*zoom/2;
        const vechicleLength = { car: 60, truck: 105}[lanes[currentLane].type]; 
        lanes[currentLane].vechicles.forEach(vechicle => {
            const carMinX = vechicle.position.x - vechicleLength*zoom/2;
            const carMaxX = vechicle.position.x + vechicleLength*zoom/2;
            if(chickenMaxX > carMinX && chickenMinX < carMaxX) {
                endDOM.style.visibility = 'visible';
            }
        });
    
    }
    renderer.render( scene, camera );    
}

requestAnimationFrame( animate );
</script>

3.nginx的主配置文件:nginx.conf

worker_processes  4;   nginx工做進程數,根據cpu的核數定義
events {
    worker_connections  1024;    #鏈接數
}
#http區域塊,定義nginx的核心web功能
http {
    include(關鍵字)       mime.types(可修改的值);
    default_type  application/octet-stream;
    
    #定義日誌格式
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    #開啓訪問日誌功能的參數          
    access_log  logs/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    #保持長鏈接
    keepalive_timeout  65;
    #支持圖片 gif等等壓縮,減小網絡
    gzip  on;
    
    #這個server標籤 控制着nginx的虛擬主機(web站點)
    server {
        # 定義nginx的入口端口是80端口
        listen       80;
        # 填寫域名,沒有域名就寫ip地址
        server_name  www.s15rihan.com;
        # 定義編碼
        charset utf-8;
        # location定義網頁的訪問url
        #就表明 用戶的請求 是  192.168.13.79/
        location / {
            #root參數定義網頁根目錄
            root   html;
            #定義網頁的首頁文件,的名字的
            index  index.html index.htm;
        }
        #定義錯誤頁面,客戶端的錯誤,就會返回40x系列錯誤碼
        error_page  404  403 401 400            /404.html;
        #500系列錯誤表明後端代碼出錯
        error_page   500 502 503 504  /50x.html;
    }
    #在另外一個server{}的外面,寫入新的虛擬主機2
    server{
        listen 80;
        server_name  www.s15oumei.com;
        location /  {
        root  /opt/myserver/oumei;      #定義虛擬主機的網頁根目錄
        index  index.html;
        }
    }
}

 

4.兩個虛擬主機公用一個ip端口

在nginx.conf配置文件中python

worker_processes  4;   nginx工做進程數,根據cpu的核數定義
events {
    worker_connections  1024;    #鏈接數
}
#http區域塊,定義nginx的核心web功能
http {
    include(關鍵字)       mime.types(可修改的值);
    default_type  application/octet-stream;
    
    #定義日誌格式
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    #開啓訪問日誌功能的參數          
    access_log  logs/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    #保持長鏈接
    keepalive_timeout  65;
    #支持圖片 gif等等壓縮,減小網絡
    gzip  on;
    
    #這個server標籤 控制着nginx的虛擬主機(web站點)
    server {
        # 定義nginx的入口端口是80端口
        listen       80;
        # 填寫域名,沒有域名就寫ip地址
        server_name  www.s15rihan.com;
        # 定義編碼
        charset utf-8;
        # location定義網頁的訪問url
        #就表明 用戶的請求 是  192.168.13.79/
        location / {
            #root參數定義網頁根目錄
            root   html;
            #定義網頁的首頁文件,的名字的
            index  index.html index.htm;
        }
        #定義錯誤頁面,客戶端的錯誤,就會返回40x系列錯誤碼
        error_page  404  403 401 400            /404.html;
        #500系列錯誤表明後端代碼出錯
        error_page   500 502 503 504  /50x.html;
    }
    #在另外一個server{}的外面,寫入新的虛擬主機2
    server{
        listen 80;
        server_name  www.s15oumei.com;
        location /  {
        root  /opt/myserver/oumei;      #定義虛擬主機的網頁根目錄
        index  index.html;
        }
    }
}

 

 

準備兩個虛擬主機的網頁根目錄內容nginx

[root@localhost myserver]# tree /opt/myserver/
    /opt/myserver/
    ├── oumei
    │   └── index.html      寫入本身的內容
    └── rihan
        └── index.html      寫入本身的內容 

 

 

修改windows本地的測試域名 C:\Windows\System32\drivers\etc\hosts文件web

寫入以下內容
​
192.168.177.130 www.s15rihan.com  
192.168.177.130 www.s15oumei.com  
​
    由於咱們沒有www.s15oumei.com 也沒有  www.s15rihan.com ,所以要在本地搞一個測試域名,
    不想改dns的話,就去阿里雲去買一個域名~~~~~~~~~~~~~~~~~~~~~~

 

5.nginx的訪問日誌功能

1.開啓nginx.conf中的日誌參數ajax

log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    #開啓訪問日誌功能的參數          
    access_log  logs/access.log  main;

 

2.檢查access.log的日誌信息算法

tail -f  access.log 

 

6.nginx的拒絕訪問功能

在nginx.conf中,添加參數sql

在server{}虛擬主機標籤中,找到location 而後添加參數
​
        #當有人訪問  192.168.13.79/  的時候 
        location / {
            #拒絕參數是 deny 
            #deny 寫你想拒絕的IP地址
            #deny還支持拒絕一整個網站
            deny  192.168.13.33;
            root   /opt/myserver/rihan;
            index  index.html;
        }

 

7.nginx的錯誤頁面優化

1.修改nginx.conf 中的配置參數
這個s1540x.html存在 虛擬主機定義的網頁根目錄下
  error_page  404              /s1540x.html;

 

 

8.nginx代理

1.正向代理與反向代理的理解

正向代理

  正向代理相似一個跳板機,代理訪問外部資源。apache

舉個例子:canvas

  我是一個用戶,我訪問不了某網站,可是我能訪問一個代理服務器,這個代理服務器呢,他能訪問那個我不能訪問的網站,因而我先連上代理服務器,告訴他我須要那個沒法訪問網站的內容,代理服務器去取回來,而後返回給我。從網站的角度,只在代理服務器來取內容的時候有一次記錄,有時候並不知道是用戶的請求,也隱藏了用戶的資料,這取決於代理告不告訴網站。

正向代理的用途:

(1)訪問原來沒法訪問的資源,如google
​
(2) 能夠作緩存,加速訪問資源
​
(3)對客戶端訪問受權,上網進行認證
​
(4)代理能夠記錄用戶訪問記錄(上網行爲管理),對外隱藏用戶信息

 

反向代理

反向代理(Reverse Proxy)實際運行方式是指以代理服務器來接受internet上的鏈接請求,而後將請求轉發給內部網絡上的服務器,並將從服務器上獲得的結果返回給internet上請求鏈接的客戶端,此時代理服務器對外就表現爲一個服務器。

反向代理的做用:

(1)保證內網的安全,能夠使用反向代理提供WAF功能,阻止web攻擊

大型網站,一般將反向代理做爲公網訪問地址,Web服務器是內網。

(2)負載均衡,經過反向代理服務器來優化網站的負載

兩者區別

2.反向代理服務器

在gninx.conf文件中添加配置

location / {
  proxy_pass http://www.baidu.com;
  #root   html;
  #index index.html index.htm;
}

瀏覽器 訪問 192.168.177.130時 跳轉到百度頁面

 

9.nginx負載均衡

1.實驗準備
準備三臺計算機 
​
nginx1      192.168.13.121   做爲nginx負載均衡器               只要我訪問這個負載均衡器,查看頁面的結果,究竟是來自於
​
nginx2      192.168.13.24   web服務,提供一個頁面        
​
nginx3      192.168.13.79  web服務,提供一個頁面 
​
​
​
2.先配置兩個nginx  web頁面  
    192.168.13.24  準備一個   index.html  寫入  你好,我是192.168.13.24機器
    192.168.13.79   準備一個    index.html 寫入       老了老弟,我是192.168.13.79
    
    而後啓動兩個nginx web 服務
    
3.準備一個nginx負載均衡器  192.168.13.121機器上,修改nginx.conf 
寫入以下內容 
            定義一個負載均衡池,負載均衡的算法有
            調度算法      概述
            輪詢        按時間順序逐一分配到不一樣的後端服務器(默認)
            weight       加權輪詢,weight值越大,分配到的訪問概率越高
            ip_hash      每一個請求按訪問IP的hash結果分配,這樣來自同一IP的固定訪問一個後端服務器
            url_hash      按照訪問URL的hash結果來分配請求,是每一個URL定向到同一個後端服務器
            least_conn    最少連接數,那個機器連接數少就分發
​
            1.輪詢(不作配置,默認輪詢)
​
            2.weight權重(優先級)
​
            3.ip_hash配置,根據客戶端ip哈希分配,不能和weight一塊兒用
​
upstream s15webserver  {
ip_hash;
server 192.168.13.79 ;
server 192.168.13.24 ;
}
 
而後在虛擬主機中添加 反向代理配置,將用戶的請求,直接轉發給 負載均衡池中的服務器
​
server {
        listen       80;
        #當個人請求來自於 192.168.13.121時,走這>個虛擬主機
        server_name  192.168.13.121;
​
        #charset koi8-r;
#access_log  logs/host.access.log  main;
​
        location / {
          proxy_pass http://s15webserver;
            #root   html;
            #index  index.html index.htm;
        }
​
}
​
​
4.啓動負載均衡器的 nginx服務 
​
5.在客戶端windows中測試訪問,負載均衡器  192.168.13.121 ,查看請求分發的結果 
相關文章
相關標籤/搜索