Download notes and information on the project, please click on this sentence itself acquired.

day01-springboot (theory papers) ; day01-springboot (practice papers)

day02-springcloud (theory part a) ; day02-springcloud (theory part two) ; day02-springcloud (theory part three) ; day02-springcloud (theory part four) ;

springcloud-day03 (Hystix, Feign) ; day03-springcloud (Zuul Gateway)

day04- project to build (a) ; day04- project to build (two) ; entry-day04-ES6 grammar

day05-Vue learning portal

day06- about using vue-router and webpack of ; day06- acquaintance Vuetify framework and UI framework using the domain name to access local projects ; day06- use nginx reverse proxy and solve cross-domain master cors

14 micro electric service providers [Mall] excellent dark horse music: day06- use nginx reverse proxy and solve cross-domain master cors

# 0. learning objectives

- use the information to build back office systems
- will use nginx reverse proxy
- to realize Categories inquiry
- cors solve cross-domain master
- and brand search function

4.4.nginx solve port problems

Domain name issue is resolved, but now want to access the page background, have their own plus port:http://manage.taotao.com:9001

This is not the elegance. We hope that the direct domain names: http://manage.taotao.com. In this case the default port is 80, how can we transfer request to 9001 port it?

Here it is necessary to use a reverse proxy tool: Nginx

4.4.1. What is Nginx

nginx as a web server, but more often, we take it as a gateway, a gateway because it has the necessary features:

Reverse Proxy
Load Balancing
Dynamic Routing
Request Filtering

4.4.2.nginx as a web server

Web server sub-categories:

web application servers, such as:
- tomcat
- resin
- jetty
web server, such as:
- Apache server
- Nginx
- IIS

Distinction: web server can not resolve jsp page, etc., can only deal with static resources js, css, html and so on.
Concurrency: concurrent capacity is much higher than the web server web application server.

4.4.3.nginx as a reverse proxy

What is a reverse proxy?

Agent: by configuring the client, which allows a server (proxy) proxy client, all client requests are processed to the proxy server.
Reverse Proxy: one server, proxy server true, when users access, access is no longer a real server, but the proxy server.

nginx as a reverse proxy server can be used:

We need to advance in a good configuration nginx reverse proxy rules, different requests to different real server processing
When the request arrives nginx, nginx request will be forwarded according to the rules have been defined, thereby realizing the routing function

Use a reverse proxy, we can solve our problems in front of said ports , as

4.4.4. Installation and use

installation

Installation is very simple, the nginx before class information provided directly extracted, green-free installation!

We installed a nginx locally:

After decompression, the directory structure:

conf: configuration directory
contrib: dependent on third parties
html: default static resource directory
logs: log directory
nginx.exe: Launcher

Reverse proxy configuration

Example:

Each nginx a reverse proxy server is configured, there may be a plurality of server

Full configuration:

#user  nobody;
worker_processes  1;

events {
    worker_connections  1024;
}

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

    keepalive_timeout  65;

    gzip  on;
    server {
        listen       80;
        server_name  manage.leyou.com;

        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        location / {
            proxy_pass http://127.0.0.1:9001;
            proxy_connect_timeout 600;
            proxy_read_timeout 600;
        }
    }
    server {
        listen       80;
        server_name  api.leyou.com;

        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        location / {
            proxy_pass http://127.0.0.1:10010;
            proxy_connect_timeout 600;
            proxy_read_timeout 600;
        }
    }
}

View Code Nginx reverse proxy secondary domain

use

nginx can be started from the command line, the operation command:

start up:start nginx.exe
stop:nginx.exe -s stop
Reload:nginx.exe -s reload

The startup process will flicker, after a successful start, the Task Manager will be two nginx processes.

4.5. Test

Start nginx, then access back office systems with domain:

Visit the Web site domain name now realized the middle of the process is what is it?

Ready to launch a browser request, visit http://mamage.leyou.com, but the need for domain name resolution
Priority for local name resolution, because we have modified the hosts, so parsing success, get the address: 127.0.0.1
Request is sent to the ip parsed, and the default port 80: http://127.0.0.1:80

nginx the machine has been listening on port 80, so catch this request
nginx rules configured in reverse proxy, the proxy manage.leyou.com to 127.0.0.1:9001, so the request is forwarded
webpack server listening port background system is 9001, and processed to obtain the request, after completion response is returned to nginx
Nginx results will be returned to the browser

==============================================

References:

end

14 micro electric service providers [Mall] excellent dark horse music: day06- use nginx reverse proxy and master cors solve cross-domain day06- acquaintance Vuetify framework and UI framework using the domain name to access local projects