Nginx is a lightweight HTTP server that uses an event-driven, asynchronous, non-blocking processing framework, which gives it excellent IO performance. There are several scenarios where we use Nginx in our daily development:

  • Nginx as the HTTP server

  • Cross-domain request

  • Load balancing

  • Dynamic and static separation of network resources

As a front end, we focus on the first two scenarios

First, download and install

Click here to download and decompress the file as follows:

Unzip (double click nginx.exe and a black popup will flash by)

Go to the directory where the nginx package is decompressed, right-click git bash, enter the command start. /nginx.exe, and press Enter to start the nginx service.

** Check whether the startup is successful: ** Directly enter the url http://localhost in the browser address bar and press Enter. If the following page is displayed, the startup is successful

Nginx configuration

Go to the conf/nginx.conf file under nginx and set the proxy information, especially in server{}

#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' #  '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; server_names_hash_bucket_size 128; server { listen 80; server_name localhost; location / { root html; index index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } server { listen 80; server_name test-local.juejin.com; # this is you to the test environment domain name agent - local # your project test environment for a.test.com, for example, you local here can be set to a-local.test.com, of course, you can simply set the location / {add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requ ested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range'; Proxy_pass http://127.0.0.1:8091/; proxy_pass http://127.0.0.1:8091/; }}}Copy the code

3. Local DNS configuration

** Modify the local host file configuration, ** locate the directory C:\Windows\System32\drivers\etc, open the hosts file, and add 127.0.1a-local.test.com

Four, run,

Exe -t to check whether the nginx configuration is correct.

Continue with nginx -s reload restart (nginx configuration file changes must be restarted to take effect)

Refreshing DNS: ipconfig /flushdns

Type http://a-local.test.com in your browser and you will see the interface of your code running locally

Nginx command

  • Help command: nginx -h

  • Start Nginx server: start Nginx

  • Configuration file path: / usr/local/nginx/conf/nginx. Conf

  • Check the configuration file: nginx -t

  • Stop service: nginx -s stop

  • Exit the service (stop the service after processing all requests) : nginx -s quit

  • Reload the configuration file: nginx -s reload

  • Display version information and exit nginx -v

  • Killall nginx processes killall nginx

Cross domain request

Because the front and back end projects are deployed on different servers, the first problem we encounter is cross-domain. In this scenario, Nginx can help us solve this problem well

Server {listen 9000; Server_name 127.0.0.1; Or set it to the local IP root /app/crossDomain/; index index.html; Rewrite ^/ API /(.*)$/$1 break; rewrite ^/ API /(.*)$/$1 break; proxy_pass http://a.test.com; }}Copy the code

7, MAC startup error

Net ::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)

Permission denfied error found in nginx log

Solutions:

  • Switch to the specified directory and run the CD /usr/local/var/run/nginx command on the terminal

  • To change the permission, run the chmod -r 777 proxy_temp command

  • To restart nginx, enter sudo nginx-s relaod