Recently, the company plans to adopt the development mode of front-end and back-end separation, which means that the front-end and back-end code will be divided into two projects, so I plan to use nginx's reverse agent to build a development environment for subsequent development.

Install nginx

The first step, of course, is to install nginx. Here, I use a third-party package manager named scoop under windows to install it. The process is very simple. One command is enough:

scoop install nginx

Configure nginx

Then, we need to configure our project in nginx, directly paste the configuration (mainly the configuration of two server s):

#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;

    # Static page configuration
    server {
        listen       80;
        server_name  static.mysite.com;

        location / {
            root   C:/nginx/html/sysmgr;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   C:/nginx/html/sysmgr;
        }
    }

    # Interface configuration
    server {
        listen       80;
        server_name  api.mysite.com;

        # Allow cross domain requests from static pages
        add_header Access-Control-Allow-Origin http://static.mysite.com;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

        if ($request_method = 'OPTIONS') {
            return 204;
        }

        location / {
            proxy_pass http://127.0.0.1:8080;
            index  index.html index.htm;
        }
    }
}

Modify host

Because I put the front-end code and back-end program locally, I need to configure the relevant address in the host:

127.0.0.1 static.mysite.com
127.0.0.1 api.mysite.com

Enable nginx

.\nginx.exe -c .\conf\nginx.conf

Then, you can visit our environment through http://static.mysite.com.