Servir archivos estáticos en ASP.NET Core
En este artículo, aprenderás cómo proveer archivos estáticos en ASP.NET Core. ASP.NET Core tiene la capacidad de entregar archivos estáticos como HTML, CSS, imágenes y JavaScript directamente a los clientes, sin pasar por el Middleware de MVC.
Proveer archivos estáticos
HTML, CSS, imágenes, archivos JavaScript se denominan archivos estáticos. Hay dos formas de servir archivos estáticos en ASP.NET Core MVC. Directamente o a través de la acción del controlador. En este tutorial, veremos cómo hacerlo directamente.
Los archivos estáticos son aquellos archivos cuyo contenido no cambia dinámicamente cuando el usuario lo solicita. Por lo tanto, no tiene ningún sentido que la solicitud llegue hasta el Middleware de MVC, solo para servir estos archivos. ASP.NET Core proporciona un Middleware integrado solo para esta tarea.
Construyamos un proyecto para demostrar cómo servir los archivos estáticos
Crear un nuevo proyecto
Abre el Visual Studio 2022 y crea un nuevo proyecto ASP.NET Core usando la plantilla vacía. Nombra el proyecto como StaticFiles. Puede consultar el tutorial Introducción a ASP.NET Core para hacerlo.
Ejecuta el proyecto anterior para verificar que todo esté bien.
Middleware de archivos estáticos
Hablamos sobre el middleware y Request Pipeline en este tutorial.
Para servir un archivo estático, debemos agregar el middleware de archivos estáticos. Este Middleware está disponible en el ensamblado Microsoft.AspNetCore.StaticFiles. No es necesario instalar este ensamblado, ya que forma parte del metapaquete Microsoft.AspNetCore.All.
Podemos configurar ASP.NET Core para servir archivos estáticos usando el método de extensión UseStaticFiles.
Abre el archivo Program.cs y agrega la línea de código app.UseStaticFiles antes de app.run como se muestra a continuación.
var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();
app.MapGet("/", () => "Hello World!");
app.UseStaticFiles();
app.Run();
Ten en cuenta que
app.Runes un middleware de terminación. Entonces, si colocaUseStaticFilesdespués deapp.Run, no se ejecutará.
¿Dónde se encuentran los archivos estáticos?
Por convención, los archivos estáticos se almacenan en la carpeta raíz web (wwwroot) (<content-root>/wwwroot). Puede cambiar esto si lo deseas.
Raíz de contenido (Content root)
La raíz del contenido es la ruta base de la aplicación. Todos los archivos de la aplicación, como vistas, controladores, páginas, javascript o cualquier archivo que pertenezca a la aplicación.
La raíz del contenido es la misma que la ruta base de la aplicación para el ejecutable que aloja la aplicación.
Raíz web (Webroot)
La raíz web de una aplicación es el directorio dentro de la raíz de contenido desde donde se almacenan los recursos estáticos, como CSS, JavaScript y archivos de imagen.
Crear un archivo estático
Ahora, agreguemos un archivo estático test.html.
Seleccione la carpeta wwwroot, haz clic derecho y seleccione agregar -> agregar nuevo elemento
Elije la página HTML y nombre el archivo como test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p> Hola mundo de test.html </p>
</body>
</html>
Ahora, ejecuta el proyecto y verás “Hello World”
Ahora, agrega test.html a la URL y actualiza el sitio. Deberías ver "Hola mundo de test.html"
Archivos estáticos y seguridad
El middleware de archivos estáticos no comprueba si el usuario está autorizado para ver el archivo.
Si deseas que solo el usuario autorizado acceda al archivo, debes almacenar el archivo fuera de la carpeta wwwroot. Luego puedes servir el archivo usando la acción del controlador y devolviendo un FileResult.
UseStaticFile es un middleware de terminación
Los archivos estáticos son un Middleware de terminación. Si se encuentra el archivo, devolverá el archivo y finalizará la canalización de la solicitud.
Llamará al siguiente middleware, solo si no puede encontrar el recurso solicitado
Cómo configurar la ruta raíz del contenido y la ruta webroot
Como se mencionó en la sección anterior, los archivos estáticos generalmente se encuentran en la raíz web.
Necesitamos configurar la raíz del contenido para que sea el directorio actual. Esto ya está hecho para nosotros con el método CreateDefaultBuilder en el program.cs.
CreateDefaultBuilder es una clase auxiliar que hace parte del trabajo de configuración por nosotros. Puedes ver el código fuente desde aquí.
Establece la raíz del contenido en la ruta base de la aplicación invocando el método de extensión UseContentRoot
.UseContentRoot(Directory.GetCurrentDirectory())
Por convención, Webroot se establece en la carpeta wwwroot.
Puedes cambiarlo llamando al método de extensión UseWebroot.
Resumen
En el tutorial, analizamos cómo entregar archivos estáticos con ASP.NET Core.
Compartir:
Cargando...
Artículos recientes
-
-
Cómo crear una tabla utilizando DIVs y CSS
13 May 2014 -
Maquetar nuestra página con CSS y Divs
11 May 2022 -
¿Qué es la clase Startup.cs de ASP.NET Core?
08 November 2022
