캐시가 비활성화되어 있어도 서버가 코드 파일의 변경 사항을 무시하는 이유는 무엇입니까?


14

로컬 호스트 (Windows 7, Chrome v79.0.3945.130 (64 비트))에서 html / js 코드를 테스트하고 시간 코드 변경의 약 50 %가 브라우저에 반영되지 않습니다 (개발 도구 / 소스에서 확인) ).
인터넷에는 많은 조언이 있지만 작동하지 않는 것 같습니다.

  • 다시로드를 마우스 오른쪽 단추로 클릭하고 "빈 캐시 및 하드 다시로드"를 선택하십시오. 30 %의 경우에는 도움이되지 않습니다.
  • Chrome 개발자 도구의 네트워크 탭에서 캐시를 사용 중지합니다. 도움이되지 않습니다.
  • <meta http-equiv="Cache-control" content="no-cache">헤더에 추가 -도움이되지 않습니다.
  • 교체 <script src="common.js"></script>로는 <script src="common.js?blabla"></script>- 사례의 60 %에 도움이됩니다,하지만 당신은 모든 변화는 거대한 기계에 의존 후 그것을 할 필요가있다. 또한 html 변경 사항에는 작동하지 않습니다.
  • 파일을 index.html에서 index2.html과 같은 새 파일로 복사하고 코드에서 파일 이름을 바꿉니다. 항상 작동하지만 더 큰 작업입니다.

github.io에 코드를 커밋 할 때 똑같은 문제가 발생합니다.

사이트가 코드 변경 사항을 즉시 반영하도록 도와주십시오.


편집 : index3.html 파일을 만들고 거기에 "hello world"만 넣었습니다. 브라우저에서 파일을 열었습니다. "hello world2"로 변경-브라우저가 내용을 업데이트했습니다. "hello world3"으로 변경 – 여러 번 다시로드하고 "빈 캐시 및 하드 다시로드"후에도 브라우저에 여전히 "hello world2"가 표시되었습니다. "hello world4"로 변경했습니다. 브라우저에 여전히 "hello world2"가 표시되었습니다. 4 시간 동안 나는 "hello world5"로 바뀌었다 – 브라우저는 여전히 "hello world2"를 보여준다. 이 파일은 기본 메모장으로 편집했습니다.


Edit2 : 사람들은 내가 사용중인 서버를 계속 묻습니다. 이것은 문제의 일부처럼 보입니다. 불행히도, 나는 그것을 확인하기 위해 정확히 무엇을 해야하는지 모른다. 여기까지 내가 찾은 모든 것이 있습니다.

  • 나는이 inetpub/wwwroot난에서 브라우저에서 HTML & JS 파일과 다음 열기 index.html을 넣어 디렉토리를 http://localhost/.
  • Devs Tools의 내 네트워크 패널은 다음과 같습니다 : image link .
  • 서버 설정이 매우 빨라서 추가 소프트웨어를 설치할 필요가 없었습니다. 즉, node.js를 사용하지 않습니다.
  • iisstart.htm이 열렸을 inetpub/wwwroothttp://localhost/iisstart.htmIIS7이라고 말합니다.

Chrome 개발자 도구에서 캐시 비활성화 + 새로 고침 + 캐시 다시 활성화 + 새로 고침으로 인해 문제가 해결되는 경우가 있습니다. ... 가치가 총에 수 있습니다
닉 파슨스

2
어떤 유형의 서버를 사용하고 있습니까?
흐트

@Jhecht 어떻게 확인합니까?
klm123

1
내가 대답에서 볼 수 있듯이 매개 변수를 사용하여 해결할 수 있습니다. 그리고 아마도 효과가있을 것입니다. 그러나 일반적으로 chrome dev 도구에서 캐시를 비활성화 할 때는 필요하지 않습니다. 그래서 제 직감에는 또 다른 캐시가 포함될 것입니다. 사용자와 서버 사이에는 여러 가지 추가 캐싱 기술이있을 수 있습니다. 몇 가지 예 : 서버 측 캐싱 (예 : 니스), CDN 캐싱 (예 : Cloudflare), 라우터 / 방화벽 (예 : 오징어 캐시)의 로컬 프록시 및 이와 유사한 것. 나는 그것들도 확인했다.
Jey DWork

