The whole process of configuring reverse proxy locally through nginx

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!

You may also be interested in:
  • Nginx reverse proxy configuration to remove prefix case tutorial
  • Summary of pitfalls of using nginx as a reverse proxy for grpc
  • Full process record of Nginx reverse proxy configuration
  • How to implement Nginx reverse proxy for multiple servers
  • Implementation of proxy_pass in nginx reverse proxy
  • How to maintain a long connection when using nginx reverse proxy
  • Detailed explanation of Nginx reverse proxy example
  • Nginx reverse proxy to go-fastdfs case explanation

<<:  MySQL solution for creating horizontal histogram

>>:  Use pure CSS to create a pulsating loader effect source code

Recommend

Node uses async_hooks module for request tracking

The async_hooks module is an experimental API off...

How to use Nginx to solve front-end cross-domain problems

Preface When developing static pages, such as Vue...

Solve the error problem caused by modifying mysql data_dir

Today, I set up a newly purchased Alibaba Cloud E...

Set the width of the table to be fixed so that it does not change with the text

After setting the table width in the page to width...

Summary of Mysql update multi-table joint update method

Next, I will create two tables and execute a seri...

Linux IO multiplexing epoll network programming

Preface This chapter uses basic Linux functions a...

Vue imitates ElementUI's form example code

Implementation requirements The form imitating El...

Detailed explanation of the process of building and running Docker containers

Simply pull the image, create a container and run...

How to view and terminate running background programs in Linux

Linux task management - background running and te...

TypeScript Mapping Type Details

Table of contents 1. Mapped Types 2. Mapping Modi...

HTML+CSS merge table border sample code

When we add borders to table and td tags, double ...

Detailed explanation of as, question mark and exclamation mark in Typescript

1. The as keyword indicates an assertion In Types...

Vue.js front-end web page pop-up asynchronous behavior example analysis

Table of contents 1. Preface 2. Find two pop-up c...

Solve the problem of docker's tls (ssl) certificate expiration

Problem phenomenon: [root@localhost ~]# docker im...