Compartir a través de


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

Con Visual Studio, es muy fácil compilar, depurar y ejecutar aplicaciones ASP.NET Core en contenedores, incluidas aquellas con JavaScript en el lado cliente como una aplicación de página única (SPA) de React.js y publicarlas en Azure Container Registry, Docker Hub, Azure App Service o en su propio registro de contenedor. En este artículo, publicaremos en Azure Container Registry.

Requisitos previos

Instalación y configuración

Para instalar Docker, primero revise la información de Docker Desktop for Windows: What to know before you install (Docker Desktop para Windows: información previa a la instalación). Después, instale Docker Desktop.

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

  1. Cree un nuevo proyecto con la plantilla ASP.NET Core con React.js.

    Captura de pantalla de la creación de un nuevo proyecto de React.js.

  2. En la pantalla Información adicional, no puede seleccionar Habilitar compatibilidad con Docker, pero no se preocupe, puede agregar esa compatibilidad más adelante.

    Captura de pantalla de la creación de un nuevo proyecto de React.js: pantalla Información adicional.

  3. Haga clic derecho en el nodo del proyecto y elija Agregar>Compatibilidad con Docker para agregar un archivo Dockerfile al proyecto.

    Captura de pantalla del elemento de menú Agregar compatibilidad con Docker.

  4. 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 de Dockerfile (contenedores de Linux)

Se agrega al proyecto un Dockerfile, la receta para crear una imagen de Docker final. 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 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. Uno se utiliza para el tráfico HTTP, mientras que el otro se emplea 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 versión posterior, el Dockerfile predeterminado que crea Visual Studio 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:

  1. En Dockerfile, elimine la línea USER app.
  2. Cambie los puertos que están expuestos en la primera sección del Dockerfile para que el puerto 80 sea para solicitudes HTTP y (si eligió admitir HTTPS cuando creó el proyecto) 443 para solicitudes HTTPS.
  3. Edite launchSettings.json para cambiar las referencias de puerto 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:

  1. Agregue las líneas siguientes para instalar curl, Node.js 14.x y determinadas bibliotecas de Node requeridas en el contenedor. No olvide agregar estas dos 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 a 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/core/aspnet e incluye instrucciones para modificar la imagen base mediante la creación del proyecto y su incorporación al contenedor.

Modificación de Dockerfile (contenedores de Windows)

Abra el archivo de proyecto; para ello, haga 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 el 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 el Modo rápido, consulte Personalizar contenedores de Docker en Visual Studio.

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

  1. Agregue # escape=` a la primera línea de Dockerfile

  2. Agregue las líneas siguientes delante 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
    
  3. Agregue la línea siguiente delante y después de FROM ... build

    COPY --from=downloadnodejs C:\nodejs\ C:\Windows\system32\
    
  4. El archivo 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"]
    
  5. Actualice el archivo .dockerignore quitando el **/bin.

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

  1. Cree un nuevo proyecto con la plantilla React y ASP.NET Core.

    Captura de pantalla de la creación de un nuevo proyecto de React y ASP.NET Core.

  2. 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.

    Captura de pantalla de la creación de un nuevo proyecto de React y ASP.NET Core: pantalla Información adicional.

    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 cliente React JavaScript y otro para el código de servidor ASP.NET Core C#.

  3. 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.

    Captura de pantalla del elemento de menú Agregar compatibilidad con Docker.

  4. Seleccione el tipo de contenedor.

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

  1. Cree un nuevo proyecto con la plantilla ASP.NET Core con React.js.

    Captura de pantalla de la creación de un nuevo proyecto de React.js.

  2. En la pantalla Información adicional, no puede seleccionar Habilitar compatibilidad con Docker, pero no se preocupe, puede agregar esa compatibilidad más adelante.

    Captura de pantalla de la creación de un nuevo proyecto de React.js: pantalla Información adicional.

  3. Haga clic derecho en el nodo del proyecto y elija Agregar>Compatibilidad con Docker para agregar un archivo Dockerfile al proyecto.

    Captura de pantalla del elemento de menú Agregar compatibilidad con Docker.

  4. Seleccione el tipo de contenedor.

Depurar

