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

Článek
01/28/2025

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.

Požadavky

Docker Desktop
Visual Studio 2019 s nainstalovanými úlohami webový vývoj, Azure Tools a/nebo vývoj .NET Core napříč platformami
Vývojové nástroje pro .NET Core 3.1 pro vývoj s .NET Core 3.1.
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.

Docker Desktop
sady Visual Studio 2022 s nainstalovanými úlohami vývojewebu, Azure Tools nebo vývoj pro různé platformy .NET Core
Pro publikování do služby Azure Container Registry je vyžadováno předplatné Azure. zaregistrujte si bezplatnou zkušební verzi.
Node.js
Pro kontejnery Windows je potřeba Windows 10 verze 1809 nebo novější, aby bylo možné používat obrazy 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 potřebujete vědět před instalací. Dále nainstalujte Docker Desktop.

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

Vytvořte nový projekt pomocí šablony ASP.NET Core s React.js šablonou.
Na obrazovce Další informace nemůžete vybrat Povolit podporu Dockeru, ale nemusíte se obávat, tuto funkci můžete přidat později.
Klikněte pravým tlačítkem na uzel projektu a zvolte Přidat>podporu Dockeru a přidejte do projektu soubor Dockerfile.
Vyberte typ kontejneru.

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

Poznámka

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ří Dockerfile, což je recept na vytvoření finálního Docker image. Informace o příkazech, které obsahuje, najdete v dokumentaci k 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, Dockerfile zpřístupní 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:

V souboru Dockerfile odstraňte řádek USER app.
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.
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 Docker file 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í souboru Dockerfile vychází z image mcr.microsoft.com/dotnet/aspnet a obsahuje pokyny k úpravě základní image sestavením projektu a jejím 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>

Poznámka

Změna DockerfileFastModeStage je nutná, protože tento Dockerfile přidává fázi na jeho začátek. K optimalizaci výkonu používá Visual Studio rychlý režim, 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. Pro více vysvětlení režimu Fastnajdete v tématu Přizpůsobení kontejnerů Dockeru ve Visual Studiu .

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

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

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

Před a za FROM ... build přidejte následující řádek.

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

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

Aktualizujte soubor .dockerignore odebráním **/bin.

Pokud používáte Visual Studio 2022 verze 17.8 nebo novější, postupujte takto:

Vytvořte nový projekt pomocí šablony React a ASP.NET Core.
Na obrazovce Další informace vyberte možnost Povolení podpory kontejneru. Nezapomeňte vybrat možnost Dockerfile, protože budete muset ručně provést změny v tomto souboru.

Poznámka

V některých verzích sady Visual Studio 2022 není tato možnost povolená, ale tuto podporu můžete přidat později.

Visual Studio vytvoří dva projekty – jeden pro kód klienta React JavaScriptu a druhý pro kód serveru ASP.NET Core C#.
Pokud jste během vytváření projektu nepřidali podporu kontejneru Dockeru, klikněte pravým tlačítkem myši na uzel projektu serveru a zvolte Přidat>podporu Dockeru a nezapomeňte zvolit možnost Dockerfile pro vytvoření souboru Dockerfile.
Vyberte typ kontejneru.

Pro Visual Studio 2022 verze 17.0 až 17.7 postupujte následovně:

Vytvořte nový projekt pomocí šablony ASP.NET Core s React.js šablonou.
Na obrazovce Další informace nemůžete vybrat Povolit podporu Dockeru, ale nemějte obavy, můžete tuto podporu přidat později.
Klikněte pravým tlačítkem na uzel projektu a zvolte Přidat>podporu Dockeru a přidejte do projektu soubor Dockerfile.
Vyberte typ kontejneru.

Ladit

