Angular App은 새 배포 후 캐시를 삭제해야 함

Angular App은 새 배포 후 캐시를 삭제해야 함

Angular 6 애플리케이션이 있습니다.Nginx에서 제공됩니다.SSL이 켜져 있습니다.

새 코드를 배포할 때 새 기능의 대부분은 정상적으로 작동하지만 일부 변경 사항에 대해서는 작동하지 않습니다.예를 들어 프런트 엔드 개발자가 서비스 연결을 업데이트하고 배포하는 경우 사용자는 새로운 기능을 보려면 인지 창을 열거나 캐시를 지워야 합니다.

자동으로 업데이트되지 않는 변경 유형은 무엇입니까?그들은 왜 다른 사람들과 다른가요?

이 문제를 피하기 위한 일반적인 해결책은 무엇입니까?

문제는 정적 파일이 캐시되면 만료되기 전까지 매우 오랜 시간 동안 저장될 수 있다는 것입니다.사이트를 업데이트하는 경우에는 이 문제가 발생할 수 있지만 캐시된 파일 버전이 방문자의 브라우저에 저장되므로 변경 내용을 볼 수 없을 수 있습니다.

캐시 버스팅은 고유한 파일 버전 식별자를 사용하여 브라우저에 새 버전의 파일을 사용할 수 있음을 알려줌으로써 브라우저 캐싱 문제를 해결합니다.따라서 브라우저는 캐시에서 이전 파일을 검색하지 않고 오리진 서버에 새 파일을 요청합니다.

는 Angular cli는 합니다 을 하여 이 합니다.--output-hashing빌드 명령을 나타내는 플래그입니다.

공식 문서 확인 : https://angular.io/cli/build

예제(이전 버전)

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

는 Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ ΔΔ Δ --output-hashing

• 없음: 해싱이 수행되지 않음
• media: [media|file]-loader를 통해 처리되는 파일에만 해시 추가
• 번들: 출력 번들에만 해시 추가
• 모두: 미디어 및 번들에 해시 추가

업데이트

Angular 버전(예: Angular 8,9,10)의 경우 명령은 다음과 같습니다.

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

angular의 최신 버전(angular 11에서 angular 14까지)의 경우 명령이 이전 형식으로 다시 돌아갑니다.

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

다음과 같이 덧붙일 수 있습니다.

    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/files ...)의 경우 캐시 작동 상태를 남깁니다(네트워크 성능/사용성).

    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- 테스트 목적으로 개발/프로드 빌드를 동일하게 유지합니다.최종 빌드 개발 명령:

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

3- 모든 배포 시 클라이언트 브라우저가 캐시가 아닌 서버에서 모든 자바스크립트 파일을 로드해야 합니다.각선미가 이것과 함께 버그를 가지고 있는 것과 같습니다: https://github.com/angular/angular-cli/issues/10641 그리고 나에게 일어난 일입니다.

저는 bash의 힘을 사용하여 종료했습니다. 이것은 패키지를 사용하는 모든 개발(prod/dev)의 캐시를 죽이기 위한 스크립트입니다.json 파일:

"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"로 찾아서 바꿉니다.{날짜+%H%M%m%d%y}"
add_date_graphics: dist/index.graphics에서 "dist"를 "dist?"로 찾아서 바꿉니다.{날짜+%H%M%m%d%y}"
rm_bak_files: 모든 .bak 파일 제거(네트워크 성능)

이러한 명령어는 GNU/BSD/Mac 둘 다에서 작동합니다.

링크:
Angular - Prod Build가 고유한 해시를 생성하지 않음
Mac(BSD)과 Linux에서 모두 작동하는 sed in-place 플래그
RE 오류: Mac OS X에서 잘못된 바이트 시퀀스
셸 스크립트의 경우 인라인
디렉터리에서 파일을 루프오버하고 경로를 변경하여 파일 이름에 접미사를 추가하는 방법
angular-cli로 별도의 CSS 파일을 만드는 것이 가능합니까?

위의 승인된 답변이 효과가 있겠지만, 이 조정은 아래에서 이루어져야 합니다.configurations=><my-env-name>=>outputHashing=> 으로 설정all(운영 환경의 경우).

단순화된 예:

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

그리고 해당 게시물에 언급된 바와 같이, 이 구성에 사용 가능한 옵션은 다음과 같습니다.

• 없음: 해싱이 수행되지 않음
• media: [media|file]-loader를 통해 처리되는 파일에만 해시 추가
• 번들: 출력 번들에만 해시 추가
• 모두: 미디어 및 번들에 해시 추가

언급URL : https://stackoverflow.com/questions/55402751/angular-app-has-to-clear-cache-after-new-deployment