Nginx configurates single-page applications

In the last installment, we talked about how to run a front-end project on a new server with Nginx, but there are still many drawbacks, such as how to run multiple projects under Nginx, and the common reasons for refreshing white space in spa single-page projects and how to handle them.

Configure multiple items on the same port

Suppose we have two single page project, a PC’s official website, a mobile website, we would like to run in the previous period on port 8082, then found out that our previous deployment folder is directly on the WWW directory, this can not, file all this can’t distinguish which projects are below, one thousand folder or file name, will cover off.

So there are two options:

1. Each CLI scaffold has a set of output folders, such as vue-CLIoutputDir, this can set the folder name.
2. Create a folder in the WWW directory, and upload the SCP file to the corresponding folder.

Here we use plan 1. Plan 2 is similar, but with a different path.

Modifying the Packaging Configuration

Since we are running projects on the same port, we can only distinguish projects by their paths.

Such as our project running under http://localhost:8082/mobile, then the vue add base – the router configuration:

new VueRouter({
  mode: 'history'.base: '/mobile'./ / PC in the same way...). }Copy the code

Of course, I recommend that you put the path value in the.env file,.env.dev:

BASE_URL=/mobile
Copy the code

Change the configuration to:

new VueRouter({
  mode: 'history'.base: process.env.BASE_URL, ... ) }// history: createWebHistory(process.env.BASE_URL) // 4.0+
Copy the code

Vue. Config. Js:

module.exports = {
  publicPath: process.env.BASE_URL,  // This is the external file link after packaging, such as '/mobile', then the final js and CSS link is '/mobile/js/xxxx.js'.
  outputDir: 'mobile'.// This is the name of the package output folder. }Copy the code

When we package the project, we get a mobile folder, we use SCP for file upload (same with PC)

scp -r ./mobile root@$host:~/nginx/www/; # Upload mobile fileCopy the code

The Nginx configuration is modified

location /pc {
  alias   /usr/share/nginx/html/pc/;
  index  index.html;
}

location /mobile {
  alias   /usr/share/nginx/html/mobile/;
  index  index.html;
}
Copy the code

Reopen nginx docker to restart the web, visit http://localhost:8082/mobile/, web page can normal open, when we visit http://localhost:8082/mobile found that was strange to redirect to port 80, That is http://localhost/mobile/, looking at the browser request and finding a 301 permanent redirect.

This is because When Nginx accesses a URI; If the resource is a directory and does not end with a /, Nginx will redirect a 301 to an address with a ‘/’ at the end. If the port number is set to ‘port_in_redirec’, Nginx will redirect a 301 to an address with a ‘/’ at the end. We can add absolute_redirect off to the server module; Close this redirection.

After setting up and restarting Nginx, we can access the corresponding project via http://localhost/mobile and http://localhost/pc.

Spa Single-page Jump Refreshes the white screen

We have carried out multiple project configurations above, but there is still one problem that has not been solved. This problem is very common, that is, the white screen refreshed after the jump. This is also the reason why many students dare not switch from hash route to History route.

Describe the problem briefly: We open the project root address directly access is normal, such as http://localhost/mobile, refresh and normal display, we click to jump to http://localhost/mobile/list, this is also the normal jump, but we are back refreshed in this address, There will be a 404 error, or we directly use the browser open http://localhost/mobile/list also can appear 404, this problem is more serious, which is we can open or refresh only root directly, the other path will appear the problem of 404.

The cause of the 404

You can think of it as getting a static resource. Let’s take a look at Nginx’s location configuration:

location /pc {
  alias   /usr/share/nginx/html/pc/;
  index  index.html;
}
Copy the code

When our URI matches/PC, we will look for it in the alias path. By default, we will look for index.html after the index directive. For example, if we access http://localhost/mobile, we can access it normally. Because mobile directory does have index. The HTML entities file, and then returned to normal, and visit http://localhost/mobile/list, Nginx will go to mobile/list/index. The HTML, obviously not this stuff, So return 404.

To sum it up: The route of SPA is generated by JS, and there is no entity file corresponding to the path. When Nginx accesses the entity resource of the web page, if it cannot find the entity resource, it will return 404, which means that the path is handled by our JS, not by Nginx. So we just need to return our index.html if Nginx cannot find the entity file path.

location /pc {
  alias   /usr/share/nginx/html/pc/;
  try_files $uri $uri/ /pc/index.html;
  index  index.html;
}
Copy the code

Try_files directive will find the back of the document, in turn until $uri is the original address, can’t find it/is $$uri uri/index, HTML, and the rest is/PC/index. The HTML, for example, http://localhost/pc/aaa.png, Will go to find http://localhost/pc/aaa.png, couldn’t find the words query http://localhost/pc/aaa.png/index.html, finally is http://localhost/pc/index.html

Ok, so the spa white screen problem is solved, but there is a minor problem, that is, if the path we are accessing does not exist (and neither does the SPA-Router) and the path is not processed by Nginx, then the 404 does not exist and the white screen will appear. But the smart ones have figured out that a lot of routers will add a wildcard at the end to match a 404 page, so it’s up to you to write your own 404 page.

Root and alias

Note that alias can only be used in locations, whereas root can be configured in HTTP, server, and location.

Root and alias are both Nginx directives that specify the path to a file, as shown in the example above:

# root
location /pc {
  root   /usr/share/nginx/html;
  try_files $uri $uri/ /pc/index.html;
  index  index.html;
}
# alias
location /pc {
  alias   /usr/share/nginx/html/pc/;
  try_files $uri $uri/ /pc/index.html;
  index  index.html;
}
Copy the code

Root = root; alias = root; root = root; alias = root; root = root; alias = root; If root has a 404, just look at the path directory to see if it exists.

One thing to note is that aliases need to have a/at the end of the path. It doesn’t matter if you add/or not, but this is a good habit to keep, otherwise it will go wrong. The following example respectively to access the http://localhost:8082/image/logo.png, will last 404:

location /image/ {
  alias   /usr/share/nginx/html/image/;
}
location /image {
  alias   /usr/share/nginx/html/image/;
}
location /image {
  alias   /usr/share/nginx/html/image;
}
location /image/ { So this is going to be 404
  alias   /usr/share/nginx/html/image;
}
Copy the code

Stay tuned for the next post where I’ll cover loading optimizations for single-page applications on Nginx.

This series of updates can only be arranged on weekends and after work, the update of more content will be slow, hope to help you, please more star or like collection support

This article address: xuxin123.com/web/nginx-s…