V sadě Visual Studio 2022 verze 17.9 nebo novější a šabloně React a ASP.NET Core, která používá vite.js, jsou projekty už nakonfigurované tak, aby spouštěly projekty klienta i serveru s podporou ladění, ale musíte nastavit správný port pro proxy jednostránkové aplikace (SPA), který se má použít pro přístup k serveru ASP.NET Core běžícímu v kontejneru. Port hostitele můžete získat z okna Containers v sadě Visual Studio a nastavit ho v projektu React, jak je popsáno v tématu Vytvoření aplikace React – Docker.

V prohlížeči můžete také deaktivovat spuštění serveru, který je nastaven na otevření pomocí Swaggeru, což pro tento scénář není nutné. Pokud chcete spuštění prohlížeče zakázat, otevřete vlastnosti (Alt+Enter), přejděte na kartu Ladění a klikněte na odkaz Otevřít UI profilů laděnía zrušte zaškrtnutí políčka Spustit prohlížeč.

Pokud používáte starší verzi sady Visual Studio 2022, pokračujte ve čtení tohoto návodu a nastavte ladění s použitím proxy serveru jednostránkové aplikace (SPA).

Projekt během ladění používá proxy spa. Viz vylepšené šablony jednostránkových aplikací (SPA). Při ladění běží javascriptový klient na hostitelském počítači, ale kód serveru ASP.NET Core běží v kontejneru. Při publikování se proxy server nespustí a klientský kód se spustí na stejném serveru jako kód ASP.NET Core. Již máte profil ladění *Docker, který můžete použít k ladění kódu serveru. Pokud chcete ladit kód klienta JavaScriptu, můžete vytvořit další ladicí profil. Při ladění JavaScriptu také potřebujete proxy spustit ručně z příkazového řádku. Můžete ji nechat spuštěnou prostřednictvím více ladicích relací.

Sestavte projekt, pokud ještě není postaven.
Otevřete příkazový řádek pro vývoj v sadě Visual Studio, přejděte do složky ClientApp v projektu a poté zadejte příkaz npm run start. Mělo by se zobrazit něco podobného:
```
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
```
Poznámka

Poznamenejte si místní adresu URL. Musíte to zadat v ladicím profilu spuštění, který je uložen ve vašem souboru launchSettings.json.
Otevřete rozevírací seznam obsahující ladicí profily (vedle zelené ikony trojúhelníku nebo tlačítka Spustit) a zvolte {ProjectName} Vlastnosti laděnía zvolte profil Dockeru.
Zkontrolujte oddíl proměnné prostředí a pokud ještě nejsou k dispozici, přidejte následující proměnné:

ASPNETCORE_ENVIRONMENT=Development,ASPNETCORE_HOSTINGSTARTUPASSEMBLIES=Microsoft.AspNetCore.SpaProxy
Nastavte adresy URL na https://localhost:{proxy-port}, kde {proxy-port} je port z proxy serveru (z kroku 1).

Tato akce změní položku Dockeru v souboru launchSettings.json a spustí správnou adresu URL místního proxy serveru spuštěného na hostiteli. Vyhledejte soubor launchSettings.json v průzkumníku řešení v části vlastnosti .

Měli byste vidět něco jako následující kód:

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

Důležitý

Nenastavujte možnost nastavení spuštění publishAllPorts na true, pokud používáte proxy server. Tato možnost publikuje všechny vystavené porty na náhodný port, který nebude fungovat při nastavování konkrétního portu v proxy spa.

Otevřete soubor ClientApp/src/setupProxy.js a změňte řádek, který nastaví cíl tak, aby používal adresu localhost a port v kontejneru. Port najdete na kartě Porty v okně Kontejnery.
```
const target =  'https://localhost:{container-port}';
```
Pokud používáte HTTPS, nezapomeňte zvolit správný port pro HTTPS, což je 443 v tomto kurzu.
Spusťte aplikaci s laděním (F5).

