이 페이지는 Cloud Translation API를 통해 번역되었습니다.

HTTP 캐싱 동작 구성

Jeff Posnick

이 Codelab에서는 Express 서빙을 실행하는 Node.js 기반 웹 서버 프레임워크입니다 또한 예상되는 캐싱 동작이 Chrome DevTools의 Network 패널을 사용하여 실제로 적용되고 있습니다

샘플 프로젝트 익히기

다음은 샘플 프로젝트에서 작업할 키 파일입니다.

server.js에는 웹 앱의 다음 항목을 제공하는 Node.js 코드가 포함됩니다. 있습니다. Express를 사용하여 HTTP 요청을 처리합니다. 확인할 수 있습니다 특히 express.static()는 공개 디렉터리에 있기 때문에 serve-static는 문서 가 도움이 될 것입니다.
public/index.html는 웹 앱의 HTML입니다. 대부분의 HTML 파일과 마찬가지로 URL에 버전 관리 정보가 포함됩니다.
public/app.15261a07.js 및 public/style.391484cf.css는 웹 앱의 JavaScript입니다. CSS 애셋을 사용할 수 있습니다. 이러한 파일은 각각 URL에 해시가 포함되어 있습니다. 광고 슬롯이 있습니다. index.html는 버전이 지정된 특정 URL을 추적합니다.

를 통해 개인정보처리방침을 정의할 수 있습니다.

HTML의 캐싱 헤더 구성

버전 관리 정보가 포함되지 않은 URL에 대한 요청에 응답할 때는 응답 메시지에 Cache-Control: no-cache를 추가해야 합니다. 또한 2개의 추가 응답 헤더 중 하나를 설정하는 것이 좋습니다. Last-Modified 드림 또는 ETag. 이 index.html이(가) 이 카테고리에 속합니다. 이 단계는 크게 두 단계로 나눌 수 있습니다.

먼저 Last-Modified 및 ETag 헤더는 etag 및 lastModified 구성 옵션을 제공합니다. 이 두 옵션 모두 실제로 true로 기본 설정됩니다. HTTP 응답을 받을 수 있으므로 현재 설정에서는 수신 동의하지 않아도 있습니다. 그러나 구성에서 어차피 명시적일 수 있습니다.

둘째, Cache-Control: no-cache 헤더를 추가할 수 있어야 하지만 HTML 문서 (이 경우 index.html)에만 해당합니다. 가장 쉬운 방법은 이 헤더를 조건부로 설정하면 setHeaders function님, 그 내에서 수신되는 요청이 HTML 문서에 대한 요청인지 확인합니다.

수정할 리믹스를 클릭하여 프로젝트를 수정할 수 있도록 합니다.

server.js의 정적 제공 구성은 다음과 같이 시작됩니다.

app.use(express.static('public'));

위에서 설명한 대로 변경하면 다음과 같은 결과를 얻게 됩니다. 다음과 같습니다.

app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    }
  },
}));

버전이 지정된 URL의 캐싱 헤더 구성

포함된 URL에 대한 요청에 응답할 때 'fingerprint' 또는 변경되어서는 안 되는 콘텐츠가 있는 경우 답변 Cache-Control: max-age=31536000 app.15261a07.js 및 style.391484cf.css이(가) 이 카테고리에 속합니다.

다음을 기반으로 setHeaders function 드림 마지막 단계에서 사용한 경우, 주어진 버전이 지정된 URL에 관한 요청입니다. 그렇다면 Cache-Control: max-age=31536000 헤더를 추가하세요.

이를 위한 가장 강력한 방법은 정규 표현식 요청한 자산이 귀하가 지정한 특정 패턴과 일치하는지 해시가 속하는 것을 알 수 있습니다. 이 샘플 프로젝트의 경우, 항상 숫자(0~9)와 소문자 a~f(예: 16진수 문자)를 사용할 수 있습니다. 해시 항상 양쪽의 . 문자로 구분됩니다.

사용자가 일반적인 규칙과 일치하는 new RegExp('\\.[0-9a-f]{8}\\.')로 표현할 수 있습니다.

참고: 이러한 규칙을 만들 때 최대한 구체적으로 명시하면 향후 문제로부터 보호될 수 있습니다. 보다 일반적인 일치(예: .js 또는 .css 파일 확장자 확인) 작업은 버전이 지정되지 않은 JavaScript 또는 CSS 애셋을 프로젝트에 추가하면 나중에 문제가 될 수 있습니다.

다음과 같이 setHeaders 함수를 수정합니다.

app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    const hashRegExp = new RegExp('\\.[0-9a-f]{8}\\.');

    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    } else if (hashRegExp.test(path)) {
      // If the RegExp matched, then we have a versioned URL.
      res.setHeader('Cache-Control', 'max-age=31536000');
    }
  },
}));

DevTools를 사용하여 새 동작 확인

정적 파일 서버를 수정한 후에는 DevTools Network 패널을 연 상태에서 라이브 앱을 미리 보고 올바른 헤더가 설정되어 있는지 확인할 수 있습니다.

사이트를 미리 보려면 앱 보기를 누릅니다. 그런 다음 전체 화면 입니다.
선택한 항목에 해당하는 항목을 네트워크 패널에 가장 관련성 높은 정보를 추가할 수 있습니다. 열 헤더:

DevTools 구성 Network 패널

여기서 주의해야 할 열은 Name, Status, Cache-Control입니다. ETag, Last-Modified

DevTools를 Network 패널에 연 상태에서 페이지를 새로고침합니다.

페이지가 로드된 후 네트워크 패널에 다음과 같습니다.

네트워크 패널 열

첫 번째 행에는 이동한 HTML 문서가 표시됩니다. 이것은 Cache-Control: no-cache와 함께 제공됩니다. 해당 요청의 HTTP 응답 상태 304입니다. 이 브라우저가 캐시된 HTML을 즉시 사용하지 않고 대신 Last-Modified 및 ETag를 사용하여 웹 서버에 HTTP 요청을 했습니다. 기존 HTML에 대한 업데이트가 있는지 확인할 수 있습니다. 캐시합니다. HTTP 304 응답은 업데이트된 HTML이 없음을 나타냅니다.

참고: Cache-Control: no-cache은 '캐시된 사본을 사용한 적이 없음'을 의미하지 않습니다. 이는 '항상 서버에 먼저 확인하고 HTTP 304 응답이 있는 경우 캐시된 사본을 사용'한다는 의미입니다.

다음 두 행은 버전이 지정된 JavaScript 및 CSS 애셋입니다. 해야 할 일 Cache-Control: max-age=31536000와 함께 게재되며 각 값은 200입니다. 사용된 구성으로 인해 Node.js 서버를 사용하고, 항목을 클릭하면 추가 세부정보가 표시됩니다. 예를 들어 '(디스크 캐시에서)' 응답이 수신되었음을 알 수 있습니다.

네트워크 응답 상태 200

ETag 및 Last-Modified 열의 실제 값은 그다지 중요하지 않습니다. 이 설정이 제대로 되었는지 확인하는 것이 중요합니다

요약

이 Codelab의 단계를 통해 이제 다음을 수행하는 방법을 알게 되었습니다. Express를 사용하여 Node.js 기반 웹 서버에서 HTTP 응답 헤더를 구성합니다. HTTP 캐시 사용을 최적화할 수 있습니다. 또한 확인해야 할 단계도 있습니다. 예상되는 캐싱 동작이 사용되고 있음을 바로 Chrome의 DevTools입니다.