Serwowanie treści statycznych za pomocą Nginx
Skonfigurują Państwo Nginx tak, aby wydajnie serwował pliki statyczne i zasoby, optymalizując wydajność aplikacji WWW.
Serwowanie treści statycznych za pomocą Nginx to bezpłatna lekcja API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway), a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
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!
Często zadawane pytania
Czy lekcja „Serwowanie treści statycznych za pomocą Nginx” jest bezpłatna?
Tak — pełny tekst „Serwowanie treści statycznych za pomocą Nginx” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway), przejdź na CoddyKit PRO. Kurs API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) zawiera 4 lekcji w sumie.
Co nauczysz się w „Serwowanie treści statycznych za pomocą Nginx”?
Skonfigurują Państwo Nginx tak, aby wydajnie serwował pliki statyczne i zasoby, optymalizując wydajność aplikacji WWW. Ćwiczysz API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway)?
Nie wymagamy żadnego doświadczenia. API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Serwowanie treści statycznych za pomocą Nginx”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway)?
Tak. Każda lekcja API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Instalacja i konfiguracja Nginx
- Podstawowa konfiguracja Nginx
- Serwowanie treści statycznych za pomocą Nginx
- Bloki location Nginx i dopasowywanie żądań