Rychlý start: Použití Dockeru s jednostráčkovou aplikací React v sadě Visual Studio

V sadě Visual Studio můžete snadno vytvářet, ladit a spouštět kontejnerizované aplikace ASP.NET Core, včetně aplikací na straně klienta, jako je React.js jednostránkové aplikace (SPA) a publikovat je do služby Azure Container Registry, Docker Hubu, Azure App Service nebo vlastního container Registry. V tomto článku publikujeme do služby Azure Container Registry.

Note

Tento článek se týká sady Visual Studio 2019. Pokud používáte Visual Studio 2022, existují nové šablony projektů JavaScriptu, které výrazně usnadňují scénář. Viz kurz: Vytvoření aplikace ASP.NET Core pomocí Reactu v sadě Visual Studio – Docker.

Prerequisites

• Docker Desktop
• Visual Studio 2019 s nainstalovanou úlohou vývoje pro ASP.NET a web, úlohou vývoje pro Azure nebo .NET Core pro různé platformy
• Pokud chcete publikovat do služby Azure Container Registry, potřebujete předplatné Azure. Zaregistrujte si bezplatnou zkušební verzi.
• Node.js
• Pro kontejnery Windows je potřeba Windows 10 verze 1809 nebo novější k použití obrazů Dockeru, na které odkazuje tento článek.

Instalace a nastavení

Při instalaci Dockeru si nejprve projděte informace v Docker Desktopu pro Windows: Co je potřeba vědět před instalací. Dále nainstalujte Docker Desktop.

Vytvoření projektu a přidání podpory Dockeru

1. Vytvořte nový projekt pomocí šablony ASP.NET Core s React.js .

   

2. Na obrazovce Další informace nemůžete vybrat Povolit podporu Dockeru, ale nemějte obavy, tuto podporu můžete přidat později.

   

3. Klikněte pravým tlačítkem myši na uzel projektu a zvolte Přidat>podporu Dockeru a přidejte do projektu soubor Dockerfile.

   

4. Vyberte typ kontejneru.

Další krok se liší podle toho, jestli používáte kontejnery Linuxu nebo kontejnery Windows.

Note

Pokud používáte nejnovější šablony projektů v sadě Visual Studio 2022 nebo novější, nemusíte upravovat soubor Dockerfile.

Úprava souboru Dockerfile (kontejnery Linuxu)

V projektu se vytvoří soubor Dockerfile, recept na vytvoření konečné image Dockeru. Informace o příkazech v něm najdete v referenčních informacích k souboru Dockerfile .

Výchozí soubor Dockerfile používá ke spuštění kontejneru základní image, ale pokud na něm chcete mít také možnost spustit Node.js aplikaci, musíte nainstalovat Node.js, což znamená přidání některých instalačních příkazů na několik míst v souboru Dockerfile. Instalační příkazy vyžadují zvýšená oprávnění, protože změny ovlivňují privilegované systémové soubory a složky kontejneru.

Když je zaškrtnuté políčko Konfigurovat pro HTTPS nového projektu, soubor Dockerfile zveřejňuje dva porty. Jeden port se používá pro provoz HTTP; druhý port se používá pro HTTPS. Pokud políčko není zaškrtnuté, zobrazí se pro provoz HTTP jeden port (80).

Pokud cílíte na .NET 8 nebo novější, výchozí soubor Dockerfile, který Visual Studio vytvoří pomocí normálního uživatelského účtu (vyhledejte řádek USER app), ale tento účet nemá zvýšená oprávnění požadovaná k instalaci Node.js. Pokud chcete tuto situaci zohlednit, postupujte takto:

1. V souboru Dockerfile odstraňte řádek USER app.
2. Změňte porty zveřejněné v první části souboru Dockerfile na port 80 pro požadavky HTTP a (pokud jste se rozhodli podporovat HTTPS při vytváření projektu) 443 pro požadavky HTTPS.
3. Upravte launchSettings.json a změňte odkazy na port na 80 a 443; nahraďte 8080 80 pro HTTP a 8081 443 pro HTTPS.

Pro všechny verze .NET pomocí následujícího postupu aktualizujte soubor Dockerfile pro instalaci Node.js:

• Přidejte následující řádky pro instalaci curl, Node.js 14.x a určitých požadovaných knihoven Node v kontejneru. Nezapomeňte přidat tyto řádky jak do první části, kde se přidává instalace Správce balíčků Node npm.exe do základní image, tak také do části 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

Soubor Dockerfile by teď měl vypadat přibližně takto:

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

Předchozí soubor Dockerfile je založený na imagi mcr.microsoft.com/dotnet/aspnet a obsahuje pokyny k úpravě základní image sestavením projektu a jeho přidáním do kontejneru.

Úprava souboru Dockerfile (kontejnery Windows)

Otevřete soubor projektu poklikáním na uzel projektu a aktualizujte soubor projektu (*.csproj) přidáním následující vlastnosti jako podřízeného prvku <PropertyGroup>:

 <DockerfileFastModeStage>base</DockerfileFastModeStage>

Note

