Firebase 호스팅:SPA의 index.html에 대한 캐싱을 방지하는 방법

Firebase 호스팅:SPA의 index.html에 대한 캐싱을 방지하는 방법

거의 모든 경로가 다시 작성되는 파이어베이스에서 SPA를 호스팅하고 있습니다.index.html웹 팩 해시 기반 캐시 버스팅을 사용하고 있으므로 항상 캐시를 사용하지 않도록 하고 싶습니다.index.html하지만 다른 파일은 없습니다.저는 그렇게 하는 것이 놀라울 정도로 어렵다는 것을 알게 되었습니다.구체적으로, 내 파일 레이아웃은 다음과 같습니다.

/
├── index.html
├── login.html
├── js
│   ├── login.ba22ef2579d744b26c65.bundle.js
│   └── main.6d0ef60e45ae7a11063c.bundle.js
└── public
    └── favicon-16x16.ico

순진하게 시작했습니다."sources": "index.html"문서에서 이 인용문을 읽기 전에.

각 정의에는 글로벌 표기법을 사용한 다시 쓰기 규칙에 관계없이 원래 요청 경로와 일치하는 소스 키가 있어야 합니다.

좋아요, 그래서 이 헤더들을 넣을 파일을 지정하는 단순한 글로벌 대신 경로에 하나가 필요합니다.대부분의 경로가 index.html로 리디렉션되므로 이러한 헤더를 배치하지 않을 모든 경로를 제외한 글로벌이 필요합니다.

참고로, 나의.firebase.json호스팅 섹션은 다음과 같습니다.

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "cleanUrls": true,
    "trailingSlash": false,
    "headers": [
      {
        "source": <<<WHAT-GOES-HERE?>>>,
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          },
          {
            "key": "Pragma",
            "value": "no-cache"
          },
          {
            "key": "Expires",
            "value": "0"
          }
        ]
      }
    ]
  }
}

따라서 index.html로 리디렉션하고 캐시되지 않아야 하는 몇 가지 예를 제공합니다.

mysite.com  
mysite.com/  
mysite.com/foo/bar/baz  
mysite.com/index.html 

참고: 마지막 것은 실제로 사용되지 않기 때문에 캐시에 저장하면 살 수 있습니다.

그리고 index.html로 리디렉션되지 않고 캐시되지 않아야 하는 항목

**/*.* (ideally excluding index.html)
mysite.com/login  

내가 혼자서 가장 가까이 접근한 것은**/!(login|*.*)위에 나열된 거의 모든 것에 효과가 있지만, 설명할 수 없이 효과가 없습니다.mysite.com또는mysite.com/그 두 페이지는 이 지구본과 일치하지 않고 있고 나는 그 이유를 알 수 없습니다.

여기 제가 사용하는 구성이 있습니다.논리는 다음과 같은 모든 정적 파일에 캐시를 사용하는 것입니다.images, css, js기타 모든 다른 사람들을 위해."source": "/**"캐시를 캐시 없음으로 설정합니다.따라서 다른 모든 파일의 경우 example.com, example.com/index.html, example.com/about-us, example.com/about-us.html 캐시가 적용되지 않을 수 있습니다.

{
  "hosting": {
    "public": "dist",
    "headers": [
      {
        "source": "/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      },
      {
        "source":
          "**/*.@(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|woff2|font.css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=604800"
          }
        ]
      }
    ],
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}

앱에 서비스 작업자도 포함되어 있는 경우(소방본부 조직 내에서 P1 문제가 에스컬레이션되었으며, 이를 확인한 결과) 구성에 주의하십시오.서비스 작업자가 캐시되지 않았는지, "마지막 규칙이 승리"를 사용하여 파이어베이스 호스팅이 작동하는지 확인해야 하므로 서비스 작업자 규칙이 마지막인지 확인해야 합니다.다음과 같은 것을 선호합니다.

{
  "hosting": {
    "public": "dist",
    "headers": [
      {
        "source":
          "**/*.@(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|woff2|font.css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=604800"
          }
        ]
      },
      {
        "source": "/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      },
      {
        "source": "/service-worker.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      }
    ],
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}

특히 서비스 작업자가 사전 캐싱을 수행할 수 있기 때문에 index.html이 CDN 수준에서 캐시되지 않고 HTTP 요청이 새 복사본을 얻더라도 서비스 작업자의 사전 캐싱을 사용하여 index.html의 이전 복사본을 제공할 수 있습니다.

저는 최근에도 이 문제에 부딪혔고, 소스 글로브를 사용하는 것을 발견했습니다./**/!(*.*)종료가 포함되지 않은 하위 디렉터리를 대상으로 하기 때문에 잘 작동합니다.., 기, 본으로경일즉만로는것치의다니다을미합한즉에적즉▁((, 다▁routes,니의합▁match▁which미것▁only,i▁will,/,/login,/account/edit 특정 필요가 없습니다.그러면 모든 특정 파일 확장명에 대해 제외사항을 작성할 필요가 없습니다.

이것이 누군가에게 도움이 되기를 바랍니다(그리고 당신의 구성을 좀 더 제정신으로 만들기를 바랍니다)!

{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "/**/!(*.*)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      },
      {
        "source": "**/*.chunk.@(js|css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      }
    ]
  }
}

저는 또한, 는와 JS을 와 CSS ..chunk.그들 안에서 (이것은 로 바뀌어야 합니다..bundle.OP의 경우).

언급URL : https://stackoverflow.com/questions/48589821/firebase-hosting-how-to-prevent-caching-for-the-index-html-of-an-spa