Início Rápido: Usar o Docker com um aplicativo de página única do React no Visual Studio

Com o Visual Studio, você pode facilmente criar, depurar e executar aplicativos do ASP.NET Core em contêineres, incluindo aqueles com JavaScript do lado do cliente, como o aplicativo de página única do React.js, e publicá-los no Registro de Contêiner do Azure, no Docker Hub, no Serviço de Aplicativo do Azure ou no seu próprio Registro de contêiner. Neste artigo, publicamos no Registro de Contêiner do Azure.

Pré-requisitos

• Docker Desktop
• Visual Studio 2022 com Desenvolvimento para a Web, a carga de trabalho de Ferramentas do Azure e/ou Desenvolvimento multiplataforma do .NET Core instalados
• Para publicar no Registro de Contêiner do Azure, uma assinatura do Azure. Inscreva-se em uma avaliação gratuita.
• Node.js
• Para contêineres do Windows, Windows 10 versão 1809 ou posterior, para usar as imagens do Docker referenciadas neste artigo.

Instalação e configuração

Para a instalação do Docker, primeiro examine as informações em Docker Desktop for Windows: What to know before you install (Docker para Windows: o que saber antes de instalar). Em seguida, instale o Docker Desktop.

Criar um projeto e adicionar suporte ao Docker

Siga estas etapas se você estiver usando o Visual Studio 2022 versão 17.8 ou posterior:

1. Crie um projeto usando o modelo React e ASP.NET Core.

   

2. Na tela Informações adicionais, não é possível selecionar Habilitar Suporte do Docker, mas não se preocupe, você pode adicionar esse suporte mais tarde.

   

   O Visual Studio cria dois projetos: um para o código cliente JavaScript do React e outro para o código do servidor C# do ASP.NET Core.

3. Clique com botão direito do mouse no nó do projeto do servidor e escolha Adicionar>Suporte ao Docker para adicionar um Dockerfile ao seu projeto.

   

4. Selecione o tipo de contêiner.

Use as seguintes etapas para as versões 17.0 a 17.7 do Visual Studio 2022:

1. Crie um projeto usando o modelo ASP.NET Core com React.js.

   

2. Na tela Informações adicionais, não é possível selecionar Habilitar Suporte do Docker, mas não se preocupe, você pode adicionar esse suporte mais tarde.

   

3. Clique com botão direito do mouse no nó do projeto e escolha Adicionar>Suporte ao Docker para adicionar um Dockerfile ao seu projeto.

   

4. Selecione o tipo de contêiner.

A próxima etapa é diferente dependendo se você estiver usando contêineres do Linux ou contêineres do Windows.

Modificar o Dockerfile (contêineres do Linux)

Um Dockerfile, ou seja, a receita para criar uma imagem final do Docker, é criado no projeto. Consulte Referência do Dockerfile para compreender seus comandos.

O Dockerfile padrão usa uma imagem base para executar o contêiner, mas quando você também deseja executar um aplicativo Node.js nele, é necessário instalar o Node.js, o que significa adicionar alguns comandos de instalação em locais específicos no Dockerfile. Os comandos de instalação exigem permissões elevadas, pois as alterações afetam os arquivos e pastas do sistema privilegiados no contêiner.

Quando a caixa de seleção Configurar para HTTPS do diálogo do novo projeto estiver marcada, o Dockerfile exibirá duas portas. Uma porta é usada para o tráfego HTTP; a outra porta é usada para o HTTPS. Se a caixa de seleção não estiver marcada, uma única porta (80) será exposta para o tráfego HTTP.

Se você estiver mirando o .NET 8 ou posterior, o Dockerfile padrão que o Visual Studio cria usando a conta de usuário normal (procure pela linha USER app), no entanto, essa conta não possui as permissões elevadas necessárias para instalar o Node.js. Para lidar com essa situação, faça o seguinte:

1. No Dockerfile, exclua a linha USER app.
2. Altere as portas expostas na primeira seção do Dockerfile para a porta 80, para solicitações HTT, e, se você optou por dar suporte a HTTPS quando criou o projeto, altere para a porta 443, para solicitações HTTPS.
3. Edite launchSettings.json para alterar as referências de porta para 80 e 443; substitua 8080 por 80 para HTTP e 8081 por 443 para HTTPS.

