Nginx met

What is Nginx? Why are we using this? Why a reverse proxy?

Nginx is feature-rich and can function as either an HTTP server or a reverse proxy server.

Basically, you can put your pure front-end project on the server and let the outside world access it.

What is a reverse proxy?

The following figure

  • Forward agent

  • The reverse proxy

What are the advantages of reverse versus forward proxies?

As you can see from the diagram, the forward proxy receives all requests and delivers them directly to the network. But a reverse proxy is a proxy server that can find the desired server based on your request. The advantage is that what type of request is found on what type of server.

Nginx can take different forwarding strategies according to different re matching, such as the end of the image file to go to the file server, dynamic page to go to the Web server, as long as your re write no problem, and the corresponding server solution, you can play as you like. And Nginx to return the results of error page jump, exception judgment, etc. If there is an exception on the server being distributed, it can reforward the request to another server and automatically remove the exception server.

Usage scenarios

The front-end VUe2.0 project (vuE-CLI4X) was packaged and deployed to the server to provide independent services. The back end is also a standalone service.

Ultimate goal: Internet access to multiple projects.

Using the step

  1. Download the nginx. Download and install the software on the Windows server.

  2. Package the upload project. Scaffold the Vue project into the NPM Run build and put all the content in the generated dist folder into the HTML folder in the nginx directory.

    For example, if a project matches the /manager path, put the manager folder, and /invoice path put the invoice folder, and then modify the corresponding relationship in the configuration file nginx.conf.

  3. Nginx configuration. Conf file in nginx –>conf folder –>nginx.conf file

    The structure of the configuration file is as follows:

    . {#events block: configuration affects the nginx server or network connection with the user... } HTTP # HTTP block: you can nest multiple servers, configure proxy, cache, log definition and most of the functions and third-party module configuration {... # HTTP global block server: configure the parameters of the virtual host, one HTTP can have more than one server {... [PATTERN] #location [PATTERN] #location [PATTERN] } location [PATTERN] { ... } } server { ... }... # HTTP global block}Copy the code

    Novice tutorial configuration items above explanation is quite clear, www.runoob.com/w3cnote/ngi…

    Some key fields:

    Location: Configures the routing of requests and the processing of various pages.

    server { keepalive_requests 120; # Maximum number of single connection requests. listen 4545; Server_name 127.0.0.1; Location ~*^.+${# request url filtering, regular matching, ~* is case sensitive, ~* is case insensitive. #root path; # root HTML; Nginx.exe is the root directory of the project file, so the default directory is nginx.exe. HTML try_files $uri $uri/ /index.html; Hash hash hash hash hash hash hash hash hash hash hash hash proxy_pass http://mysvr; Proxy_pass: deny 127.0.0.1; Allow 172.18.5.54; # allowed IP address}}Copy the code

  4. After the configuration, you need to restart the nginx service. There are several ways to completely end the Nginx service. I used the task manager to end all nginx services. Then click on the nginx.exe file to restart. Or write a script.

  5. After the restart, you can see whether there is an error in the error.log folder below logs.

Matters needing attention

  1. Ask o&M to open the extranet available port (if the extranet can be accessed, some companies are limited).
  2. Firewall Settings, ports do not open the general interception.
  3. Domain names are required for Internet access, IP addresses are used only for Intranet access, and interfaces are used only for Intranet access.

Nginx-related resource address

Source: trac.nginx.org/nginx/brows…

Website: www.nginx.org/

Reference links:

  1. Juejin. Cn/post / 684490… (Nginx from the beginning to the practice, 10,000 words in detail)

Configure multiple VUE items for the same domain name and port

Refer to the link: www.cnblogs.com/sxdtzhaoxin…

steps

  1. Package all projects using VUe-CLI
  2. Put the project into the server’s nginx folder, project 1 > HTML folder, project 2 > HTML/Manager folder
  3. Modifying a Configuration File
server { listen 8009; server_name aaa.xxx.com; location / { root html; index index.html; try_files $uri $uri/ /index.html; } location /manager {alias HTML /manager; index index.html; try_files $uri $uri/ /manager/index.html; # backend support for hash to history key code}}Copy the code

Note: location is concatenated to the URI, and the second location is alias.

  1. Restart the nginx
  2. Visit aaA.xxx.com :8009/ Manager to access the second project

There is a patchwork understanding of nGINx, but no systematic knowledge of nGINx.