캐시된 이전 버전의 정적 파일이 사용되지 않도록 최신 버전임을 나타내는 버전 추가

프론트 스테이지가 길기 때문에 프로그램만 보고 싶다면 건너뛰기 바랍니다.

환경

비주얼 스튜디오

• 비주얼 스튜디오 2019

ASP.NET 코어

• 3.1 (면도기 페이지, MVC)

웹 페이지에서 파일 캐싱 정보

웹 페이지를 방문할 때HTML 외에도 .js 파일(자바스크립트), .css 파일(스타일시트), 이미지 파일이 표시 및 실행을 위해 클라이언트에 다운로드됩니다. 그러나 일부 이미지 파일은 크고 매번 다운로드하는 것은 비용이 많이 들 수 있습니다. 또한 .js 파일 과 .css 파일은 다른 페이지에서 자주 사용되며 매번 다운로드 할 필요가 없습니다. 이러한 파일은 다운로드 후 브라우저에 일시적으로 저장될 수 있습니다. 이를 캐싱이라고 합니다.

예를 들어 파일이 캐시되면 동일한 페이지를 방문할 때 웹 서버에서 HTML이 다운로드됩니다. 캐시가 있는 경우 다운로드하지 않고 로컬로 저장된 파일을 사용하여 다른 파일을 보고 실행합니다. 이렇게 하면 서버의 부하가 줄어들고 클라이언트가 통신 대역폭을 소모하지 않고 고속으로 페이지를 볼 수 있습니다.

캐싱으로 인한 문제

서버에 배치된 파일과 캐시된 파일이 동일한지 여부는 일반적으로 HTML에 설명된 파일 경로에 따라 다릅니다. 동일한 파일 경로는 기본적으로 캐시된 파일입니다. (다른 조건이 있을 수 있지만 파일 경로는 확실합니다.)

다음은 파일 경로의 예입니다. href 및 src의 특성 매개 변수가 적용됩니다.

<!-- スタイルシート (.css) -->
<link rel="stylesheet" href="/css/site.css" />

<!-- 画像ファイル -->
<img src="/image/sample.png" alt="サンプル画像" />

<!-- JavaScript (.js) -->
<script src="/js/site.js"></script>

그러나 이 동작은 문제가 될 수 있습니다.

예를 들어 사용자가 처음 액세스할 때 버전 1 자바스크립트 파일이 있는 경우 버전 1 JavaScript 파일이 캐시됩니다. 그런 다음 서버는 버전 2 JavaScript 파일을 게시합니다. 사용자가 동일한 페이지를 방문했을 때 자바스크립트 파일 경로가 동일한 경우 서버 버전 2 JavaScript 파일을 다운로드하지 않고 캐시된 버전 1 자바스크립트 파일을 사용할 수 있습니다. 이로 인해 대중이 의도하지 않은 결함이 발생할 수 있습니다.

이 때 사용자 측의 대책 중 하나로 "캐시삭제 시도"를 자주 볼 수 있다고 생각하지만 이것이 원인일 수 있습니다.

서버 측의 캐시 문제를 처리하는 방법

위에서 설명한 바와 같이 캐시된 파일이 사용되는지 여부는 주로 파일 경로(URL)에 따라 다릅니다.

따라서 파일을 업데이트할 때 파일 이름을 변경하여 새 파일을 다운로드하도록 강제할 수 있습니다.

예를 들어 버전 1 파일의 경우

<link rel="stylesheet" href="/css/site.css" />

파일이 업데이트된 버전 2

<link rel="stylesheet" href="/css/site2.css" />

Site2는 클라이언트 측에서 .css.

그러나 수동으로 이 작업을 수행하는 경우 경로를 변경하고 물리적 파일의 이름을 바꾸는 것이 번거롭고 오류가 발생하기 쉽습니다.

파일 경로에 쿼리 매개 변수 추가

웹이 작동하는 방식을 사용하면 경로 후 키와 값의 조합으로 쿼리 매개 변수를 추가할 수 있습니다. 클라이언트 캐싱 메커니즘에서 실제 파일이 동일하더라도 쿼리 매개 변수가 다른 경우 별도의 파일로 인식됩니다. 쿼리 매개 변수는 추가된 경우에도 사용할 목적이 없는 값입니다.

