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

Nginx ile Statik İçerik Sunma

Statik dosyaları ve varlıkları verimli bir şekilde sunacak, web uygulamalarının performansını iyileştirecek şekilde Nginx'i yapılandırın.

Nginx ile Statik İçerik Sunma, CoddyKit'te ücretsiz bir API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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!

Sıkça Sorulan Sorular

“Nginx ile Statik İçerik Sunma” dersi ücretsiz mi?

Evet — “Nginx ile Statik İçerik Sunma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) kursu toplamda 4 dersten oluşur.

“Nginx ile Statik İçerik Sunma” dersinde ne öğreneceğim?

Statik dosyaları ve varlıkları verimli bir şekilde sunacak, web uygulamalarının performansını iyileştirecek şekilde Nginx'i yapılandırın. API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway), başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Nginx ile Statik İçerik Sunma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) dersinde kod yazıp çalıştırabilir miyim?

Evet. Her API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Nginx Kurulumu ve Ayarları
  2. Temel Nginx Yapılandırması
  3. Nginx ile Statik İçerik Sunma
  4. Nginx Konum Blokları ve İstek Eşleştirme
← API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) Sayfasına Dön