Angular 中 nginx 设置缓存

最近在公司 Angular 项目中用 nginx 部署项目遇到一些问题，在此记录一下：

想利用 nginx 服务器进行一些缓存操作

location / {
  expires 1y;
  add_header Cache-Control  max-age=86400;
}

表示整个项目如果如果没有更新的话，从浏览器缓存中读取，对于静态资源来说，这样做的好处是节省流量，提高访问速度。

但是这样会遇到一个问题，就是如果发布新版本的话，因为 index.html 文件也进行了缓存，那么会造成服务器中的版本和浏览器中的版本不一致，也就是没有更新，当然 ctrl + F5 可以进行强制拉取新版本，但这对于用户来说是一种不好的体验。

解决办法：
1. 我们只需要把index.html 不进行缓存操作，每次都从服务器中读取，这样就能保证时刻都是最新版本了。
2. 在 index.html 中加入如下 meta 标签:

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

3. 也可以在 nginx 中设置，如:

location /=index.html {
  expires 0;
  add_header Cache-Control no-cache;
}

这样 index.html页面就能保证可以取到最新的了，当然没有最新的也会从缓存中读取，返回 304。