nginx Angular应用程序在新部署后必须清除缓存

1yjd4xko  于 2023-04-20  发布在  Nginx
关注(0)|答案(3)|浏览(243)

我们有一个Angular 6应用程序。它在Nginx上提供服务。SSL是打开的。
当我们部署新代码时,大多数新功能都可以正常工作,但有些变化并不适用。例如,如果前端开发人员更新服务连接并部署它,用户必须打开隐身窗口或清除缓存才能看到新功能。
哪些类型的更改不会自动更新?为什么它们与其他更改不同?
避免这个问题的常见解决方案是什么?

a9wyjsp7

a9wyjsp71#

问题是当一个静态文件被缓存时,它可能会被保存很长一段时间,直到它最终过期。这可能是一个烦恼,如果你对一个网站进行更新,但是,由于文件的缓存版本存储在访问者的浏览器中,他们可能无法看到所做的更改。
Cache-busting通过使用唯一的文件版本标识符来告诉浏览器新版本的文件可用,从而解决了浏览器缓存问题。因此,浏览器不会从缓存中检索旧文件,而是向源服务器请求新文件。
Angular cli通过为build命令提供--output-hashing标志来解决这个问题。
查看官方文档:https://angular.io/cli/build
示例(旧版本)

ng build --prod --aot --output-hashing=all

下面是可以传入--output-hashing的选项

  • none:不执行哈希
  • 媒体:只添加哈希到通过[url]处理的文件|文件]-加载程序
  • bundles:仅向输出bundle添加哈希
  • all:将散列添加到媒体和捆绑包
    更新

对于angular版本(例如Angular 8,9,10),命令为:

ng build --prod --aot --outputHashing=all

对于最新版本的angular(从angular 11到angular 14),命令将恢复为较旧的格式:

ng build  --aot --output-hashing=all
oiopk7p5

oiopk7p52#

for me adding添加:

ng build --aot --output-hashing=all

当你的应用程序在CDN和一个好的缓存nginx配置之后时,构建命令是不够的。
1-第一件事是删除html文件该高速缓存(nginx):

location ~ \.(html)$ {
        add_header Pragma "no-cache";
        add_header Cache-Control "no-store";
        add_header strict-transport-security "max-age=31536000";
        add_header X-Frame-Options "SAMEORIGIN";
        try_files $uri $uri/ /index.html;
    }

对于静态文件(js/css...),让缓存工作(网络性能/可用性):

location ~ \.(css|htc|less|js|js2|js3|js4)$ {
        expires 31536000s;
        add_header Pragma "public";
        add_header Cache-Control "max-age=31536000, public";
        try_files $uri $uri/ /index.html;
    }

2-保持dev/prod构建完全相同,用于测试目的。最终的build dev命令:

ng build --env=dev --aot=true --output-hashing=all --extract-css=true

3-我们需要在每个部署客户端浏览器加载所有的javascript文件从服务器而不是该高速缓存,即使部署是一个小更新.就像角有一些错误与此:https://github.com/angular/angular-cli/issues/10641和发生在我身上。
我最后使用了bash的强大功能,这是我使用package.json文件在每个开发(prod/dev)上该高速缓存的脚本:

"scripts": {
 ...
    "deploy_dev": "ng build --env=dev --aot=true --output-hashing=all --extract-css=true && npm run add_date",
    "deploy_prd": "ng build --prod && npm run add_date",
    "add_date": "npm run add_date_js && npm run add_date_css && npm run rm_bak_files",
    "add_date_js": "for i in dist/*; do if [ -f $i ]; then LC_ALL=C sed -i.bak 's:js\":js?'$(date +%H%M%m%d%y)'\":g' $i; fi done",
    "add_date_css": "sed -i.bak 's:css\":css?'$(date +%H%M%m%d%y)'\":g' dist/index.html",
    "rm_bak_files": "find dist -name '*.bak' -exec rm -Rf {} \\;"
},

命令说明:
add_date_js:查找并替换所有文件“js”为“js?{date+%H%M%m%d%y}”
add_date_css:在dist/index.html中查找并替换“css”为“css?{date+%H%M%m%d%y}”
rm_巴克_files:删除所有.巴克文件(网络性能)
这些sed命令在GNU/BSD/Mac上都可以工作。
相关链接:
Angular - Prod Build not generating unique hashes
sed in-place flag that works both on Mac (BSD) and Linux
RE error: illegal byte sequence on Mac OS X
Inline if shell script
How to loop over files in directory and change path and add suffix to filename
Is it possible to build separate CSS file with angular-cli?

vxqlmq5t

vxqlmq5t3#

虽然accepted answer above可以工作,**这个调整应该在angular.json**中进行,在configurations =〉<my-env-name> =〉outputHashing =〉下设置为all(用于生产环境)。
简化示例:

{
  "projects": {
    "<my-project>": {
      "architect": {
        "build": {
          "configurations": {
            "<my-env-name>": {
              "outputHashing": "all"
            }
          }
        }
      }
    }
  }
}

正如上面提到的,这个配置的可用选项:

*none:不执行哈希
*media:只对通过[url]处理的文件添加哈希|文件]-加载程序
*bundles:仅将散列添加到输出包
*all:向介质和捆绑包添加哈希

相关问题