Inicio rápido: Uso de Docker con una aplicación de página única de React en Visual Studio

Artículo
02/07/2025

Con Visual Studio, puede compilar, depurar y ejecutar fácilmente aplicaciones ASP.NET core en contenedores, incluidas aquellas con JavaScript del lado cliente, como React.js aplicación de página única (SPA) y publicarlas en Azure Container Registry, Docker Hub, Azure App Service o su propio Registro de contenedor. En este artículo, publicamos en Azure Container Registry.

Prerrequisitos

Docker Desktop
Visual Studio 2019 con las cargas de trabajo Desarrollo web, Azure Tools o Desarrollo multiplataforma de .NET Core instaladas
Herramientas de desarrollo de .NET Core 3.1 destinadas al desarrollo con .NET Core 3.1.
Para publicar en Azure Container Registry, se necesita una suscripción de Azure. Regístrese para obtener una evaluación gratuita.
Node.js
Para los contenedores de Windows, Windows 10 versión 1809 o posterior, para usar las imágenes de Docker a las que se hace referencia en este artículo.

Docker Desktop
Visual Studio 2022 con las cargas de trabajo Desarrollo web, Azure Tools o Desarrollo multiplataforma de .NET Core instaladas
Para publicar en Azure Container Registry, se requiere una suscripción de Azure. Regístrese para obtener una evaluación gratuita.
Node.js
Para los contenedores de Windows, Windows 10 versión 1809 o posterior, para usar las imágenes de Docker a las que se hace referencia en este artículo.

Instalación y configuración

Para la instalación de Docker, revise primero la información de Docker Desktop para Windows: Qué saber antes de instalar. A continuación, instale Docker Desktop.

Creación de un proyecto y adición de compatibilidad con Docker

Cree un nuevo proyecto con la plantilla ASP.NET Core con React.js.
En la pantalla Información adicional, no puede seleccionar Habilitar compatibilidad con Docker, pero no se preocupe, puede agregar esa compatibilidad más adelante.
Haga clic con el botón derecho en el nodo del proyecto y elija Agregar>compatibilidad con Docker para agregar un dockerfile al proyecto.
Seleccione el tipo de contenedor.

El siguiente paso es diferente en función de si usa contenedores de Linux o contenedores de Windows.

Nota

Si usa las plantillas de proyecto más recientes en Visual Studio 2022 o versiones posteriores, no es necesario modificar el Dockerfile.

Modificación del Dockerfile (contenedores de Linux)

Se crea un Dockerfile, la receta para crear una imagen final de Docker, en el proyecto. Vea Dockerfile reference (Referencia de Dockerfile) para obtener una descripción de los comandos que contiene.

El Dockerfile predeterminado usa una imagen base para ejecutar el contenedor, pero cuando también desea poder ejecutar una aplicación de Node.js en él, debe instalar Node.js, lo que significa agregar algunos comandos de instalación en un par de lugares en el Dockerfile. Los comandos de instalación requieren permisos elevados, ya que los cambios afectan a los archivos y carpetas del sistema con privilegios del contenedor.

Si la casilla Configurar para HTTPS del cuadro de diálogo del nuevo proyecto está marcada, Dockerfile expondrá dos puertos. Se usa un puerto para el tráfico HTTP; el otro puerto se usa para HTTPS. Si la casilla no está activada, se expone un único puerto (80) para el tráfico HTTP.

Si tiene como destino .NET 8 o posterior, el Dockerfile predeterminado que Visual Studio crea usa la cuenta de usuario normal (busque la línea USER app), pero esa cuenta no tiene los permisos elevados necesarios para instalar Node.js. Para tener en cuenta esta situación, haga lo siguiente:

En dockerfile, elimine la línea USER app.
Cambiar los puertos que se exponen en la primera sección del Dockerfile al puerto 80 es para las solicitudes HTTP y (si decide admitir HTTPS al crear el proyecto) 443 para las solicitudes HTTPS.
Edite launchSettings.json para cambiar las referencias de puerto allí a 80 y 443; reemplace 8080 por 80 para HTTP y 8081 por 443 para HTTPS.

Para todas las versiones de .NET, siga estos pasos para actualizar el Dockerfile para instalar Node.js:

