The deployment of front-end projects used to be to put static resources in the back-end project and deploy them together with the back-end deployment. With the popularity of front-end and back-end separation development models, front-end projects can be deployed separately, and currently the most popular way is to nginxdeploy.
For front-end projects, nginxthere are two main functions:
- Host static resources, that is, serve as a static resource server ;
- Do reverse proxy for dynamic resources, that is, proxy background interface services to prevent cross-domain ;
routing configuration
The most common configuration nginxis the routing configuration, and there are several ways to write the routing configuration.
1. =
location = /111/ {
default_type text/plain;
return 200 "111 success";
}
locationA is added between and the path =, which means exact match, that is, only the exact same urlwill match this route.
Added after the path aa, then it is not an exact match, so it is 404.
2. without =
Represents matching according to the prefix, followed by any path
location /222 {
default_type text/plain;
// 这里的 $uri 是取当前路径。
return 200 $uri;
}
3. Support regular matching~
// 匹配以/333/bbb开头，以.html结尾的路径
location ~ ^/333/bbb.*\.html$ {
default_type text/plain;
return 200 $uri;
}
The above ~is case sensitive, if not case sensitive is~\*
// 匹配以/333/bbb开头，以.html结尾的路径
location ~* ^/333/bbb.*\.html$ {
default_type text/plain;
return 200 $uri;
}
4. ^~Represent priority
The configuration below has two paths that /444start with:
location ~* ^/444/AAA.*\.html$ {
default_type text/plain;
return 200 $uri;
}
location ~ /444/ {
default_type text/plain;
return 200 $uri;
}
If it is accessed /444/AAA45.html, it will directly hit the first route. /444/What if I want to hit it? Just add ^it.
location ^~ /444/ {
default_type text/plain;
return 200 $uri;
}
That is to say, ^~the priority of prefix matching can be increased.
To sum up, locationthere are four types of syntax:
location = /aaais/aaaa route that matches exactly;location /bbbis/bbba route that matches the prefix.location ~ /ccc.*.htmlIt is a regular match, you can add a*to indicate case insensitivelocation ~* /ccc.*.html;location ^~ /dddis a prefix match, but with a higher priority.
The priority of these 4 grammars is as follows:
Exact match (=) > high priority prefix match (^~) > regular match (~ / ~*) > common prefix match
root and alias
nginxThere are two ways to specify the file path rootand the main difference is how to interpret the latter , which will cause aliasthe two to map requests to server files in different ways root.aliasnginxlocationuri
rootThe processing result is:rootpath +locationpath;aliasThe processing result is:aliasreplace path withlocationpath;
aliasis the definition of a directory alias, rootand is the definition of the top-level directory.
It should be noted that the end aliasmust be used later /, otherwise the file will not be found, and rootit is dispensable. Also, aliasonly locationin blocks.
rootExample:
location ^~ /test/ {
root /www/root/html/;
}
If a requested uri is /test/a.html, the web server will return /www/root/html/test/a.htmlthe file on the server.
aliasExample:
location ^~ /test/ {
alias /www/root/html/new_test/;
}
If a requested uri is /test/a.html, the web server will return /www/root/html/new_test/a.htmlthe file on the server.
Note that here new_test, because the path configured later aliaswill be locationdiscarded, the currently matched directory will point to the specified directory.
Secondary directory
Sometimes it is necessary to deploy multiple projects under one port, then it can be deployed in the form of a secondary directory.
There will be some pitfalls when using the secondary directory to deploy. For example, when I request http://xxxxxxxx.com/views/basedata, the browser automatically jumps to it http://xxxxxxxxm:8100/store/views/basedata/.
What is the reason?
The most fundamental problem is that the redirection is triggered because there is http://xxxxxxxx.com/views/basedatano following , and the redirection is redirected to , so just avoid triggering the redirection./nginx301http://xxxxxxxxm:8100/store/views/basedata/
If you can bear to use http://xxxxxxxxm:8100/store/views/basedata/the last /address like this directly, then there is no problem.
So why is the redirect triggered?
When the user requests http.xxxxxx.cn/osp, the here $uriis /ospto nginxtry to find this file in the directory specified by aliasor .root
If there is a file{alias指定目录}/osp named , note that this is a file, not a directory , and the content of this file will be sent to the user directly.
Obviously, there is no ospfile named in the directory, so I checked osp/and added one /, that is, to see if there is a {alias指定目录}/osp/directory named .
That is, when we access the uri, if the access resource is a directory, and the uri does not /end with a forward slash, then nginxthe service will return a 301 jump, and the target address needs to be added with a forward slash/ .
One of the easiest ways is to directly access a specific file, eg http.xxxxxx.cn/osp/index.html, so that no redirection occurs. However, this method is not elegant enough, and the complete file path must be entered every time.
Another way is to adjust nginxthe redirection configuration in , nginxthree configurations in redirection: absolute_redirect, server_name_in_redirect, port_in_redirect.
absolute_redirectUse this command to control nginxwhether the redirection address issued by is a relative address or an absolute address:
1. If it is set to off, nginxthe redirection issued by will be relative, 没有域名和端口and there will be nothing to do server_name_in_redirectwith port_in_redirectit.
After adding this configuration, although redirection will also occur, it will not be added to the path 域名和端口.
2. If it is set to on, nginxthe redirection issued by will be absolute; only the settings absolute_redirectof on, server_name_in_redirectand port_in_redirectwill have an effect.
nginxEnable gzipstatic compression to improve efficiency
gzipIt is a format, and it is also a decompression tool under linux. After we use to gzipcompress app.jsthe file, the original file becomes a .gzfile ending with , and the file size is reduced from 42571 to 11862.
Currently, there are two forms of static resource compression:
- Dynamic compression : Before the server returns any static files, each request is compressed by the server for output.
- Static compression : The server directly uses the ready-made pre-compressed files with the extension .gz to output directly.
We know gzipthat is CPUintensive, and real-time dynamic compression consumes more CPU resources. To further improve the performance of nginx, we can use static gzip compression to compress the files to be compressed in advance, and send the compressed files directly when the request arrives, thus reducing the pressure on the server CPU and improving performance .gz.
Therefore, we generally use static compression , and there are two steps to achieve static compression:
1. Generate a gzip compressed file
When using webpackpackaging, we compress the file and configure it as follows:
const isProduction = process.env.NODE_ENV === 'production'
if (isProduction) {
config.plugins.push(
new CompressionWebpackPlugin({
// 采用gzip进行压缩
algorithm: 'gzip',
test: /\.js$|\.html$|\.json$|\.css/,
threshold: 10240
})
)
}
It can be seen that one more .gzfile ending with .gz.
2. Enable modules that support static compression in nginx
nginxAdd the following configuration to the configuration :
gzip_static on;
If it is not added, it will not be found when accessing, and a 404 error will be reported, because the server only has .gzthe file and does not have the original file.
Summarize
The main configuration of the front-end project nginxdeployment is basically the ones mentioned above.
The first is locationthe four ways of writing routing;
Then there is a clear distinction between rootand alias;
When you need to use secondary routing when there are many projects, you need to pay attention to the configuration of redirection;
If your project file is large, you can enable gzipcompression to improve transmission efficiency.