쿼리 매개 변수는 다음 형식의 경로에 추가할 수 있습니다.

<!-- クエリパラメータなし -->
<link rel="stylesheet" href="/css/site.css" />

<!-- クエリパラメータあり -->
<link rel="stylesheet" href="/css/site.css?key=value" />

이 메커니즘을 사용하면 경로를 변경해야 하지만 실제 파일의 이름을 바꿀 필요는 없습니다.

프로그램에서 쿼리 매개 변수를 자동으로 추가합니다(잘못된 예)

프로그램에 이 쿼리 매개 변수를 자동으로 추가하면 정적 파일을 변경하는 경우 파일 경로를 수동으로 변경할 필요가 없습니다.

쉬운 예는 사용자가 웹 페이지에 액세스할 때 쿼리 매개 변수에 현재 시간을 추가하는 것입니다. 어떤 프로그래밍 언어로든 한 줄로 쓸 수 있다고 생각하기 때문에 매우 쉽습니다. 나는 세대 의 예가 다음과 같다 고 생각 :

<link rel="stylesheet" href="/css/site.css?20210223120000" />

그러나, 이것은 캐싱의 이점이 전혀 손실되는 단점이 있다. 이전 파일과 동일한 경우에도 웹 페이지를 방문할 때마다 경로가 변경됩니다. 별도의 파일로 인식되기 때문에 CSs 파일은 매번 서버에서 다운로드됩니다. 이전 버전의 파일은 더 이상 사용되지 않지만 캐싱 기능을 사용하지 않는 것과 동일합니다.

코어에 쿼리 매개 변수를 추가하여 버전 제어를 ASP.NET

이러한 캐싱 문제에 대한 표준 솔루션을 제공하는 ASP.NET 사전 ASP.NET 없음을 알수 있습니다.

파일 경로를 다음과 같이 설명하는 태그에 특성을 추가하기만 하면 asp-append-version="true" 됩니다.

<link rel="stylesheet" href="~/css/site.css" asp-append-version="true"/>
<img src="/image/sample.png" asp-append-version="true"/>
<script src="~/js/site.js" asp-append-version="true"></script>

웹에 게시된 후 실제로 페이지를 방문하는 경우 다음과 같이 확장됩니다.

<link rel="stylesheet" href="/css/site.css?v=S2ihmzMFFc3FWmBWsR-NiddZWa8kbyaQYBx2FDkIoHs" />
<img src="/image/sample.png?v=Z0tUqQmLt_3L_NSzPmkbZKxL8cMxglf08BwWb5Od5z4" />
<script src="/js/site.js?v=dLGP40S79Xnx6GqUthRF6NWvjvhQ1nOvdVSwaNcgG18"></script>

임의 문자열이 추가되지만 액세스가 이루어질 때마다 변경되지는 않습니다. 이 문자열은 해시 값이며 참조된 파일의 내용을 기반으로 생성됩니다. 따라서 파일의 내용이 변경되지 않는 한 동일한 문자열이 생성됩니다. 파일의 내용이 변경되면 새 문자열로 변경됩니다.

이렇게 하면 파일이 같으면 경로가 같기 때문에 캐시된 파일이 선호됩니다. 파일이 업데이트되면 경로가 변경되므로 새 파일을 다운로드하고 사용할 수 있습니다.

즉, asp-append-version="true" 이 특성은 wwwroot 폴더에 배치된 정적 파일에 대해서만 표준입니다. 다른 파일로 설정할 때 임의 문자열이 확장되지 않습니다.

샘플 프로그램 정보

기본 프로젝트 템플릿은 사이트 asp-append-version 템플릿을 .js. 사이트.css 그것에 추가 된 되지 asp-append-version 않습니다.

샘플 프로그램은 _Layout.cshtml 파일의 사이트.js 및 asp-append-version 사이트.css를 추가합니다. 또한 img 태그를 asp-append-version 참조로 추가합니다.