Disponibilização de Conteúdo Estático com Nginx
Configure o Nginx para disponibilizar arquivos e recursos estáticos com eficiência, otimizando o desempenho de aplicações web.
Disponibilização de Conteúdo Estático com Nginx é uma aula grátis de API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway), e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
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!
Perguntas Frequentes
A aula “Disponibilização de Conteúdo Estático com Nginx” é grátis?
Sim — o texto completo de “Disponibilização de Conteúdo Estático com Nginx” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway), atualize para CoddyKit PRO. O curso de API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) inclui 4 aulas no total.
O que vou aprender em “Disponibilização de Conteúdo Estático com Nginx”?
Configure o Nginx para disponibilizar arquivos e recursos estáticos com eficiência, otimizando o desempenho de aplicações web. Você pratica API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway)?
Nenhuma experiência prévia é necessária. API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Disponibilização de Conteúdo Estático com Nginx”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway)?
Sim. Cada aula de API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Instalação e Configuração do Nginx
- Configuração Básica do Nginx
- Disponibilização de Conteúdo Estático com Nginx
- Blocos de localização e correspondência de solicitações no Nginx