Nginx downloads, installs, starts and configures the front and rear request agents in Windows

scene

Nginx introductory tutorial - introduction, installation, reverse proxy, load balancing, dynamic and static separation, use examples:

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103101304

The front end is a project made of Vue and the back end is SpringBoot. How to deploy the front and rear end projects on the Windows server and use Nginx for proxy.

Nginx download address

http://nginx.org/en/download.html

Click the corresponding version of Windows here

After downloading, a compressed package is extracted to a directory on the server

Agent configuration

Enter the conf directory extracted above and edit the Nginx configuration file Nginx conf

server node found

First, the port under listen here is the interface in front of the agent, which should be connected with the Vue of the front-end project config. The ports in JS are consistent.

    server {
        listen       70;
        server_name  10.229.36.158;

Then the following server_name is the ip address of your server. It is recommended not to use localhost even if it is used locally to avoid problems caused by modifying the hosts file.

So set the ip address of the server you want to deploy the project.

Then, the following location / configuration is the path of the front-end static resources before the agent.

The path of the root directory on the front-end server is the path of the root directory represented by dist.

The following two configurations remain the default and do not change. The configuration is to prevent 404 and entry page.

        location / {
            root   D:/www/kaoqin/dist/;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

Then, the following location / prod API / is the address of the configured agent.

  location /prod-api/ {
  
            proxy_set_header Host $http_host;
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header REMOTE-HOST $remote_addr;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   proxy_pass http://localhost:8080/;
        }

The / prod API / here is consistent with the path rewriting of the proxy set by the front-end project.

The following is to set the request header to prevent cross domain problems.

Then the lowest proxy_pass is the address after the proxy is set, that is, the url of the background interface on your server.

Through the above two configurations, all requests on the server can be realized

As long as it is through

http://10.229.36.158/70/dev-api/

All requests sent will be proxied to

http://localhost:8080/

Down. In this way, the request agent of front and back-end projects can be realized.

Full conf code

#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 {
        listen       70;
        server_name  10.229.36.158;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   D:/www/kaoqin/dist/;
   try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

  location /prod-api/ {
  
            proxy_set_header Host $http_host;
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header REMOTE-HOST $remote_addr;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   proxy_pass http://localhost:8080/;
        }
  
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

Start Nginx

Go to the directory (on the server) where Nginx has been decompressed above, which contains Nginx Exe directory, open the command line here

start nginx.exe

start nginx

If you modify the configuration file of nginx

nginx -s reload

If the environment variable is not configured or the prompt does not work, use nginx Exe.

Normal stop or shutdown of Nginx:

nginx -s quit

After starting Nginx successfully, open the browser for verification and enter

http://10.229.36.158:70/

If a page can appear, that is, the index of the corresponding front-end static resource HTML page, and can display the verification code, which is through the agent

Background interface acquisition. Then the agent is successful. Remember not to close the command line of this nginx.