Agregue las líneas siguientes para instalar curl, Node.js 14.x y ciertas bibliotecas de Node necesarias en el contenedor. Asegúrese de agregar estas líneas en la primera sección para agregar la instalación del administrador de paquetes de Node npm.exe a la imagen base, así como en la sección build.

RUN apt-get update
RUN apt-get install -y curl
RUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs

El archivo Dockerfile debería tener ahora un aspecto similar al siguiente:

#See https://aka.ms/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images for faster debugging.

FROM mcr.microsoft.com/dotnet/aspnet:3.1 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443
RUN apt-get update
RUN apt-get install -y curl
RUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs

FROM mcr.microsoft.com/dotnet/sdk:3.1 AS build
RUN apt-get update
RUN apt-get install -y curl
RUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs
WORKDIR /src
COPY ["ProjectSPA1/ProjectSPA1.csproj", "ProjectSPA1/"]
RUN dotnet restore "ProjectSPA1/ProjectSPA1.csproj"
COPY . .
WORKDIR "/src/ProjectSPA1"
RUN dotnet build "ProjectSPA1.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "ProjectSPA1.csproj" -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "ProjectSPA1.dll"]

El elemento Dockerfile anterior se basa en la imagen mcr.microsoft.com/dotnet/aspnet e incluye instrucciones para modificar la imagen base mediante la creación del proyecto y su incorporación al contenedor.

Modificación del Dockerfile (contenedores de Windows)

Abra el archivo del proyecto haciendo doble clic en el nodo del proyecto y actualice el archivo de proyecto (*.csproj) agregando la siguiente propiedad como elemento secundario del elemento <PropertyGroup>:

 <DockerfileFastModeStage>base</DockerfileFastModeStage>

Nota

El cambio a DockerfileFastModeStage es necesario, ya que el Dockerfile aquí agrega una fase al principio del Dockerfile. Para optimizar el rendimiento, Visual Studio usa modo rápido, pero solo funciona si se usa la fase correcta. El valor predeterminado es la primera fase del Dockerfile, que en este ejemplo, se cambia de base a otra cosa para descargar Node.js. Para obtener más información sobre modo rápido, consulte Personalizar contenedores de Docker en Visual Studio.

Actualice el Dockerfile agregando las líneas siguientes. Estas líneas copiarán Node y "npm" en el contenedor.

Agregar # escape=` a la primera línea del Dockerfile

Agregue las líneas siguientes antes de FROM ... base

FROM mcr.microsoft.com/powershell AS downloadnodejs
ENV NODE_VERSION=14.16.0
SHELL ["pwsh", "-Command", "$ErrorActionPreference = 'Stop';$ProgressPreference='silentlyContinue';"]
RUN Invoke-WebRequest -OutFile nodejs.zip -UseBasicParsing "https://nodejs.org/dist/v$($env:NODE_VERSION)/node-v$($env:NODE_VERSION)-win-x64.zip"; `
    Expand-Archive nodejs.zip -DestinationPath C:\; `
    Rename-Item "C:\node-v$($env:NODE_VERSION)-win-x64" c:\nodejs

Agregue la siguiente línea antes y después de FROM ... build
```
COPY --from=downloadnodejs C:\nodejs\ C:\Windows\system32\
```

El Dockerfile completo debería tener ahora un aspecto similar al siguiente:

# escape=`
#Depending on the operating system of the host machines(s) that will build or run the containers, the image specified in the FROM statement may need to be changed.
#For more information, please see https://aka.ms/containercompat
FROM mcr.microsoft.com/powershell AS downloadnodejs
ENV NODE_VERSION=14.16.0
SHELL ["pwsh", "-Command", "$ErrorActionPreference = 'Stop';$ProgressPreference='silentlyContinue';"]
RUN Invoke-WebRequest -OutFile nodejs.zip -UseBasicParsing "https://nodejs.org/dist/v$($env:NODE_VERSION)/node-v$($env:NODE_VERSION)-win-x64.zip"; \
    Expand-Archive nodejs.zip -DestinationPath C:\; \
    Rename-Item "C:\node-v$($env:NODE_VERSION)-win-x64" c:\nodejs

FROM mcr.microsoft.com/dotnet/core/aspnet:3.1 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443
COPY --from=downloadnodejs C:\\nodejs C:\\Windows\\system32

