The whole process of configuring reverse proxy locally through nginx

Preface

Nginx is a lightweight HTTP server that uses an event-driven asynchronous non-blocking processing framework, which gives it excellent IO performance. We use Nginx in the following scenarios in daily development:

• Nginx as http server
• Cross-origin requests
• Load Balancing
• Separation of static and dynamic network resources

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

1. Download and install

Click here to download, unzip after downloading, the unzipped files are as follows:

Unzip (double-click nginx.exe, a black pop-up window will flash by after double-clicking)

Find the directory where nginx is unzipped, right-click, find git bash to open, enter the command start ./nginx.exe and press Enter to start the nginx service.

**Check whether the startup is successful: **Enter the URL http://localhost directly in the browser address bar, press Enter, and the following page will appear, indicating that the startup is successful

2. nginx configuration

Find the conf/nginx.conf file under nginx and set the proxy related information, focusing on the content 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;
 # Here is the domain name of the test environment you want to proxy plus -local
 # For example, if your project test environment is a.test.com, you can set it to a-local.test.com. Of course, you can set location as you like /{
  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-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
  add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
  # Here 8091 is the port number of our local running project, just set it to the same as your local service port number proxy_pass http://127.0.0.1:8091/;
 }
 }
}

3. Local DNS configuration

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

4. Operation

First enter ./nginx.exe -t to check whether the nginx configuration is correct. The correct one is as shown below:

Continue to enter nginx -s reload to restart (after the nginx configuration file is modified, nginx must be restarted to take effect)

Refresh DNS: ipconfig /flushdns

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

5. Commonly used nginx commands

• Help command: nginx -h
• Start the Nginx server: start nginx
• Configuration file path: /usr/local/nginx/conf/nginx.conf
• Check the configuration file: nginx -t
• Stop the 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
• Kill all nginx processes killall nginx

6. Cross-domain requests

In the project with separated front-end and back-end, since the front-end and back-end projects are deployed on different servers respectively, the first problem we encounter is cross-domain. In this scenario, nginx can help us solve this problem well.

#Cross-domain request server
server{
	listen 9000;
	server_name 127.0.0.1; # or set to the local ip
	root /app/crossDomain/;
	index index.html;
	
	location /douban/ { #Add proxy configuration for access directory /api rewrite ^/api/(.*)$ /$1 break;
		proxy_pass http://a.test.com;
 }
}

Summarize

This is the end of this article about configuring reverse proxy locally through nginx. For more relevant content about configuring reverse proxy locally through nginx, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!