Servire contenuti statici con Nginx
Configuri Nginx per servire in modo efficiente file e risorse statiche, ottimizzando le prestazioni delle applicazioni web.
Servire contenuti statici con Nginx è una lezione API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway), e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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
rootdirective defines the base directory for your files. locationblocks help you apply specific rules based on the request URL.- The
indexdirective specifies default files for directory requests. - Nginx automatically handles MIME types for most files.
- Using the
expiresdirective 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!
Domande Frequenti
La lezione «Servire contenuti statici con Nginx» è gratuita?
Sì — il testo completo di «Servire contenuti statici con Nginx» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway), passa a CoddyKit PRO. Il corso API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) include 4 lezioni in totale.
Cosa imparerò in «Servire contenuti statici con Nginx»?
Configuri Nginx per servire in modo efficiente file e risorse statiche, ottimizzando le prestazioni delle applicazioni web. Eserciti API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway)?
Non è richiesta alcuna esperienza precedente. API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Servire contenuti statici con Nginx»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway)?
Sì. Ogni lezione API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Installazione e configurazione di Nginx
- Configurazione di base di Nginx
- Servire contenuti statici con Nginx
- Blocchi location di Nginx e corrispondenza delle richieste