Para todas as versões do .NET, siga as próximas etapas para atualizar o Dockerfile e instalar o Node.js:

1. Adicione as seguintes linhas para instalar o curl, o Node.js 14.x e as bibliotecas Node necessárias no contêiner. Certifique-se de adicionar essas linhas na primeira seção, para adicionar a instalação do npm.exe do gerenciador de pacotes do Node à imagem base, bem como na seção 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

O Dockerfile deve se parecer com o seguinte:

#See https://aka.ms/customizecontainer to learn how to customize your debug container and how Visual Studio uses this Dockerfile to build your images for faster debugging.

FROM mcr.microsoft.com/dotnet/aspnet:8.0 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:8.0 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
ARG BUILD_CONFIGURATION=Release
WORKDIR /src
COPY ["reactapp1.client/nuget.config", "reactapp1.client/"]
COPY ["ReactApp1.Server/ReactApp1.Server.csproj", "ReactApp1.Server/"]
COPY ["reactapp1.client/reactapp1.client.esproj", "reactapp1.client/"]
RUN dotnet restore "./ReactApp1.Server/./ReactApp1.Server.csproj"
COPY . .
WORKDIR "/src/ReactApp1.Server"
RUN dotnet build "./ReactApp1.Server.csproj" -c $BUILD_CONFIGURATION -o /app/build

FROM build AS publish
ARG BUILD_CONFIGURATION=Release
RUN dotnet publish "./ReactApp1.Server.csproj" -c $BUILD_CONFIGURATION -o /app/publish /p:UseAppHost=false

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

Nas versões 17.0 a 17.7 do Visual Studio 2022, deve ser semelhante ao seguinte:

#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:6.0 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:6.0 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"]

O Dockerfile anterior baseia-se na imagem mcr.microsoft.com/dotnet/core/aspnet e inclui instruções para modificar a imagem base criando o projeto e adicionando-o ao contêiner.

Modificar o Dockerfile (contêineres do Windows)

Abra o arquivo de projeto clicando duas vezes no nó do projeto e atualize o arquivo de projeto (*.csproj) adicionando a seguinte propriedade como um filho do elemento <PropertyGroup>:

 <DockerfileFastModeStage>base</DockerfileFastModeStage>

Observação

A alteração para DockerfileFastModeStage é necessária, pois este Dockerfile adiciona um estágio ao início do Dockerfile. Para otimizar o desempenho, o Visual Studio usa o Modo rápido, mas só funciona se a fase certa for usado. O padrão é a primeira fase no Dockerfile, que, neste exemplo, é alterada de base para outra coisa para baixar o Node.js. Para obter mais explicações sobre o Modo rápido, confira o tópico Personalizar contêineres do Docker no Visual Studio.

Atualize o Dockerfile adicionando as linhas a seguir. Isso copiará o nó e o `npm`` para o contêiner.

1. Adicionar # escape=` à primeira linha do Dockerfile

2. Adicione as linhas a seguir 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
   

3. Adicionar a linha a seguir antes e após FROM ... build

   COPY --from=downloadnodejs C:\nodejs\ C:\Windows\system32\
   

4. O Dockerfile completo deve se parecer com o seguinte:

   #See https://aka.ms/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images   for faster debugging.
   
   #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
   # escape=`
   FROM mcr.microsoft.com/powershell:nanoserver-1809 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/aspnet:6.0 AS base
   WORKDIR /app
   EXPOSE 80
   EXPOSE 443
   COPY --from=downloadnodejs C:\\nodejs C:\\Windows\\system32
   
   FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
   COPY --from=downloadnodejs C:\\nodejs C:\\Windows\\system32
   WORKDIR /src
   COPY ["Project1-SPA-Windows/Project1-SPA-Windows.csproj", "Project1-SPA-Windows/"]
   RUN dotnet restore "Project1-SPA-Windows/Project1-SPA-Windows.csproj"
   COPY . .
   WORKDIR "/src/Project1-SPA-Windows"
   RUN dotnet build "Project1-SPA-Windows.csproj" -c Release -o /app/build
   
   FROM build AS publish
   RUN dotnet publish "Project1-SPA-Windows.csproj" -c Release -o /app/publish /p:UseAppHost=false
   
   FROM base AS final
   WORKDIR /app
   COPY --from=publish /app/publish .
   ENTRYPOINT ["dotnet", "Project1-SPA-Windows.dll"]
   