FROM mcr.microsoft.com/dotnet/core/sdk:3.1 AS build
COPY --from=downloadnodejs C:\\nodejs C:\\Windows\\system32
WORKDIR /src
COPY ["ProjectSPA1/ProjectSPA1.csproj", "ProjectSPA1/"]
RUN dotnet restore "ProjectSPA1/ProjectSPA1.csproj"
COPY . .
WORKDIR "/src/ProjectSPA1"
RUN dotnet build "ProjectSPA1.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "ProjectSPA1.csproj" -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "ProjectSPA1.dll"]

Actualice el archivo .dockerignore quitando el **/bin.

Siga estos pasos si usa Visual Studio 2022, versión 17.8 o posterior:

Cree un nuevo proyecto con la plantilla React y ASP.NET Core.
En la pantalla Información adicional, seleccione Habilitar compatibilidad con contenedores. Asegúrese de seleccionar la opción Dockerfile, ya que deberá realizar cambios manualmente en ese archivo.

Nota

En algunas versiones de Visual Studio 2022, esta opción no está habilitada, pero puede agregar esa compatibilidad más adelante.

Visual Studio crea dos proyectos: uno para el código de cliente de JavaScript de React y otro para el código de servidor de C# de ASP.NET Core.
Si no ha agregado compatibilidad con contenedores de Docker durante la creación del proyecto, haga clic con el botón derecho en el nodo del proyecto de servidor y elija Agregar>compatibilidad con Docker y asegúrese de elegir la opción Dockerfile para crear un Dockerfile.
Seleccione el tipo de contenedor.

Siga estos pasos para Visual Studio 2022 versión 17.0 a 17.7:

Cree un nuevo proyecto con la plantilla ASP.NET Core con React.js.
En la pantalla Información adicional, usted no puede seleccionar Habilitar soporte para Docker, pero no se preocupe, puede agregar ese soporte más adelante.
Haga clic con el botón derecho en el nodo del proyecto y elija Agregar>compatibilidad con Docker para agregar un dockerfile al proyecto.
Seleccione el tipo de contenedor.

Depuración

Con Visual Studio 2022 versión 17.9 o posterior y la plantilla de React y ASP.NET Core que usa vite.js, los proyectos ya están configurados para iniciar los proyectos de cliente y servidor con compatibilidad con la depuración, pero debe configurar el puerto adecuado para que el proxy de aplicación de una sola página (SPA) pueda acceder al servidor ASP.NET Core que se ejecuta en el contenedor. Puede obtener el puerto del host desde la ventana Contenedores en Visual Studio y establecerlo en el proyecto React tal y como se describe en Crear una aplicación React - Docker.

También puede deshabilitar el inicio en el explorador para el servidor, que está configurado para abrirse con Swagger, que no es necesario para este escenario. Para deshabilitar el inicio del explorador, abra las Propiedades (Alt+Enter), vaya a la pestaña Depurar y haga clic en el vínculo Abrir perfiles de inicio de depuración, y desactive la casilla Iniciar explorador.

Si usa una versión anterior de Visual Studio 2022, siga leyendo para configurar la depuración con el servidor proxy de una aplicación de página única (SPA).

El proyecto usa el proxy SPA durante la depuración. Consulte Plantillas de aplicación de página única (SPA) mejoradas. Al depurar, el cliente de JavaScript se ejecuta en la máquina host, pero el código de servidor ASP.NET Core se ejecuta en el contenedor. Cuando se publica, el proxy no se ejecuta y el código de cliente se ejecuta en el mismo servidor que el código de ASP.NET Core. Ya tiene un perfil de depuración *Docker que puede usar para depurar el código del servidor. Para depurar el código de cliente de JavaScript, puede crear un perfil de depuración adicional. También tendrá que iniciar el proxy manualmente desde un símbolo del sistema al depurar JavaScript. Puede dejarlo en ejecución a través de varias sesiones de depuración.

Compile el proyecto, si aún no está compilado.
Abra un símbolo del sistema de desarrollador de Visual Studio, vaya a la carpeta ClientApp del proyecto y ejecute el comando npm run start. Debería ver algo parecido a esto:
```
Compiled successfully!

You can now view project3_spa in the browser.

  Local:            https://localhost:44407
  On Your Network:  https://192.168.1.5:44407

Note that the development build isn't optimized.
To create a production build, use npm run build.

webpack compiled successfully
```
Nota