1
@ klm123 어떤 웹 서버인지 알지 못하면 캐시 구성을 변경하거나 확인하는 방법을 알려주는 것이 불가능합니다. 당신이 당신의 웹 서버에 대해는 DevTools로의 네트워크 탭에 확인하는 한 가지 가능한 방법을 모를 경우 :로드의 응답 헤더를 확인 index.html유사한 무언가 X-Powered-By또는 Server웹 서버에 대한 힌트를 줄 수도 헤더. 파일 경로에 대한 인터넷 검색 inetpub/wwwroot은 IIS 서버를 강력하게 가리 킵니다.
acran

답변:


6

매개 변수를 사용하는 것이 올바른 방법입니다! 여기서 큰 변경 사항에서만 수동으로 변경하는 버전 번호를 추가 할 수 있으며 디버깅을 위해 Date.time ()으로 설정할 수 있으므로 <head> 태그에서 매개 변수가 항상 새로운이므로 캐시 된 모든 버전을 덮어 씁니다 하나:

< script type="text/javascript"> 
    var script = document.createElement('script'); 
    var version = Date.time();
    script.src = "common.js?v="+version; 
    document.head.appendChild(script) 
< /script>

도움이 되었기를 바랍니다!


할 수있을 것 같아요. 그러나 네 번째 옵션과 효과적으로 같지 않습니까? 파일 이름 뒤에 "? blabla"를 추가합니다. 소스 탭의 파일 이름이 같거나 blabla이 추가되었지만 파일 내용은 여전히 ​​동일합니다.
klm123

이건 같은게 아니야. 매개 변수를 두 번 사용하면 (Date.time ()에서는 절대 발생하지 않음) 캐시 된 버전으로 렌더링 될 수 있습니다.? blabla는 전혀 사용하지 않는 것처럼 두 번 사용한 후에도 동일합니다.
lehm.ro

매개 변수는 두 번 사용되지 않습니다. 코드를 편집 한 다음 매개 변수를 변경 한 다음 브라우저에서 소스 코드를 확인하면 이전 코드입니다.
klm123

내 접근 방식을 시도 했습니까?
lehm.ro

당신의 접근 방식이 도움이됩니다. 감사합니다. 그러나 그것은 내 문제를 해결하지 못합니다. 당신이 쓴 것은 내 상황에서 사실이 아닙니다. "매개 변수가 항상 새 것이므로 모든 캐시 된 버전을 덮어 씁니다"매개 변수를 새 것으로 변경해도 캐시가 안정적으로 다시로드되지는 않습니다. 또한 index.html의 변경에는 도움이되지 않습니다.
klm123

3

Windows 7에서 실행되는 IIS7 Windows 서버에서 콘텐츠 캐싱을 방지하려면이라는 구성 파일 중 하나를 변경해야합니다 web.config. 나중에 IIS 7에 대한 구성 파일의 위치는 %WinDir%\System32\Inetsrv\Config folder어디에서 %WinDir%Windows를 (일반적으로 설치되어있는 폴더입니다 C:/Windows).

web.config파일을 변경하기 전에 파일을 롤백 할 수 있도록 편집하기 전에 파일 의 백업 사본을 작성하십시오 .

당신의에서 web.config파일, 당신의 캐싱 방지하기 위해 다음을 추가합니다 index.html:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>

  <location path="index.html">
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Cache-Control" value="no-cache" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </location>

</configuration>

web.config여기 에서 파일 의 파일 경로를 얻었습니다 . Windows Doc : Configuration Reference

위의 캐시 구성을 여기에서 얻었습니다. IIS를 통해 제공되는 단일 페이지 응용 프로그램 HTML 파일의 캐싱을 비활성화하는 방법은 무엇입니까?


언급 된 경로에는 web.config가 없습니다. 나는 그것을 만들고 코드를 거기에 넣었다. 그러나 index.html을 전체 경로로 바꾸어야했습니다 . projectName/index.html브라우저의 url에서 복사합니다 http:/localhost/projectName/index.html. 결과-캐싱 문제에 영향을 미치지 않습니다.
klm123

@ kim123 web.config대신 사이트의 루트 폴더 (사이트가있는 폴더)에 파일을 추가 하고 경로를 다시 원래대로 변경하여 index.html작동하는지 확인할 수 있습니다.
AndrewL64

내가 했어 도움이되지 않습니다.
klm123

1

나는 같은 문제가 있었고 이것은 내 체크리스트입니다.

  1. 검사 의 Web.config (캐싱 및 clientcache, 커널 캐시 정책 등) 또는 htaccess로 (헤더 캐시 제어 설정).
  2. ASP, PHP와 같은 동적 언어를 사용한 경우 내부 캐시 설정이있을 수 있습니다. 한 경우에는 <%Response.Expires=1440%>많은 ASP 코드 줄에서 발견 되었으며 다른 모든 설정을 극복하고있었습니다! PHP session_cache_expire에서 동일한 작업을 수행 할 수 있습니다.
  3. IIS를 사용하는 경우 서버 > HTTP 응답 헤더 를 확인하여 서버 이름 아래에 나열된 개별 웹 사이트에 대해서도 동일한 캐싱이 없는지 확인하십시오.
  4. http-equiv="Cache-control"html 헤더를 확인하십시오 (이 테스트를 통과했습니다!).

