Nginx configuration single page application

In the last issue, we talked about how to run a front-end project with Nginx on a new server, but there are still many flaws. For example, what should we do if we want to run multiple projects under this Nginx? The common reasons for refreshing blanks in single-page spa projects and Processing and so on, this article will introduce one by one.

Same port multi-project configuration

Suppose we have two single-page projects, one PC official website and one mobile official website. We all want to run on port 8082 of the previous period. At this time, we found that the folder we deployed in the previous period was directly placed www . This is not enough. , Put all the files here and you can’t distinguish which project it is. In case the folder or file name is the same, it will be overwritten.

Then there are two options:

1. There are output folder settings on all major cli scaffolds, such as outputDir vue-cli, which can set the folder name.
2. Create a new folder for the corresponding project in the www directory, and upload scp to the corresponding folder.

Here we use scheme 1, which is similar to scheme two, but the path is different.

Modify packaging configuration

Since we are running projects under the same port, we can only distinguish different projects by path.

For example, if our project http://localhost:8082/mobile under 0610790f0dd8d5, then add base configuration to vue-router:

new VueRouter({
  mode: 'history',
  base: '/mobile', // pc同理
  ...
)}

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

BASE_URL=/mobile

Modify the configuration as:

new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  ...
)}

// history: createWebHistory(process.env.BASE_URL) // 4.0+

vue.config.js：

module.exports = {
  publicPath: process.env.BASE_URL,  // 这个是打包后外部文件链接追加值，比如'/mobile'，那么最后的js和css链接为'/mobile/js/xxxx.js'
  outputDir: 'mobile', // 这个是打包输出文件夹名
  ...
}

Pack the project, you will get a mobile folder, we use scp for file upload (same as pc)

scp -r ./mobile root@$host:~/nginx/www/;  # 上传mobile文件

Nginx configuration modification

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

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

Restart nginx, docker restart web , and visit http://localhost:8082/mobile/ at this time. The webpage can be opened normally. At that time, we visited http://localhost:8082/mobile but found that it was redirected to port 80 http://localhost/mobile/ , which is 0610790f0dda17. Check the browser request and found that it was permanently redirected by 301.

This is because when Nginx accesses the URI; if the access resource is a directory and there is no / end, then Nginx will perform a 301 redirect to the address with a'/' at the end, and the redirect port number port_in_redirec If not, it will listen , which is 80, so the redirection of 80 is performed here. We can absolute_redirect off; server module to turn off this redirection.

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

Spa single page jump to refresh the white screen

We have carried out multi-project configuration 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. Many students dare not switch from hash routing to history routing for this reason.

Briefly describe the problem: we directly open the root path address of the project and the access is normal, such as http://localhost/mobile above, the refresh is also displayed normally, we click to jump to http://localhost/mobile/list , and the jump is also normal at this time, but we refresh in place at this address 404 error occurs when we open or open http://localhost/mobile/list directly with the browser. This problem is more serious, that is, we can directly open or refresh only the root path, and other paths will have 404 problems. .

Cause of 404

First of all, our web page visits are all get requests. You can understand it as getting a static resource. Let's take a look at the location configuration of Nginx:

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

When our URI address matches /pc, it will be searched in the alias path. The default file is to find index.html after the index command. For example, we http://localhost/mobile normally because there is indeed index.html in the mobile directory. The entity file returns normally, and when accessing http://localhost/mobile/list , Nginx will look for mobile/list/index.html . Obviously there is no such thing, so it returns 404.

To sum up, the route of spa is generated by js, there will be no entity file corresponding to the path, and Nginx accesses the physical resource of the webpage, it will return 404 if it cannot find it, then this path is handed over to our js It is processed instead of being processed by Nginx, so we only need to return our index.html when Nginx cannot find the entity file of the path.

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

try_files command will search for the following files in sequence until they cannot be found. $uri is the original address, $uri/ is $uri/index.html , and the rest is /pc/index.html . For example, http://localhost/pc/aaa.png , it will first search for http://localhost/pc/aaa.png , if it can’t http://localhost/pc/aaa.png/index.html at the end. http://localhost/pc/index.html

ok, so the spa white screen problem is solved, but there is a slight problem, that is, when the path we visit does not exist (nor does the spa-router), the path is not processed by Nginx, then 404 is not at this time If it exists, a blank screen will appear, but smart students have thought that many routers will add a wildcard at the end to match the 404 page, so the 404 page will be left to us to write.

root and alias

This is a supplement, alias root and 0610790f0ddcb8. After all, many configurations use root . Please note that alias can only be used in location , while root can be configured in http , server , location , 0610790f0ddcc0, 0610790cc0, 0610790f0ddcc0, 0610790f0ddcb.

In fact, root and alias are both instructions for specifying file paths in Nginx. Take the above example:

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

The matching rules for these two are the same. Simply put, root will add the path configured after location, and alias will be removed. That is to say, the file path of both points to the pc folder under the root directory. That is to say root must actually exist (because it is appended). If root just look at the path directory.

However, one thing to note is that / required at the end of the alias path. Although it does not matter if you add it or not, it is a good habit, please keep it, otherwise you will get an error in the following situation. The following examples visit http://localhost:8082/image/logo.png respectively, and the last one will be 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/ { # 这里会404
  alias   /usr/share/nginx/html/image;
}

In the next article, I will introduce the loading optimization of a single page application on Nginx, please look forward to it.

This series of updates can only be organized during weekends and after get off work hours. If there are more content, the update will be slower. I hope it can be helpful to you. Please support it by star or like favorites.

The address of this article: https://xuxin123.com/web/nginx-spa