介绍

该文章介绍前端静态资源部署的问题，暂不讨论强缓存与协商缓存等知识点。

静态资源部署

上传前端项目

1. 在前端服务器上，执行cd /进入到根目录。前端项目我通常会放在自己建立的/data/web/这个目录下。所以先利用mkdir命令创建data目录，然后cd data进入data目录后，再创建web目录并cd web。
2. 我的项目名是demo。所以在web目录下新建一个demo目录。这个demo就可以上传压缩的前端项目dist包。rz选择zip包后，执行unzip dist.zip。
3. 总结一下，我现在将项目部署到了前端服务器的/data/web/demo/目录下。

配置nginx

1. Nginx分为master与server两种。通常在master中维护公共配置，一般是在/etc/ngnix/nginx.conf文件中配置，而在server中则针对不同的项目来进行不同的配置,一般是在/etc/nginx/conf.d/目录中新建.conf后缀文件来进行配置。
2. 以上述demo为例，新建demo.conf，配置location块。

server {
  listen 端口；
  server_name ip或者域名；
  location /demo/ {
    root /data/web;
    #不设置index的话 默认是index.html
    #index demo.html;
    access_log logs/demo_access.log;
    error_log logs/demo_error.log;
  }
}

3. 上面配置的Nginx，当我们在浏览器中访问网站/demo/test.html时，就会映射到服务器的/data/web/demo/test.html。另外，location块这里有些比较重要的知识点。

location

server {
  listen 80;
  server_name jsgoshu.cn;
  location /blog/nginx/ {
    root /data/web;
    #alias /data/web/blog/nginx/;
    index index.html;
    access_log logs/blog_nginx_access.log;
    error_log logs/blog_nginx_error.log;
  }
}

1. 路由匹配规则

首先，一句话总结。匹配规则从高到低依次是精确匹配>^~的字符串匹配>正则匹配>字符串匹配。

匹配符号分为四类，分别是=、~、~*、^~。

=表示精确匹配，优先级最高。

^~表示字符串匹配，但优先级高于正则匹配

~与~*表示正则匹配。

可能上面有点难以理解。nginx路由的一套完整匹配规则如下：

TIP

①.'='前缀的指令严格匹配这个查询。如果找到，停止搜索。

②.所有剩下的常规字符串，最长的匹配。如果这个匹配使用'^~'前缀，停止匹配。

③.正则表达式，按照在配置文件中定义的顺序。

④.如果第③条规则产生匹配的话，结果被使用。否则，使用第2条规则的结果。

2. root与alias

root会将访问时匹配的路由与该root值拼接在一起，形成服务器上完整路径。可以对照node中的path.resolve(__dirname, '/blog/nginx/index.html')来大致理解。

而alias意为别名。它是将访问时匹配的路由映射到服务器的实际路径。不会再拼接一次。

另外我个人在使用alias时，发现需要注意一些问题：

WARNING

①alias只可以用来匹配目录，而不是静态资源。譬如访问路由是/blog/nginx，实际上会重定向到/blog/nginx/，这里的重定向会是301永久重定向。这种情况还好。但譬如访问/test.jpg，实际访问/test.jpg/。这就很严重了。

②301永久重定向会产生浏览器缓存，下次的请求会直接读取本地缓存，而不会发起网络请求。除非手动清除浏览器缓存并刷新。

③正是由于上面的原因，所以绝对不要用alias配置静态资源的映射访问。(其实现实中也不会用一个静态资源对应一个nginx匹配)。譬如：

  location /test.jpg {
    alias /blog/nginx/;
  }

当访问域名/test.jpg时，会产生301永久重定向到域名/test.jpg/。毫无疑问，页面上会出现403或者404。由于浏览器缓存，即使你换用root来重新配置nginx，只要原始访问路径不变，都不会起到效果。设想下，如果这种情况发生在生产环境😫。

总结：

- `nginx`的匹配路由应该对应到目录，而不是某一静态资源。

- 即使想要直接匹配静态资源，也不要用`alias`。而是可以用`root`。

3. try_files

try_files的使用，多见于部署SPA项目。

语法：try_files $uri $uri/ index.html;

try_files的作用是按顺序检查文件是否存在，返回第一个找到的文件或文件夹（结尾加斜线表示文件夹），如果前述的文件或文件夹都找不到，会进行一个内部重定向到最后一个参数。

假设访问路径是jsgoshu.cn/blog/nginx。而location配置简略如下：

location /blog/ {
  root /data/web;
  try_files $uri $uri/ /blog/index.html;
  index index.html;
}

依次寻找/data/web/blog/nginx data/web/blog/nginx/index.html。都没有找到的话，就重定向到/data/web/blog/index.html。

4. add_header

add_header可以用来设置响应头。常见的设置是这样：add_header Cache-Control no-store;

5. access_log与error_log

access_log与error_log分别代表的是访问日志与错误日志。这在开发中对于快速定位问题是非常有帮助的。所以推荐在配置location的时候也一定加上log。

另外要注意的是，在conf.d目录中自定义的的conf文件，都会以include引入到nginx.conf中。所以在设置access_log与error_log的相对路径时，实际上是要以nginx.conf的相对路径来设置。