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}\\.')로 표현할 수 있습니다.

• 다음과 같이 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 패널을 연 상태에서 라이브 앱을 미리 보고 올바른 헤더가 설정되어 있는지 확인할 수 있습니다.

• 사이트를 미리 보려면 앱 보기를 누릅니다. 그런 다음 전체 화면 입니다.

• 선택한 항목에 해당하는 항목을 네트워크 패널에 가장 관련성 높은 정보를 추가할 수 있습니다. 열 헤더:

여기서 주의해야 할 열은 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이 없음을 나타냅니다.

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

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

요약

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