preface

Nginx is such a thing. Many people do not know how to reverse proxy nginx requests, so write a record, by the way, also when to make a summary of their own content notes.

Including nginx configuration file introduction, nginx common commands, nginx to resolve the cross domain detailed steps, as well as the difference between the alias and root agent notes, read the basic can use nginx for project development.

Nginx download

  1. Nginx is used to handle requests as a server proxy, so it must be on a server, such as a rented cloud server.

  2. Nginx can be downloaded directly from the pagoda Linux. If you do not use the pagoda Linux, you can configure: Linux how to install nginx.

Nginx directory

Pagoda installation is probably such a directory, of course, their own configuration is not much, there are several important directories.

  1. Sbin, this is the directory where the nginx startup file is located, and we need to go to this directory to execute the nginx startup command, so my advice is to configure the environment variable so that it can be executed anywhere.

  2. HTML, which is the default static folder, usually has an index. HTML entry page and a 50x. HTML error page. Nginx is configured to proxy port 80 to this folder by default. If you visit your server on port 80 http://xxx.xx.xxx.xx:80(, the default port 80 will not be written)/ you will get to the index.html page here, which you can overwrite with your own HTML.

  3. Conf is the directory where we configure nginx. The default configuration file is nginx.conf.

nginx.conf

By default, the default configuration is commented out to delete the section about the length of this like, I will focus on the server is how to proxy the home page part.

  1. Listen represents the port to listen on, in this case 80.

  2. Server_name Service name is not self-defined.

  3. The following location is the path to be proxied. If you visit http://xxx.xx.xxx.xx:80(, the default port 80 can not write)/ after the /, proxy static file root, where root tells you that port 80 / will be proxy to the HTML folder, the entry file is index.html or index.htm.

Nginx common commands

  1. If we change the nginx.conf configuration, we have to restart nginx, otherwise it won’t take effect. 
    nginx -s reload
Copy the code
  2. Nginx can also be started this way, using another file as a configuration file. 
    nginx -c/ path/other. ConfCopy the code
  3. Shut down the nginx service 
    nginx -s stop
Copy the code

Nginx addresses cross-domain

How do you generate cross-domain

  1. First we need to understand how our project deployment will produce cross-domain.

  2. Let’s assume that the front end writes a project in React. When packaged, it generates a dist folder with the entry index.html. At the back end we write a server that provides the interface on port 3000 using NodeJS.

  3. In the index. The HTML have our written request data code, such as getName request name http://xxx.xx.xxx.xx:3000/getName.

  4. When we put the index. The HTML file deployed in server port 80, you’re such a request is sent on http://xxx.xx.xxx.xx:80 http://xxx.xx.xxx.xx:3000/getName, port, cross-domain problem conditions, That’s where the cross-domain problem comes in.

How to solve cross-domain

  1. First of all, we want a proxy service name, such as all the commonly used/API, we the original directly to the front-end code request all give it to http://xxx.xx.xxx.xx:3000/getName/API/getName.

  2. Because the index. The HTML agent to port 80, which is is your service/API/getName now at http://xxx.xx.xxx.xx:80, or http://xxx.xx.xxx.xx:80/api/getName.

  3. Remember that our nginx is listening for service on port 80? If you can proxy/that/API can also proxy.

  4. We have the proxy to http://xxx.xx.xxx.xx:3000 / API.

         location /api {
         proxy_pass   http://localhost:3000;
     }
Copy the code

  5. But there exist some problems in the above agent, that is, although the agent is successful, but changed into http://xxx.xx.xxx.xx:3000/api/getName, this/API is our temporary use, it was on the service we are still unable to request to the right.

  6. You will also be able to prefix your corresponding requests on http://localhost:3000 with/API (this is also a common solution).

  7. You can also choose to add a slash after the proxy proxy_pass

         location /api/ {
         proxy_pass   http://localhost:3000/;
     }
Copy the code

  8. Why do I get rid of the/API? Nginx proxy_pass path with/without /

Proxy paths alias and root

  • Sometimes we don’t want to put an item directly on port 80/On request, so that our server can’t do more, we can choose when proxyaliasandrootIn fact, there is no difference is afraid not to distinguish clearly will be confused, think which is good to use only one.

Use alias

  1. Since we don’t want to use /, we will add a service name, such as /home instead of our/request.

  2. Alias means when we get a /home request we go to the content behind alias which is the HTML folder,

        location /home {
        alias html;
        index index.html index.htm;
    }
Copy the code

Using root

  1. By changing alias to root, we create a home folder in HTML, put static entries in it, and everything else is the same.

  2. Root means if we get a request for /home we go to root +location and we go to HTML /home,

        location /home {
        alias html;
        index index.html index.htm;
    }
Copy the code

Pay attention to

  1. There is a problem with proxy path, that is, static resources, including JS, CSS, images, etc., are not accessible. For example, dist project packaged by React, static files are accessed in the form of/absolute path, so we need to add proxies to them separately.

  2. The following uses index. HTML, JS, and CSS files as examples.

  3. For example, if you want to put them all in an HTML folder, use Alias.

         location /test{
         alias html;
         index index.html;
     }

     location ~ .*\.(js|css)? $ {
         root html;
     }
Copy the code

  4. Or if you want to put them all in the TEST folder in HTML, use root.

         location /test{
         root html;
         index index.html;
     }

     location ~ .*\.(js|css)? $ {
         root html/test;
     }
Copy the code

Stern said

If you feel that the article is helpful to you, welcome to like collection oh, there are any mistakes or suggestions can also leave a message, thank you ~