Detailed explanation of Nginx configuration required for front-end

Nginx (engine x) is a lightweight, high-performance HTTP and reverse proxy server, as well as a general proxy server (TCP/UDP/IMAP/POP3/SMTP), originally written by Russian Igor Sysoev.

Basic Commands

nginx -t checks the configuration file for syntax errors
nginx -s reload hot reload, reload the configuration file
nginx -s stop Quick shutdown
nginx -s quit Wait for the worker process to complete and then shut down

After setting up the nginx server and starting it, let's first look at the default configuration of nginx, and then introduce different usage scenarios one by one.

Default Configuration

In the Nginx installation directory, we copy a copy of `nginx.conf` to `nginx.conf.default` as a configuration file backup, and then modify `nginx.conf`

# The number of worker processes worker_processes 1;
events {
  worker_connections 1024; #Number of connections per worker process}

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

  # Log format log_format access '$remote_addr - $remote_user [$time_local] $host "$request" '
         '$status $body_bytes_sent "$http_referer" '
         '"$http_user_agent" "$http_x_forwarded_for" "$clientip"';
  access_log /srv/log/nginx/access.log access; # Log output directory gzip on;
  sendfile on;

  # Link timeout, automatic disconnection keepalive_timeout 60;

  # Virtual host server {
    listen 8080;
    server_name localhost; # Browser access domain name charset utf-8;
    access_log logs/localhost.access.log access;

    # route location / {
      root www; # Access the root directory index index.html index.htm; # Entry file}
  }

  #Introduce other configuration files include servers/*;
}

Build a site

In the directory of other configuration files `servers`, add a new site configuration file xx.conf.

Add 127.0.0.1 xx_domian# virtual host to the hosts file of the computer

server {
  listen 8080;
  server_name xx_domian; #Browser access domain name charset utf-8;
  access_log logs/xx_domian.access.log access;

  # route location / {
    root www; # Access the root directory index index.html index.htm; # Entry file}
}

Execute the command nginx -s reload. After success, you can see your page by visiting xx_domian in the browser.

Set expiration time according to file type

location ~.*\.css$ {
  expires 1d;
  break;
}
location ~.*\.js$ {
  expires 1d;
  break;
}

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
  access_log off;
  expires 15d; #Save for 15 daysbreak;
}

# curl -x127.0.0.1:80 upload/2022/web/logo.png -I #test the max-age of the image

Disable file caching

The code is often modified in the development environment, and the browser cache needs to be refreshed to see the effect. This is how we can disable browser caching to improve efficiency

location ~* \.(js|css|png|jpg|gif)$ {
  add_header Cache-Control no-store;
}

Anti-hotlink

Prevent files from being called by other websites

location ~* \.(gif|jpg|png)$ {
  # Only allow 192.168.0.1 to request resources valid_referers none blocked 192.168.0.1;
  if ($invalid_referer) {
    rewrite ^/ http://$host/logo.png;
  }
}

Static file compression

server {
  # Turn on gzip compression gzip on;
  # Set the minimum HTTP protocol version required for gzip (HTTP/1.1, HTTP/1.0)
  gzip_http_version 1.1;
  # Set the compression level. The higher the compression level, the longer the compression time (1-9)
  gzip_comp_level 4;
  # Set the minimum number of bytes for compression, and get gzip_min_length 1000 from the page Content-Length;
  # Set the compressed file type (text/html)
  gzip_types text/plain application/javascript text/css;
}

Execute the command nginx -s reload, and access it with a browser after success

Specify error page

# According to the status code, return the corresponding error page error_page 500 502 503 504 /50x.html;
location = /50x.html {
  root /source/error_page;
}

Execute the command nginx -s reload, and access it with a browser after success

Cross-domain issues

Definition of cross-domain

The Same Origin Policy restricts how documents or scripts loaded from the same origin can interact with resources from another origin. This is an important safety mechanism for isolating potentially malicious files. Read operations between different sources are generally not allowed.

Definition of Homologous

Two pages have the same origin if their protocol, port (if specified), and domain name are the same. The principle of nginx solving cross-domain problems

For example:

• The front-end server domain name is: http://xx_domain
• The backend server domain name is: https://github.com

Now when http://xx_domain makes a request to https://github.com, cross-domain request will occur.

However, you only need to start an nginx server, set the server_name to xx_domain, and then set the corresponding location to intercept the cross-domain requests required by the front end, and finally proxy the requests back to github.com. As shown in the following configuration:

## Configure the reverse proxy parameters server {
  listen 8080;
  server_name xx_domain

  ## 1. When a user visits http://xx_domain, the reverse proxy goes to https://github.com
  location / {
    proxy_pass https://github.com;
    proxy_redirect off;
    proxy_set_header Host $host; # pass the domain name proxy_set_header X-Real-IP $remote_addr; # pass the ip
    proxy_set_header X-Scheme $scheme; #Transmission protocol proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

This can perfectly bypass the browser's same-origin policy: github.com accessing nginx's github.com is a same-origin access, and nginx's forwarded request to the server will not trigger the browser's same-origin policy.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.