Pokud se při pokusu o zápis výstupních sestavení zobrazí chyba sestavení, možná budete muset zastavit dříve spuštěný kontejner, abyste mohli soubory odemknout.
Ověřte, že můžete zasáhnout zarážku ve JavaScriptovém kódu na straně klienta nastavením zarážky v ClientApp/src/components/Counter.js ve funkci incrementCounter, a poté zkuste zasáhnout zarážku kliknutím na tlačítko Přidat na stránce Čítače.
V dalším kroku zkuste na straně serveru narazit na zarážku ASP.NET kódu Core. Nastavte zarážku v WeatherController.cs v metodě Get a zkuste /weatherforecast připojit k základní localhost a adrese URL portu, abyste aktivovali tento kód.
Pokud se změní port kontejneru, což se může stát, pokud provedete značnou změnu, například aktualizujete launchSettings.json nebo profil spuštění ladění v IDE, musíte aktualizovat port v setupProxy.js a restartovat proxy server. Ukončete aktuální proxy server (Ctrl+C v příkazovém okně, ve kterém je spuštěný), a pak ho restartujte pomocí stejného příkazu npm run start.

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ěli byste vidět kroky instalace přidružené k npm.exe.

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

snímek obrazovky se spuštěnou aplikací.

Okno kontejnerů

Otevřete okno nástroje Containers. Najdete ho v nabídce v části Zobrazit>Jiná okna>, nebo stiskněte Ctrl+Q a do vyhledávacího pole začněte psát containers, a pak 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.

Snímek obrazovky okna Kontejnery

Klikněte na kartu Soubory a rozbalte složku app a zobrazte publikované soubory aplikace.

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

snímek obrazovky okna Kontejnery zobrazující obrázky a podrobnosti

Poznámka

Image vývojového neobsahuje binární soubory aplikace a další obsah, protože konfigurace Ladění používají připojení svazků k zajištění 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.

Změňte rozevírací seznam konfigurace na release a sestavte aplikaci.
Klikněte pravým tlačítkem na projekt v Průzkumníku řešení a zvolte Publikuj.
V dialogovém okně cíl publikování vyberte Docker Container Registry.
Pak zvolte Azure Container Registry.
Zvolte Vytvořit nový Azure Container Registry.

Vyplňte požadované hodnoty na obrazovce Vytvoření nové služby Azure Container Registry.

Nastavení	Navrhovaná hodnota	Popis
předpona DNS	Globálně jedinečný název	Název, který jednoznačně identifikuje váš registr kontejneru.
Předplatné	Volba předplatného	Předplatné Azure, které se má použít.
skupiny 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.

Snímek obrazovky dialogu vytvoření Azure Container Registry v sadě Visual Studio.

Vyberte Vytvořita pak vyberte Dokončit.

Po dokončení procesu publikování můžete zkontrolovat nastavení publikování a v případě potřeby je upravit nebo znovu publikovat obrázek pomocí tlačítka Publikovat.

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

Změňte rozevírací seznam konfigurace na release a sestavte aplikaci.
Klikněte pravým tlačítkem na projekt v Průzkumníku řešení a zvolte Publikovat.
V dialogovém okně pro cílové publikování vyberte Docker Container Registry.
Dále vyberte Azure Container Registry.
Zvolte Vytvořit nový Azure Container Registry.

Vyplňte požadované hodnoty na obrazovce Vytvořit nový registr kontejnerů Azure.

Nastavení	Navrhovaná hodnota	Popis
předpona DNS	Globálně jedinečný název	Název, který jednoznačně identifikuje váš registr kontejneru.
Předplatné	Volba předplatného	Předplatné Azure, které se má použít.
skupiny 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.

Snímek obrazovky dialogového okna pro vytvoření Azure Container Registry ve Visual Studio.

Vyberte Vytvořita pak vyberte Dokončit.

Po dokončení procesu publikování můžete zkontrolovat nastavení publikování a v případě potřeby je upravit nebo znovu publikovat obrázek pomocí tlačítka Publikovat.

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