Hacer deploy de una API de .NET con frontend Angular en el mismo dominio 

En esta publicación aprenderemos a realizar un despliegue de una API creada en .NET junto con el frontend creado en Angular, todo en el mismo dominio.

Cuando se desarrolla una API y se despliega, se asigna en un dominio como por ejemplo www.api-web.com, las cual es la dirección a la que el frontend se dirige a solicitar información. El frontend por su parte, en este caso Angular, se despliega en un dominio diferente al del backend, siguiendo con el ejemplo sería www.web.com lo cual es incómodo cuando no se tiene el presupuesto para adquirir 2 dominios. En este post vamos a aprender como hacer el despliegue en un mismo dominio.

Este post se basa en el post hecho en el siguiente link, pero actualizado a .NET 6, ya que se eliminó el archivo Startup.cs entonces se detallaran los cambios que se realizarán.

• Configuración en el archivo Program.cs.

Se agregan el código que va de la línea 19 hasta la 29. Esto hace que se utilicen los archivos guardados en la carpeta wwwroot. Esto porque será importante para más adelante.

Código:

app.Use(async (context, next) =>
{
 await next();
 if (context.Response.StatusCode == 404 && !System.IO.Path.HasExtension(context.Request.Path.Value))
 {
  context.Request.Path = "/index.html";
  await next();
 }
});
app.UseDefaultFiles();
app.UseStaticFiles();


• Cambiar la carpeta de salida en Angular donde se crea la build del código.

Este paso es opcional, por un tema de comodidad, ya que se puede hacer build del código con la salida por defecto de Angular el cual se explica más adelante.

Se encuentra en el archivo angular.json en el apartado de options llamado outputPath, se debe colocar la dirección de la carpeta donde tienes el proyecto de .NET con el nombre wwwroot

Si no quieres hacer este paso, lo que debes hacer es, cuando creas la build del proyecto, vas a la carpeta le cambias el nombre por wwwroot, la copias y la pegas en la carpeta donde este el proyecto de .NET.

• El proyecto .NET debe quedar de la siguiente manera.

Con esto hecho, puedes correr tu API en Angular como lo haces normalmente y abrira el proyecto tal y como lo creaste en Angular