foreword

Recently, I am working on a SASS system, and the original single service needs to deploy an environment every time I sell a set of software, which makes the operation and maintenance personnel somewhat stretched. The product is adjusted to SASS in order to reduce the work of operation and maintenance.

Realize requirements

After the function is implemented, it is necessary to configure its own tenant access address for each tenant. In fact, the last point is a set of services and pages!

Realized requirements: by accessing the following address:
http://192.168.0.118:38888/current_juser

In fact, it is easy to understand. The address of the front-end page mapped by our background is IP+port, as above http://192.168.0.118:38888

Now I want to access the back-end page by adding the current_juser behind.

Nginx configuration access front end

correctly configured

   server {
        listen       38888;
        server_name  localhost;
        location /current_juser{
          alias  /home/deploy/operate/dist/;
          index  index.html index.htm;
        }
        location ~.*(js|css|png|gif|jpg|mp3|ogg)$ {
          root /home/deploy/operate/dist/;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

The above is our correct configuration. Next, let's take a look at the points of attention.

important point

insert image description here
From the picture above, we see the content in the two red boxes, let's take a look at the specific content:

The meaning of alias

Nginx has two ways to specify the file path: root and alias. The difference between the usage of the two lies in the different processing methods for URI.

If you want to talk about alias, you must talk about the difference between him and root:
1. alias is the definition of a directory alias, and root is the definition of the top-level directory.
2. Another important difference is that the alias must end with "/", otherwise the file will not be found. And root is dispensable.

give a chestnut

alias：

location /testAlias/{
	alias /tools/nginx/html/admin/；
}

This configuration means that when accessing files in the /testAlias/ directory, ningx will automatically go to the /tools/nginx/html/admin directory to find files.

root：

location /testRoot/ {
	root /tools/nginx/html/admin；
}

#If this configuration is followed, when accessing files in the testRoot/ directory, nginx will go to /tools/nginx/html/admin/testRoot to find files.

Static files and js and other 404 errors

The second red box is to help us solve this 404 problem. If we do not configure this information, it will cause 404 for static files such as js or css, and our page cannot be opened normally.

Let's take a look at the error message if it is not configured, as follows:

insert image description here
We put the mouse on the ip on the right, you can see the error message, and the full path of the page access will be displayed on it. Prompt that we cannot find this file.

By adding the configuration in the red box, location indicates that if you want to access files ending in js, png, css, etc., you need to add root before your access path.

This root actually replaces http://192.168.0.118:38888 on the web page. If this location is added, then the webpage is visiting http://192.168.0.118:38888/xxx/xxx/xxx.js. When using this path, because the end of the file is js matching this location, then the webpage will be accessed

root+[matching path], that is: /home/deploy/operate/dist/xxx.js, so the file is found.

Welcome everyone to click on the card below to pay attention to "coder trainees"

nginx configures vue project to add access prefix

Article Directory