마지막으로 나는 위의 모든 상황에서, 확인 '라고해야 함 캐시 에서 newtwork의 그러나이 좋다 항상 나를 위해 일한 크롬 콘솔에서 탭하는 목적으로 만 사용하고 그렇게 늘 방문자 디버깅을 위해 페이지의 새로운 버전을 볼 수 있습니다!


1. web.config 및 .htaccess는 어디에서 찾을 수 있습니까? 2. html과 js 만 사용합니다. 3. HTTP 응답 헤더는 다음과 같습니다. imgur.com/leYpdej
klm123

IIS를 사용하는 경우 web.congfig는 루트 ot wwwroot에 있습니다. 서버 레벨에는 Machine.config 파일이 있으며 IIS 콘솔에서 직접 수정할 수 있습니다. stackoverflow.com/questions/2325473/where-is-machine-config . Windows에서 아파치 서버를 사용하는 경우 창을 검색하여 .htaccess @ klm123
Ali Sheikhpour

0

Chrome을 사용하는 특정 경우에는 다음을 시도하십시오. 개발 도구 열기-> '네트워크'탭으로 이동 페이지를 새로 고친 후 '캐시 사용 안함'확인란을 선택하십시오.

참고 :이 작업을 수행 할 때마다 개발 도구 창이 항상 열려 있어야합니다.

여기에 이미지 설명을 입력하십시오

그러나 페이지 등을 강제로 새로 고치지 않고 변경 사항을 사용자에게 전파하려면 자주 변경되는 파일에 대해 참조 된 각 파일의 끝에 파일 버전을 추가해야합니다. 예를 들면 다음과 같습니다.

<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Sites/stackoverflow/primary.css?v=20b379f72a37" >

v=20b379f72a37끝에 추가 파일 내용의 자동 생성 된 파일의 해시입니다.


그게 내 목록의 항목 2입니다.
klm123

개발자 도구 창이 열린 상태로 유지됩니까?
마틴 Shishkov

개발 도구 창이 열리고 확인란이 선택되어 있지만 [보통 소스 탭을 봅니다] 하드 리프레시도 수행합니다.
klm123

0

이것은 긴 샷이지만 어떤 종류의 편집기 / IDE를 사용하고 있습니까? 또한 index.html에서 어떤 종류의 수정을하고 있습니까?

파일을 저장하고로드하려고 할 때 반영되지 않는 이러한 편집의 예를 제공 할 수 있습니까?

문제를 재현하려고합니다. 사람들이 제안한 바에 따르면 문제가 코드 자체에있는 것으로 보이지 않습니다. 환경 문제인 것 같지만 의심을 확인하려면 더 많은 정보가 필요합니다.


Microsoft Visual Studio 코드를 사용합니다. 예 : <script src = "common.js"> </ script>를 <script src = "common.js? blabla">로 바꿉니다. 예 2 : 새 버튼 추가, 새 div 추가, onload 함수 호출 추가 그것은 어떤 종류의 편집처럼 보입니다.
klm123

내 질문 게시물 끝에있는 수정 사항을 참조하십시오.
klm123

0

HTML 메타로 작성하는 것은 엄격한 지침이 아니라 브라우저에 대한 권장 사항입니다. 브라우저에서 엄격한 캐싱을 사용하면 도움이되지 않습니다.

솔루션은 잘 설명되어 있습니다 : https://curtistimson.co.uk/post/front-end-dev/what-is-cache-busting/

서버 측에서 파일 자체의 마지막 업데이트 날짜가있는 버전을 스크립트에 추가하는 것을 선호합니다.

<script src="/myScript.js?v=1579780745150"></script>

여기서 1579780745150 은 Unix Timestamp가 myScript.js 파일 자체를 업데이트합니다 . 자체 파일에서만 작동하지만 외부 파일은 필요하지 않습니다. 대부분 파일 이름은 버전입니다.


백엔드 코드가 필요한 경우 어떤 플랫폼을 사용했는지 알려주십시오.
Aleksandr Smityukh

0

이것은 아마도 실망스럽고, 당신이 잘못하고있는 것처럼 들리지 않습니다.