Anote la dirección URL local. Debe proporcionar esto en un perfil de inicio de depuración, que se almacena en el archivo launchSettings.json.
Abra la lista desplegable que contiene perfiles de depuración (junto al icono de triángulo verde o botón Iniciar) y elija {ProjectName} Propiedades de depuracióny elija el perfil Docker.
Compruebe la sección variables de entorno y agregue las siguientes variables de entorno si aún no están presentes:

ASPNETCORE_ENVIRONMENT=Development,ASPNETCORE_HOSTINGSTARTUPASSEMBLIES=Microsoft.AspNetCore.SpaProxy
Establezca la dirección URL de en https://localhost:{proxy-port} donde {proxy-port} es el puerto del servidor proxy (del paso 1).

Esta acción cambia la entrada de Docker en el archivo launchSettings.json e inicia la dirección URL correcta para el proxy local que se ejecuta en el host. Busque el archivo launchSettings.json en Explorador de soluciones bajo Propiedades.

Debería ver algo parecido al código siguiente:

"profiles": {
   "Docker": {
      "commandName": "Docker",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development",
        "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
      },
      "launchUrl": "https://localhost:44407",
      "useSSL": true
   }
}

Importante

No establezca la opción de configuración de inicio publishAllPorts en true si usa un proxy. Esa opción publica todos los puertos expuestos en un puerto aleatorio, que no funcionará cuando establezca un puerto específico en el proxy SPA.

Abra el archivo ClientApp/src/setupProxy.js y cambie la línea que establece el destino para usar la dirección y el puerto de localhost en el contenedor. Puede encontrar el puerto en la pestaña Puertos de la ventana Contenedores.
```
const target =  'https://localhost:{container-port}';
```
Si usa HTTPS, asegúrese de elegir el puerto adecuado para HTTPS, que es 443 en este tutorial.
Inicie la aplicación con depuración (F5).

Si recibe un error de compilación al intentar escribir los ensamblados de salida, es posible que tenga que detener un contenedor en ejecución previamente para desbloquear los archivos.
Compruebe que puede alcanzar un punto de interrupción en el código de JavaScript del lado cliente estableciendo un punto de interrupción en ClientApp/src/components/Counter.js en la función incrementCounter y, a continuación, intente alcanzar el punto de interrupción haciendo clic en el botón Incrementar de la página Contadores.
A continuación, intente alcanzar un punto de interrupción en el código de ASP.NET Core del lado servidor. Establezca un punto de interrupción en WeatherController.cs en el método Get e intente agregar /weatherforecast a la base localhost y al URL del puerto para activar ese código.
Si cambia el puerto de un contenedor, lo cual puede suceder si realiza un cambio significativo, como actualizar launchSettings.json o el perfil de depuración en el IDE, debe actualizar el puerto en setupProxy.js y reiniciar el proxy. Finalice el proxy actual (Ctrl+C en la ventana de comandos donde se ejecuta) y, a continuación, reinícielo con el mismo comando npm run start.

Seleccione Docker en la lista desplegable de depuración de la barra de herramientas e inicie la depuración de la aplicación. Es posible que vea un mensaje con un mensaje sobre cómo confiar en un certificado; elija confiar en el certificado para continuar. La primera vez que compile, Docker descarga las imágenes base, por lo que puede tardar un poco más.

La opción Herramientas de contenedor de la ventana Salida muestra las acciones que están teniendo lugar. Debería ver los pasos de instalación asociados a npm.exe.

El explorador muestra la página principal de la aplicación.

Captura de pantalla de la aplicación en ejecución.

Ventana Contenedores

Abra la ventana de herramientas Contenedores. Puede encontrarla en el menú en Ver>Otras ventanas>Contenedores, o presione Ctrl+Q y empiece a escribir containers en el cuadro de búsqueda. A continuación, elija la ventana Contenedores en los resultados. Cuando aparezca la ventana, acopála en la parte inferior del panel del editor.

La Ventana de Contenedores muestra los contenedores en ejecución y le permite ver información sobre ellos. Puede ver las variables de entorno, las etiquetas, los puertos, los volúmenes, el sistema de archivos y los registros. Los botones de la barra de herramientas permiten crear un terminal (símbolo del shell) dentro del contenedor, adjuntar el depurador o eliminar contenedores sin usar. Consulte Uso de la ventana Contenedores.

