Serving Static Content with Nginx

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.

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.

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.

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.

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.

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.

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.

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.

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?

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!