Not understanding Nginx’s front end is not a good front end

The new official website of the design business of the enterprise was launched this week (it has not been optimized, I feel a little ugly, try to optimize). The night of the launch, I was stuck by Nginx. As a front end, I have not touched the things in the background in recent years, so I can only wait for the background brother to go to the troubleshooting, which is really a little wrong. If you want to talk about Nginx, at this stage a little bit powerless, the content is still quite a lot, not enough usual content is not very complex, simple a few configuration, say nothing else, first learn to say again, next time you don’t have to wait, you can also check.

What is Nginx?

Nginx is a lightweight Web/reverse proxy server and email (IMAP/POP3) proxy server. — Copied from Baidu Baike

In short, Nginx has a wide range of applications, common scenarios:

  • Static resource server
  • Dynamic matching
  • The reverse proxy
  • Gzip compression
  • Load balancing

Today, for sure, not all of them. Let’s learn some simple configurations.

Nginx configuration file structure

There are three main structures in the nginx.conf file:

  1. Global: related to nginx running
    • Global block: Configures directives that affect nginx globally. Generally, there are user groups running nginx server, nginx process PID storage path, log storage path, configuration file import, allowed number of worker processes, etc.
  2. Events: Relates to the user’s network connection
    • Events block: The configuration affects the Nginx server or network connection to the user. The maximum number of connections per process, which event-driven model to choose to handle connection requests, whether to allow simultaneous acceptance of multiple network connections, enable serialization of multiple network connections, etc.
  3. http
    • HTTP block: can nest multiple servers, configure proxy, cache, log definition and most functions and third-party module configuration. Such as file import, miME-type definition, log customization, whether to transfer files using SendFile, connection timeout, number of single connection requests, etc.

server

With this Nginx configuration file structure in mind, today’s focus will be on server in the HTTP block. Server block, used to configure the parameters of the virtual host, an HTTP can have multiple servers.

server {
  Configure network listening
  # listen on all 80's
  listen 80;
  
  Name-based virtual host configuration
  server_name design.luweitech.cn;

  Configure the root directory for the request
  When a Web server receives a request, it first looks for the requested resource in the directory specified by the server
  root /xxx/abc;

  # Set the default home page of your websiteindex index.html; Location / {proxy_pass http://localhost: port number; } location /favicon.ico {The expiration time is set to 12 hoursexpires 12h; } location ~ .*\.(js|css)? The ${# proxy_pass http://localhost: port number;expires 12h; }}Copy the code

server_name

Name-based virtual host configuration

Server_name is the path of the virtual server. Different domain names are matched to specific server blocks through the HOST field in the request header and forwarded to the corresponding application server.

For example, the following code

server {
  listen  80;
  server_name www.xxx.com;
  location / {
    proxy_pass http://localhost:6002;
  }
}
 
server {
  listen 80;
  server_name www.xxx.*;
  location / {
    proxy_pass http://localhost:6003;
}
Copy the code

Visit www.xxx.com and Nginx will forward to http://localhost:6002

Visit www.xxx.org and Nginx will forward to http://localhost:6003

index

Set the default home page for your site

The index directive has two main functions:

  • If the requested address does not specify a home page, specify the default home page
  • For a request, set a different home page according to the request content, for example:
location ~ ^/luwei/(.+)/web/$ {
    index index.The $1.html index.htm;
}
Copy the code

location

location ~ .*\.(js|css)? The ${# proxy_pass http://localhost: port number;
  expires 12h;
}
Copy the code

I’m going to focus on this code today

Proxy_pass = proxy_pass = proxy_pass; proxy_pass = proxy_pass; Nginx will default to root, however, we use node service, JS, CSS are not pure static files, not directly in root, as a result of browser cannot access.

There are two ways to handle static files such as JS and CSS:

  1. The first is undoingProxy_pass http://localhost: Port number;This comment allows it to return to the service provided by Node
  2. The second way is to putlocation ~ .*\.(js|css)? $Comment out the entire file so that the requested JS/CSS file matches the one abovelocation /Return to the service provided by Node

It’s not a big problem, but you need to pay attention to the details, right

Front-end origin, or need to do background, there are mistakes welcome to point out directly

【 Wu Qinfa 】 Reed Technology Web front-end development engineer and COO specializes in website construction, public account development, wechat small program development, small games and public account development, focusing on front-end framework, server rendering, SEO technology, interaction design, image rendering, data analysis and other research. Interested partners to tease us ~ [email protected]

Visit www.luweitech.cn/ to learn more