브라우저와 스크립트 파일 사이에 어떤 캐싱을 수행하는 것이 문제 일 수 있습니다.

그것이 무엇인지 확인하기 위해 localhost URL을 어떻게 탐색하고 있는지 묻겠습니다.

예 :

file://path/to/file.html
http://localhost/file.html
http://127.0.0.1/file.html
http://[machine's-hostname]/file.html
http://[custom-domain-defined-in-hosts-file]/file.html

실행 중이라면 file://path/to/file.html웹 서버 / 프록시를 통해 탐색하지 않는 것입니다. 그렇다면 http://[something]/file.html어떤 종류의 웹 서버를 실행 중이며 범인 일 가능성이 큽니다. 캐싱을 해제 할 수있는 설정을 찾으십시오.

웹 서버를 사용하지 않고 문자 그대로 웹 서버없이 로컬 html 파일을 직접 탐색하는 경우 브라우저가 범인이라고 제안합니다. 이 경우 Martin Shishkov가 제안한 것처럼 브라우저 캐싱을 끄는 것이 좋습니다 .


그건 http://localhost/ProjectName/index.html당신이 캐싱을 해제 할 수 있습니다이 설정 될 수 있습니까?
klm123

다른 곳에 게시 한 스크린 샷에서 IIS를 사용하고있는 것 같습니다 (Microsoft의 인터넷 정보 서비스라고도 함). 빠른 해결책은 .html 파일을 두 번 클릭하여 브라우저에 파일을로드하는 것 file://path/to/projectName/index.html입니다. 그러면 방정식에서 웹 서버가 제거됩니다. IIS를 계속 사용하고 캐시를 수정하려면 support.microsoft.com/en-us/help/247404/…
Dean 가정용

0

Chrome은 파일이 너무 많이 변경되지 않은 경우 의미가 확실하지 않은 경우 "컴파일 된"캐시 버전을 사용하는 방식으로이 작업을 수행합니다. html의 경우 파싱 된 돈 트리를 의미합니다. JS 사전 컴파일 된 코드 등

main.md5hash.js파일 이름을 변경하면 캐시가 무효화되므로 많은 프레임 워크에서 파일 이름 내에 해시를 사용 합니다.

그러면 html이 업데이트되지 않을 가능성이 있습니다. 그리고 분명히, 확실하지 않습니다, 당신은 항상 날짜처럼 임의의 얼룩으로 주석을 추가 할 수 있습니다.


0

귀하의 답변 업데이트에 따르면, 귀하의 문제는 IIS v7 에 의해 귀하의 PC 메모리 를 사용하여 로컬 하드 드라이브가 아닌 캐싱 하는 데 사용됩니다. 그 이유는 Hard reload모든 다른 방법이 제대로 작동하지 않는 것 같습니다.

3 가지 해결책을 생각할 수 있습니다.

1. IIS 캐시 문제 해결 : (IIS가 설치된 PC가 없기 때문에 테스트되지 않음)

  1. 에서 시작 메뉴를 클릭 관리 도구를 하고 다음을 클릭 인터넷 정보 서비스 (IIS) 관리자를. ( 이미지 참조 )
  2. 왼쪽트리 보기에서 애플리케이션을 찾으십시오.
  3. 출력 캐싱 메뉴 항목을 선택하십시오 .
  4. 캐시 규칙 추가를 클릭 한 다음 캐시extension 를 비활성화 할 파일 ( 예 .aspx: .css, .js 등)을 입력하십시오 (한 번에 하나씩)?
  5. 이제 사용자 모드 캐싱 Untick 또는 모든 캐싱 방지를 확인할 수 있습니다 . 다음과 비슷해야합니다.

여기에 이미지 설명을 입력하십시오

솔루션 소스 -IIS 7 캐시에 대해 자세히 알아보십시오


2. IIS에 대한 대안 사용 꽤 많지만 (내 경험에 근거하여) WAMP 또는 XAMPP를 권장합니다. 둘 다 더 나은 개발 환경을 제공하고 Windows 7을 모두 지원합니다. VS 코드 당신은 라이브 서버 확장을 사용할 수 있습니다 .


3. 개발하는 동안 Chrome 시크릿 모드를 사용하십시오 . (IIS7에서 작동하는지 확실하지 않음)


캐시 규칙 추가 / 모든 캐싱 방지-[html로 시도]에 도움이되지 않습니다. 시크릿 모드-도움이되지 않습니다.
klm123

.js파일 을 사용해 보셨습니까 ? 변경 내용에 따라 다릅니다.
awran5
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.