5. Atualize o arquivo .dockerignore removendo o **/bin.

Depurar

Com a versão 17.8 ou posterior do Visual Studio 2022 e o modelo React e ASP.NET Core, os projetos já estão configurados para iniciar tanto o projeto cliente quanto o projeto do servidor com suporte à depuração.

Se estiver usando uma versão anterior do Visual Studio, continue lendo para configurar a depuração com o sensor proxy do aplicativo de página única (SPA).

O projeto usa o Proxy SPA durante a depuração. Confira Modelos de SPA (aplicativo de página única) aprimorados. Durante a depuração, o cliente JavaScript é executado no computador host, mas o código do servidor ASP.NET Core é executado no contêiner. Quando publicado, o proxy não é executado, e o código do cliente é executado no mesmo servidor que o código do ASP.NET Core. Você já tem um perfil de Depuração *Docker que pode ser usado para depurar o código do servidor. Para depurar o código do cliente JavaScript, você pode criar um perfil de depuração adicional. Você também precisa iniciar o proxy manualmente a partir de um prompt de comando ao depurar o JavaScript. Você pode deixá-lo em execução em várias sessões de depuração.

1. Compile o projeto, se ele ainda não tiver sido compilado.

2. Abra um prompt de comando de desenvolvimento do Visual Studio, vá para a pasta ClientApp em seu projeto e execute o comando npm run start. Você deverá ver algo como:

   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
   

   Observação

   Observe a URL local. Você precisa fornecer isso em um perfil de inicialização de depuração, que é armazenado no arquivo launchSettings.json.

3. Abra a lista suspensa que contém perfis de depuração (ao lado do ícone de triângulo verde ou do botão Iniciar), escolha Propriedades de Depuração de {ProjectName} e selecione o perfil do Docker.

4. Verifique a seção Variáveis de ambiente e adicione as seguintes variáveis de ambiente, se ainda não estiverem presentes:

   ASPNETCORE_ENVIRONMENT=Development,ASPNETCORE_HOSTINGSTARTUPASSEMBLIES=Microsoft.AspNetCore.SpaProxy

5. Defina a URL como https://localhost:{proxy-port} onde {proxy-port} é a porta do servidor proxy (da etapa 1).

   

   Essa ação altera a entrada do Docker no arquivo launchSettings.json e inicia a URL correta do proxy local em execução no host. Localize o arquivo launchSettings.json no Gerenciador de Soluções em Propriedades.

6. Você deverá ver algo como o seguinte código:

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

   Importante

   Não defina a opção de configurações de inicialização publishAllPorts como true se você estiver usando um proxy. Essa opção publica todas as portas expostas em uma porta aleatória, o que não funcionará quando você definir uma porta específica no proxy SPA.

7. Abra o arquivo ClientApp/src/setupProxy.js e altere a linha que define o destino para usar o endereço e a porta do localhost no contêiner. Você pode encontrar a porta na guia Portas da janela Contêineres.

   const target =  'https://localhost:{container-port}';
   

   Se você estiver usando HTTPS, escolha a porta certa para HTTPS, que é a porta 443 neste tutorial.

8. Inicie o aplicativo com depuração (F5).

   

   Se você receber um erro de build tentando gravar os assemblies de saída, talvez seja necessário interromper um contêiner em execução anteriormente para desbloquear os arquivos.

9. Verifique se você pode atingir um ponto de interrupção no código JavaScript do lado do cliente definindo um ponto de interrupção em ClientApp/src/components/Counter.js na função incrementCounter e tente atingir o ponto de interrupção clicando no botão Incrementar na página Contadores.

   

