Home 웹 캐시 서버
Post
Cancel

웹 캐시 서버

Posted Jan 17, 2023
By wslee94
5 min read

캐시

  • 자주 쓰이는 데이터들을 별도 공간에 복사하고 제공하는 기술이다.
  • 캐시의 데이터는 일반적으로 RAM과 같이 빠르게 액세스할 수 있는 하드웨어에 저장된다.
  • 캐시의 주요 목적은 상대적으로 더 느린 공간에 액세스해야 하는 필요성을 줄여 응답속도를 높이기 위함이다.

웹 캐시 서버

웹 캐시 서버

웹 서버의 정적 자원(html, javascript, css, image …)을 별도의 웹 캐시 서버에 복사하고 사용자(client)가 해당 자원을 요청하면 원본 서버가 아닌 웹 캐시 서버에서 응답한다. 지리적으로 웹 캐시 서버를 분산 시킬 수도 있다.(=CDN)

웹 캐시 서버 장점

  • 페이지 로드 시간이 단축된다.
  • 원본 서버가 제공해야 하는 데이터 양을 줄이고 호스팅 비용을 줄일 수 있음 → 대역폭 비용 절감
  • 가용성이 향상된다. (여러 개의 분산된 서버를 사용할 수 있어서 서비스 장애에 유연함)
  • 서버를 분산 했기 때문에 DDoS 같은 공격을 완화 시킬 수 있음 → 웹사이트 보안 개선

클라이언트가 어떻게 웹 캐시 서버로 요청을 보낼까?

빌드 시점에 모든 정적 파일 요청 주소에 웹 캐시 서버 도메인을 prefix로 포함하는 방식을 사용할 수 있다. Next.js에서는 next.config.js 내부에서 assetPrefix 옵션을 통해 지정할 수 있다.

1
2
3
4
5

const isProd = process.env.NODE_ENV === 'production'

module.exports = {
  assetPrefix: isProd ? 'https://cdn.mydomain.com' : undefined,
}

assetPrefix 사용 전

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Create Next App</title>
    <link rel="stylesheet" href="/_next/static/css/ab44ce7add5c3d11.css" data-n-g="">
    <script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script>
    <script src="/_next/static/chunks/webpack-8fa1640cc84ba8fe.js" defer=""></script>
    <script src="/_next/static/chunks/framework-ad45764ecfcae9e5.js" defer=""></script>
    <script src="/_next/static/chunks/main-1227de1dc46e1332.js" defer=""></script>
    <script src="/_next/static/chunks/pages/_app-2398585b21d2d8c8.js" defer=""></script>
    <script src="/_next/static/chunks/pages/index-4049d6ce62ba362d.js" defer=""></script>
    <script src="/_next/static/-SNbzjxgeSW8kTw1FFTLE/_buildManifest.js" defer=""></script>
    <script src="/_next/static/-SNbzjxgeSW8kTw1FFTLE/_ssgManifest.js" defer=""></script>
  </head>
  <body></body>
</html>

assetPrefix 사용 후

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Create Next App</title>
    <link rel="stylesheet" href="https://cdn.mydomain.com/_next/static/css/ab44ce7add5c3d11.css" data-n-g="">
    <script defer="" nomodule="" src="https://cdn.mydomain.com/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script>
    <script src="https://cdn.mydomain.com/_next/static/chunks/webpack-94f84c2c6312a36a.js" defer=""></script>
    <script src="https://cdn.mydomain.com/_next/static/chunks/framework-ad45764ecfcae9e5.js" defer=""></script>
    <script src="https://cdn.mydomain.com/_next/static/chunks/main-1227de1dc46e1332.js" defer=""></script>
    <script src="https://cdn.mydomain.com/_next/static/chunks/pages/_app-2398585b21d2d8c8.js" defer=""></script>
    <script src="https://cdn.mydomain.com/_next/static/chunks/pages/index-4049d6ce62ba362d.js" defer=""></script>
    <script src="https://cdn.mydomain.com/_next/static/kVroZxF80Tx_pXiJpKqe2/_buildManifest.js" defer=""></script>
    <script src="https://cdn.mydomain.com/_next/static/kVroZxF80Tx_pXiJpKqe2/_ssgManifest.js" defer=""></script>
  </head>
  <body></body>
</html>

.js, .css 파일 요청 주소 앞에 지정한 웹 캐시 서버 도메인을 확인할 수 있다.

CDN(Contents Delivery Network)

CDN?
콘텐츠를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템을 말한다.

CDN

네트워크 속도는 거리가 멀어질수록 오래 걸리므로 지리적으로 멀리 위치한 사용자에게 html, javascript, css, image와 같은 자원을 전송하기엔 사용성이 떨어진다. 이를 해결하기 위해 CDN은 전 세계 각지에 캐시 서버를 두고 사용자의 위치에 가장 가까운 캐시 서버가 자원을 전송해주는 역할을 한다. CDN은 앞에서 알아본 캐싱 서버를 통해 지리적인 한계를 극복한 케이스인 것 같다. CDN을 지원하는 대표적인 서비스로는 AWS의 CloudFront가 있다.

사용자는 CDN을 관리하는 서버로 요청을 보내고 CDN 관리 서버는 사용자에게 가장 빠르게 서비스를 제공할 수 있는 캐시 서버를 선택해서 응답하도록 한다. 초기 캐시 서버에 콘텐츠가 캐시가 되어있지 않기 때문에 일시적으로 원본 서버로 요청이 많이 들어올 수 있으나, 일정 시간이 지난 후에는 원본 서버로 요청이 줄어들게 된다.

웹 캐시를 사용할 때 고려해야할 점

원본 서버에서 웹 캐시 서버에서 캐싱 중인 자원을 변경했을 때 웹 캐시 서버가 알아차리지 못하면 사용자는 업데이트되기 전 구식의 자원을 받게 될 것이다. 이를 예방하기 위해서 적절한 캐시 전략을 세워야 한다. 이와 관련해서는 추후 포스팅에서 다루어보도록 하겠다.

Deveploment, Cache
web cache cdn
Recently Updated