Prerequisite front-end Nginx configuration

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

Basic commands

Nginx -t Checks whether the configuration file has syntax errors nginx-sReload: reloads the configuration file nginx-sStop Quickly closes nginx-sQuit Wait until the worker process is complete and shut downCopy the code

Once the nginx server is set up and started, let’s take a look at the default nginx configuration and then go through the different usage scenarios.

The default configuration

Nginx installation directory, we make a copy of ‘
Nginx. Conf ` into
`
nginx.conf.default`Back up as a configuration file, then modify
`
nginx.conf`

# 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, automatically disconnected
    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;

        # routing
        location / {
            root   www; # Access the root directory
            index  index.html index.htm; # Import file}}# Import other configuration files
    include servers/*;
}
Copy the code

Building site

In the other configuration files’ Servers’ directory, add the new site configuration file xx.conf.

Add 127.0.0.1 to the hosts file on the computer
xx_domian

# Virtual host
server {
    listen       8080;
    server_name  xx_domian; # Browser access domain name

    charset utf-8;
    access_log  logs/xx_domian.access.log  access;

    # routing
    location / {
        root   www; # Access the root directory
        index  index.html index.htm; # Import file}}Copy the code

Run the nginx -s reload command to see your page when xx_domian is successfully accessed

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 days
    break;
}

# curl - x127.0.0.1: http://www.test.com/static/image/common/logo.png - I # test image Max - 80 ageCopy the codeCopy the code

Disabling file caching

The development environment changes the code frequently because the browser cache needs to be forcibly refreshed to see the effect. This is where we can disable browser caching to improve efficiency

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

location ~* \.(gif|jpg|png)$ {
    Only 192.168.0.1 resource requests are allowed
    valid_referers none blocked 192.168.0.1;
    if ($invalid_referer) {
       rewrite^ / http://$host/logo.png; }}Copy the code

Static file compression

server {
    # Enable gzip compression
    gzip on;
    Set the minimum version of the HTTP protocol 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 compressed by the page content-length
    gzip_min_length 1000;
    # Set type of compressed file (text/ HTML)
    gzip_types text/plain application/javascript text/css;
}
Copy the code

Run the nginx -s reload command, and the browser is successfully accessed

# Return error page for
error_page 500 502 503 504 /50x.html;
location = /50x.html {
    root /source/error_page;
}Copy the code

Run the nginx -s reload command, and the browser is successfully accessed

Cross-domain problem

Cross-domain definitions

The same origin policy restricts how a document or script loaded from one source interacts with a resource from another source. This is an important security mechanism for isolating potentially malicious files. Read operations between different sources are generally not allowed.

Definition of homology

If both pages have the same protocol, port (if specified), and domain name, then both pages have the same source.

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

    ## 1. User access http://xx_domain, then reverse proxy to https://github.com
    location / {
        proxy_pass  https://github.com;
        proxy_redirect     off;
        proxy_set_header   Host             $host;        # Transfer domain name
        proxy_set_header   X-Real-IP        $remote_addr; # transfer IP
        proxy_set_header   X-Scheme         $scheme;      # Transfer protocol
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for; }}Copy the code

If you think my article is useful to you, please give me a like