10. Em seguida, tente atingir um ponto de interrupção no código de ASP.NET Core do lado do servidor. Defina um ponto de interrupção em WeatherController.cs no método Get e tente appender /weatherforecast ao localhost base e à URL da porta para ativar o código.

    

11. Se a porta de contêiner for alterada, o que pode acontecer ao fazer uma alteração significativa, como atualizar launchSettings.json ou atualizar o perfil de inicialização de depuração no IDE, você precisará atualizar a porta no setupProxy.js e reiniciar o proxy. Encerre o proxy atual (Ctrl+C na janela de comando em que ele está em execução) e reinicie-o usando o mesmo comando npm run start.

Janela Contêineres

Abra a janela de ferramentas Contêineres. Você pode encontrá-la no menu em Exibir>Outras Janelas>Contêineres ou pressione Ctrl+Q e comece digitando containers na caixa de pesquisa e, em seguida, escolha Contêineres nos resultados. Quando a janela aparecer, encaixe-a na parte inferior do painel do editor.

A janela Contêineres mostra os contêineres em execução e permite exibir informações sobre eles. Você pode exibir as variáveis de ambiente, rótulos, portas, volumes, o sistema de arquivos e os logs. Os botões da barra de ferramentas permitem criar um terminal (prompt de shell) dentro do contêiner, anexar o depurador ou remover contêineres não utilizados. Confira Usar a janela Contêineres.

Clique na guia Arquivos e expanda a pasta app para ver os arquivos de aplicativo publicados.

Você também pode exibir as imagens e inspecionar informações sobre elas. Escolha a guia Imagens, localize a do projeto e escolha a guia Detalhes para exibir um arquivo json que contém informações sobre uma imagem.

Observação

A imagem dev não contém os binários do aplicativo e outros tipos de conteúdo, pois as configurações de depuração usam montagem de volume para fornecer a experiência iterativa de edição e depuração. Para criar uma imagem de produção que contém todo o conteúdo, use a configuração de Versão.

Publicar imagens do Docker

Depois que o ciclo de desenvolvimento e de depuração do aplicativo forem concluídos, você poderá criar uma imagem de produção do aplicativo.

1. Altere a lista suspensa de configuração para Versão e compile o aplicativo.

2. Clique com o botão direito no projeto em Gerenciador de Soluções e escolha Publicar.

3. Na caixa de diálogo de destino de publicação, selecione Registro de Contêiner do Docker.

   

4. Em seguida, escolha Registro de Contêiner do Azure.

   

5. Escolha Criar um Registro de Contêiner do Azure.

6. Preencha os valores desejados na tela Criar um Registro de Contêiner do Azure.

   Configuração	Valor sugerido	Descrição
   Prefixo DNS	Nome globalmente exclusivo	Nome que identifica exclusivamente o registro de contêiner.
   Assinatura	Escolha sua assinatura	A assinatura do Azure a utilizar.
   Grupo de Recursos	myResourceGroup	Nome do grupo de recursos no qual criar o registro de contêiner. Escolha Novo para criar um novo grupo de recursos.
   SKU	Standard	Camada de serviço do registro de contêiner
   Local do Registro	Um local próximo	Escolha um Local em uma região próxima a você ou perto de outros serviços que usam o registro de contêiner.

   

7. Selecione Criar e depois Concluir.

   

   Quando o processo de publicação terminar, você poderá examinar as configurações de publicação e editá-las, quando necessário, ou publicar a imagem novamente usando o botão Publicar.

   

   Para começar novamente a usar a caixa de diálogo Publicar, exclua o perfil de publicação usando o link Excluir nesta página e escolha Publicar novamente.

Próximas etapas

Agora, é possível extrair o contêiner do registro para qualquer host capaz de executar imagens do Docker, por exemplo Instâncias de Contêiner do Azure.

Recursos adicionais

• Desenvolvimento de contêiner com o Visual Studio
• Solucionar problemas de desenvolvimento do Visual Studio com o Docker
• Repositório do GitHub e Ferramentas do Visual Studio para Contêineres