Con Visual Studio 2022 versión 17.9 o posterior y la plantilla 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 de depuración, pero debe configurar el puerto correcto para que el proxy de aplicación de página única (SPA) lo use para acceder al servidor Core ASP.NET que se ejecuta en el contenedor. Puede obtener el puerto de host desde la ventana Contenedores de Visual Studio y establecerlo en el proyecto de React, tal como se describe en Creación de 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+Entrar), vaya a la pestaña Depurar y haga clic en el vínculo Abrir interfaz de usuario de 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 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 el equipo host, pero el código del 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.

  1. Compile el proyecto, si aún no está compilado.

  2. 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íamos ver algo parecido a lo siguiente:

    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. Deberá proporcionarla en un perfil de inicio de depuración, que se almacena en el archivo launchSettings.json.

  3. Abra la lista desplegable que contiene perfiles de depuración (junto al icono de triángulo verde o el botón Iniciar) y elija Propiedades de depuración de {ProjectName} y, luego, seleccione el perfil de Docker.

  4. 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

  5. Establezca la dirección URL en https://localhost:{proxy-port}, donde {proxy-port} es el puerto del servidor proxy (del paso 1).

    Captura de pantalla de la configuración del perfil de inicio de depuración para la depuración de cliente.

    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. Encuentre el archivo launchSettings.json en el Explorador de soluciones en la sección Propiedades.

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

    "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.

  7. Abra el archivo ClientApp/src/setupProxy.js y cambie la línea que establece el destino para usar la dirección y el puerto 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.

  8. Inicie la aplicación con depuración (F5).

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

    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.

  9. 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.

    Captura de pantalla que muestra JavaScript del lado cliente de depuración.

  10. 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 anexar /weatherforecast al localhost base y a la dirección URL del puerto para activar ese código.

    Captura de pantalla que muestra la depuración del código de ASP.NET Core del lado servidor.

  11. Si el puerto del contenedor cambia, lo que puede ocurrir si realiza un cambio significativo, como actualizar launchSettings.json o actualizar el perfil de inicio de depuración en el IDE, deberá actualizar el puerto en setupProxy.js y reiniciar también el proxy. Finalice el proxy actual (Ctrl+C en la ventana de comandos donde se está ejecutando) 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 y empiece a depurar la aplicación. Es posible que vea un mensaje que pregunte sobre cómo confiar en un certificado; elija la opción de confiar en el certificado para continuar. La primera vez que compila, 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 con 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 se abra la ventana, acóplela en la parte inferior bajo el panel del editor.

La ventana 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 sistema del shell) dentro del contenedor, adjuntar el depurador o eliminar contenedores no usados. 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, busque la del 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 de Liberar.

Publicar 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.

  1. Cambie la lista desplegable de configuración a Versión y compile la aplicación.

  2. Haga clic con el botón derecho en el Explorador de soluciones y elija Publicar.

  3. En el cuadro de diálogo de destino de publicación, seleccione Container Registry para Docker.

    Elija Container Registry para Docker.

  4. Después, elija Azure Container Registry.

    Elija Azure Container Registry.

  5. Elija Crear una instancia de Azure Container Registry.

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

    Parámetro Valor sugerido Descripción
    Prefijo de DNS Nombre único globalmente Nombre que identifica de forma única el nuevo registro de contenedor.
    Suscripción Elija una 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 grupo de recursos nuevo.
    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 cercana a usted o a otros servicios usen el registro de contenedor.

    Captura de pantalla del cuadro de diálogo Crear Azure Container Registry de Visual Studio.

  7. Seleccione Crear y, después, Finalizar.

    Captura de pantalla que muestra Seleccionar o crear una nueva instancia de Azure Container Registry.

    Una vez finalizado el proceso de publicación, puede revisar la configuración de publicación y editarla, si es necesario, o bien volver a publicar la imagen con el botón Publicar.

    Captura de pantalla que muestra la publicación correcta.

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

  1. Cambie la lista desplegable de configuración a Versión y compile la aplicación.

  2. Haga clic con el botón derecho en el Explorador de soluciones y elija Publicar.

  3. En el cuadro de diálogo de destino de publicación, seleccione Container Registry para Docker.

    Captura de pantalla que muestra Elegir Docker Container Registry.

  4. Después, elija Azure Container Registry.

    Captura de pantalla que muestra Elija Azure Container Registry.

  5. Elija Crear una instancia de Azure Container Registry.

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

    Parámetro Valor sugerido Descripción
    Prefijo de DNS Nombre único globalmente Nombre que identifica de forma única el nuevo registro de contenedor.
    Suscripción Elija una 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 grupo de recursos nuevo.
    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 cercana a usted o a otros servicios usen el registro de contenedor.

    Captura de pantalla del cuadro de diálogo Crear Azure Container Registry de Visual Studio.

  7. Seleccione Crear y, después, Finalizar.

    Captura de pantalla que muestra Seleccionar o crear una nueva instancia de Azure Container Registry.

    Una vez finalizado el proceso de publicación, puede revisar la configuración de publicación y editarla, si es necesario, o bien volver a publicar la imagen con el botón Publicar.

    Captura de pantalla que muestra la publicación correcta

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

Pasos siguientes

Ahora puede extraer el contenedor del registro a cualquier host capaz de ejecutar imágenes de Docker, por ejemplo Azure Container Instances.

Recursos adicionales