captura de pantalla de la ventana Contenedores.

Haga clic en la pestaña Archivos y expanda la carpeta app para ver los archivos de aplicación publicados.

También puede ver las imágenes e inspeccionar información sobre ellas. Elija la pestaña Imágenes , ubique la correspondiente a su proyecto y, a continuación, elija la pestaña Detalles para ver un archivo json que contiene información sobre una imagen.

captura de pantalla de la ventana Contenedores que muestra imágenes y detalles.

Nota

La imagen dev no contiene los archivos binarios de la aplicación ni otro contenido, ya que las configuraciones de Depurar usan el montaje de volumen para proporcionar la experiencia de depuración y edición iterativa. Para crear una imagen de producción que contenga todo el contenido, use la configuración Release .

Publicación de imágenes de Docker

Una vez completado el ciclo de desarrollo y depuración de la aplicación, puede crear una imagen de producción de la aplicación.

Cambie la lista desplegable de configuración a release y compile la aplicación.
Haga clic con el botón derecho en el Explorador de soluciones y elija Publicar.
En el cuadro de diálogo de destino de publicación, seleccione Container Registry para Docker.
Después, elija Azure Container Registry.
Elija Crear un nuevo Azure Container Registry.

Rellene los valores deseados en la pantalla Crear una nueva instancia de Azure Container Registry.

Ajuste	Valor sugerido	Descripción
Prefijo de DNS	Nombre único global	Nombre que identifica de forma única el registro de contenedor.
Suscripción	Elección de la suscripción	La suscripción de Azure que se va a usar.
Grupo de recursos	myResourceGroup	Nombre del grupo de recursos en el que se va a crear el registro de contenedor. Elija Nuevo para crear un nuevo grupo de recursos.
SKU	Estándar	Nivel de servicio del registro de contenedor
Ubicación del registro	Una ubicación cercana a usted	Elija una ubicación en una región de cerca de usted o cerca de otros servicios que usen el registro de contenedor.

Captura de pantalla del cuadro de diálogo de creación de Azure Container Registry de Visual Studio.

Seleccione Creary, a continuación, seleccione Finalizar.

Cuando finalice el proceso de publicación, puede revisar la configuración de publicación y editarlas, cuando sea necesario, o volver a publicar la imagen con el botón Publicar .

Para volver a empezar con el cuadro de diálogo Publicar, elimine el perfil de publicación utilizando el vínculo Eliminar de esta página y, a continuación, vuelva a seleccionar Publicar.

Cambie la lista desplegable de configuración a release y compile la aplicación.
Haga clic con el botón derecho en el Explorador de soluciones y elija Publicar.
En el cuadro de diálogo de destino de publicación, seleccione Container Registry para Docker.
Después, elija Azure Container Registry.
Elija Crear un nuevo Azure Container Registry.

Rellene los valores deseados en la pantalla Crear una nueva instancia de Azure Container Registry.

Ajuste	Valor sugerido	Descripción
Prefijo de DNS	Nombre único global	Nombre que identifica de forma única el registro de contenedor.
Suscripción	Elección de la suscripción	La suscripción de Azure que se va a usar.
Grupo de Recursos	myResourceGroup	Nombre del grupo de recursos en el que se va a crear el registro de contenedor. Elija Nuevo para crear un nuevo grupo de recursos.
SKU	Estándar	Nivel de servicio del registro de contenedor
Ubicación del Registro	Una ubicación cercana a usted	Elija una ubicación en una región de cerca de usted o cerca de otros servicios que usen el registro de contenedor.

Captura de pantalla del cuadro de diálogo de Visual Studio para crear un Azure Container Registry.

Seleccione Creary, a continuación, seleccione Finalizar.

Cuando finalice el proceso de publicación, puede revisar la configuración de publicación y editarlas, cuando sea necesario, o volver a publicar la imagen con el botón Publicar .

captura de pantalla que muestra la publicación exitosa

Para empezar de nuevo usando el cuadro de diálogo Publicar, elimine el perfil de publicación mediante el vínculo Eliminar en esta página, y luego elija de nuevo Publicar.