0Pricing
API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) · 강의

Nginx로 정적 콘텐츠 제공

정적 파일과 리소스를 효율적으로 제공하도록 Nginx를 설정하고 웹 애플리케이션의 성능을 최적화해 보세요.

Nginx로 정적 콘텐츠 제공은(는) CoddyKit의 무료 API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

What is Static Content?

When you visit a website, you often see a mix of content. Some of it changes frequently (like news feeds), and some stays the same.

Static content refers to files that are delivered to the user exactly as they are stored. They don't change based on who is viewing them or when.

  • HTML files: The structure of your web pages.
  • CSS files: Styles and visual presentation.
  • JavaScript files: Interactive elements and client-side logic.
  • Images: JPG, PNG, GIF, SVG.
  • Fonts: Web fonts like TTF, WOFF.

Nginx is incredibly efficient at serving these static files.

Setting the Root Directory

To tell Nginx where to find your static files, you use the root directive. This specifies the base directory for your website's content.

When Nginx receives a request, it appends the requested URI to the root path to locate the file.

http {
  server {
    listen 80;
    server_name example.com;

    root /var/www/mywebsite; # Nginx looks for files here
  }
}

Location Blocks for Paths

The location block is crucial for directing Nginx how to handle different types of requests based on their URL path.

You can define specific rules for requests to / (the root of your site), /images/, /css/, or any other path.

server {
  # ...
  root /var/www/mywebsite;

  location / {
    # Rules for requests to the root path
  }

  location /images/ {
    # Rules for requests to /images/...
  }
}

Serving a Basic HTML Page

Let's combine root and location / to serve a simple HTML page. Nginx will look for index.html by default if you include the index directive.

If a request comes for http://localhost/, Nginx will try to find /usr/share/nginx/html/index.html.

server {
  listen 80;
  server_name localhost;

  root /usr/share/nginx/html;

  location / {
    index index.html index.htm; # Try to serve index.html or index.htm
  }
}

Handling CSS and JavaScript

You don't always need separate location blocks for every file type. If the root directive is set correctly, Nginx will serve files like /css/style.css or /js/app.js directly.

However, you can use specific location blocks for fine-grained control, like applying specific caching rules to certain file types.

server {
  listen 80;
  server_name myapp.com;
  root /var/www/myapp/public;

  location / {
    index index.html;
  }

  location ~* \.(css|js)$ {
    # This matches .css or .js files
    # Could add specific headers or caching here
    add_header X-Content-Type-Options nosniff;
  }
}

The 'index' Directive

The index directive tells Nginx which files to look for when a request is made for a directory, not a specific file.

For example, if a user requests http://example.com/blog/, Nginx will first look for index.html inside the blog directory. If not found, it will try index.php, and so on.

server {
  # ...
  root /var/www/mywebsite;

  location / {
    index index.html index.php default.html; # Order matters!
  }
}

Understanding MIME Types

MIME (Multipurpose Internet Mail Extensions) types are labels that identify the type of content a file holds, like text/html for HTML documents or image/jpeg for JPEG images.

When Nginx serves a file, it sends a Content-Type HTTP header with the appropriate MIME type. This tells the browser how to interpret the file.

Nginx usually has a built-in mime.types file that maps file extensions to their correct MIME types, so you rarely need to configure this manually for common static files.

Caching for Performance

To optimize performance, Nginx can instruct browsers and proxy servers to cache static files. This means repeat visitors don't have to download the same files again.

The expires directive sets the Expires and Cache-Control HTTP headers, telling clients how long they can store a file before requesting it again.

server {
  # ...
  location ~* \.(jpg|jpeg|gif|png|css|js|ico)$ {
    expires 30d; # Cache these files for 30 days
    add_header Cache-Control "public, no-transform";
  }

  location ~* \.html$ {
    expires 1h; # HTML files might change more often, cache for 1 hour
    add_header Cache-Control "public, no-transform";
  }
}

Quick Check: Static Content

Consider the following Nginx configuration snippet:

server {
  listen 80;
  server_name example.com;
  root /var/www/myproject/public;

  location / {
    index index.html;
  }

  location /assets/ {
    expires 7d;
  }
}

If a request comes for http://example.com/assets/image.png, where will Nginx look for the image.png file?

Recap & Next Steps

Great job! You've learned the fundamentals of serving static content with Nginx.

  • The root directive defines the base directory for your files.
  • location blocks help you apply specific rules based on the request URL.
  • The index directive specifies default files for directory requests.
  • Nginx automatically handles MIME types for most files.
  • Using the expires directive improves performance by enabling browser caching.

Efficiently serving static content is a core strength of Nginx, making your web applications faster and more responsive. In upcoming lessons, we'll dive into more complex Nginx configurations!

자주 묻는 질문

“Nginx로 정적 콘텐츠 제공” 강의는 무료인가요?

네 — “Nginx로 정적 콘텐츠 제공” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) 강의 전체를 잠금 해제할 수 있습니다. API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) 강의에는 총 4개의 강의가 포함되어 있습니다.

“Nginx로 정적 콘텐츠 제공”에서 뭘 배우나요?

정적 파일과 리소스를 효율적으로 제공하도록 Nginx를 설정하고 웹 애플리케이션의 성능을 최적화해 보세요. 브라우저에서 직접 실행하는 실습 코드로 API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway)을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway)을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway)은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“Nginx로 정적 콘텐츠 제공” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. Nginx 설치 및 설정
  2. Nginx 기본 설정
  3. Nginx로 정적 콘텐츠 제공
  4. Nginx 위치 블록 및 요청 매칭
← API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway)(으)로 돌아가기