Změna souboru DockerfileFastModeStage je nutná, protože soubor Dockerfile zde přidá fázi na začátek souboru Dockerfile. K optimalizaci výkonu používá Visual Studio režim Fast, ale funguje pouze v případě, že se použije správná fáze. Výchozí je první fáze souboru Dockerfile, která se v tomto příkladu změní z base na něco jiného, aby bylo možné stáhnout Node.js. Další vysvětlení režimu Fast najdete v tématu Přizpůsobení kontejnerů Dockeru v sadě Visual Studio.

Aktualizujte soubor Dockerfile přidáním následujících řádků. Tyto řádky zkopírují Node.js a npm do kontejneru.

1. Přidání # escape=` na první řádek souboru Dockerfile

2. Před FROM ... base přidejte následující řádky.

   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. Před a za FROM ... build přidejte následující řádek.

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

4. Úplný soubor Dockerfile by teď měl vypadat přibližně takto:

   # 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. Aktualizujte soubor .dockerignore odebráním **/bin.

Debug

V rozevíracím seznamu ladění na panelu nástrojů vyberte Docker a spusťte ladění aplikace. Může se zobrazit zpráva s výzvou k důvěryhodnosti certifikátu; zvolte, že chcete certifikát důvěřovat, abyste mohli pokračovat. Při prvním sestavení stáhne Docker základní image, takže může trvat delší dobu.

Možnost Nástroje kontejneru v okně Výstup ukazuje, jaké akce se provádějí. Měly by se zobrazit kroky instalace přidružené k npm.exe.

V prohlížeči se zobrazuje domovská stránka aplikace.

Okno kontejnerů

Otevřete okno nástroje Kontejnery . Najdete to v nabídce pod Zobrazit>Další okna>Kontejnery, nebo stiskněte Ctrl+Q a začněte psát containers do vyhledávacího pole, poté ve výsledcích zvolte okno Kontejnery. Až se okno objeví, ukotvíte ho dole pod podoknem editoru.

Okno Kontejnery zobrazuje spuštěné kontejnery a umožňuje zobrazit informace o nich. Můžete zobrazit proměnné prostředí, popisky, porty, svazky, systém souborů a protokoly. Tlačítka panelu nástrojů umožňují vytvořit terminál (příkazový řádek prostředí) uvnitř kontejneru, připojit ladicí program nebo vyřadit nepoužívané kontejnery. Viz Použití okna Kontejnery.

Klikněte na kartu Soubory a rozbalte app složku, aby se zobrazily vaše publikované soubory aplikace.

Můžete si také prohlédnout obrázky a zkontrolovat informace o nich. Zvolte kartu Obrázky , vyhledejte projekt a pak zvolte kartu Podrobnosti , abyste zobrazili soubor JSON, který obsahuje informace o obrázku.

Note

Dev image neobsahuje binárky aplikace a další obsah, protože konfigurace Debug používají připojení svazku pro zajištění možnosti iterativních úprav a ladění. K vytvoření produkční image obsahující veškerý obsah použijte konfiguraci Release.

Publikování imagí Dockeru

Po dokončení cyklu vývoje a ladění aplikace můžete vytvořit produkční image aplikace.

1. Změňte rozevírací seznam konfigurace na Režim vydání a sestavte aplikaci.

2. Klikněte pravým tlačítkem na projekt v Průzkumníku řešení a zvolte Publikovat.

3. V dialogovém okně cíl publikování vyberte Docker Container Registry.

   Zvolte Docker Container Registry.

4. Pak zvolte Azure Container Registry.

   

5. Zvolte Vytvořit nový Azure Container Registry.

6. Na obrazovce Vytvořit novou službu Azure Container Registry vyplňte požadované hodnoty.

   Setting	Navrhovaná hodnota	Description
   Předpona DNS	Globálně jedinečný název	Název, který jednoznačně identifikuje váš registr kontejneru.
   Subscription	Volba předplatného	Předplatné Azure, které se má použít.
   Skupina prostředků	myResourceGroup	Název skupiny prostředků, ve které se má vytvořit registr kontejneru. Zvolte Nový a vytvořte novou skupinu prostředků.
   SKU	Standard	Úroveň služby registru kontejneru
   Umístění registru	Umístění blízko vás	Zvolte umístění v oblasti blízko vás nebo v blízkosti jiných služeb, které používají registr kontejneru.

   

7. Vyberte Vytvořit a pak vyberte Dokončit.

   

   Jakmile proces publikování skončí, můžete zkontrolovat nastavení publikování a v případě potřeby je upravit nebo obrázek znovu publikovat pomocí tlačítka Publikovat .

   

   Pokud chcete znovu začít používat dialogové okno Publikovat , odstraňte profil publikování pomocí odkazu Odstranit na této stránce a pak znovu zvolte Publikovat .

Další kroky

Teď můžete načíst kontejner z registru do libovolného hostitele, který dokáže spouštět image Dockeru, například Azure Container Instances.

Dodatečné zdroje

• Vývoj kontejnerů pomocí sady Visual Studio
• Řešení potíží s vývojem sady Visual Studio pomocí Dockeru
• Úložiště GitHub pro Visual Studio Container Tools