Szybki start: używanie platformy Docker z aplikacją jednostronicową React w programie Visual Studio

Za pomocą programu Visual Studio można łatwo kompilować, debugować i uruchamiać konteneryzowane aplikacje ASP.NET Core, w tym aplikacje JavaScript po stronie klienta, takie jak React.js jednostronicowa, i publikować je w usłudze Azure Container Registry, Docker Hub, aplikacja systemu Azure Service lub własnym rejestrze kontenerów. W tym artykule publikujemy w usłudze Azure Container Registry.

Wymagania wstępne

• Docker Desktop
• Program Visual Studio 2022 z zainstalowanym pakietem roboczym Tworzenie aplikacji internetowych, narzędzi platformy Azure i/lub pakietem roboczym programowania dla wielu platform . NET Core
• Aby opublikować w usłudze Azure Container Registry, subskrypcja platformy Azure. Utwórz konto w celu uzyskania bezpłatnej wersji próbnej.
• Node.js
• W przypadku kontenerów systemu Windows, systemu Windows 10 w wersji 1809 lub nowszej, aby użyć obrazów platformy Docker, do których odwołuje się ten artykuł.

Instalacja i konfiguracja

W przypadku instalacji platformy Docker najpierw zapoznaj się z informacjami w witrynie Docker Desktop dla systemu Windows: co należy wiedzieć przed zainstalowaniem. Następnie zainstaluj program Docker Desktop.

Tworzenie projektu i dodawanie obsługi platformy Docker

Wykonaj następujące kroki, jeśli używasz programu Visual Studio 2022 w wersji 17.8 lub nowszej:

1. Utwórz nowy projekt przy użyciu szablonu React i ASP.NET Core .

   

2. Na ekranie Dodatkowe informacje nie można wybrać pozycji Włącz obsługę platformy Docker, ale nie martw się, możesz dodać tę obsługę później.

   

   Program Visual Studio tworzy dwa projekty — jeden dla kodu klienta React JavaScript, a drugi dla kodu serwera ASP.NET Core C#.

3. Kliknij prawym przyciskiem myszy węzeł projektu serwera i wybierz polecenie Dodaj>obsługę platformy Docker, aby dodać plik Dockerfile do projektu.

   

4. Wybierz typ kontenera.

Wykonaj następujące kroki dla programu Visual Studio 2022 w wersji 17.0 do 17.7:

1. Utwórz nowy projekt przy użyciu szablonu ASP.NET Core z React.js .

   

2. Na ekranie Dodatkowe informacje nie można wybrać pozycji Włącz obsługę platformy Docker, ale nie martw się, możesz dodać tę obsługę później.

   

3. Kliknij prawym przyciskiem myszy węzeł projektu i wybierz polecenie Dodaj>obsługę platformy Docker, aby dodać plik Dockerfile do projektu.

   

4. Wybierz typ kontenera.

Następny krok różni się w zależności od tego, czy używasz kontenerów systemu Linux, czy kontenerów systemu Windows.

Modyfikowanie pliku Dockerfile (kontenery systemu Linux)

Plik Dockerfile, przepis na utworzenie końcowego obrazu platformy Docker, jest tworzony w projekcie. Opis poleceń znajdujących się w tym pliku można znaleźć w dokumentacji pliku Dockerfile.

Domyślny plik Dockerfile używa obrazu podstawowego do uruchamiania kontenera, ale jeśli chcesz również uruchomić na nim aplikację Node.js, musisz zainstalować Node.js, co oznacza dodanie niektórych poleceń instalacji w kilku miejscach w pliku Dockerfile. Polecenia instalacji wymagają podwyższonych uprawnień, ponieważ zmiany wpływają na uprzywilejowane pliki systemowe i foldery kontenera.

Po zaznaczeniu pola wyboru Konfiguruj pod kątem protokołu HTTPS w oknie dialogowym nowego projektu plik Dockerfile uwidacznia dwa porty. Jeden port jest używany na potrzeby ruchu HTTP, a drugi na potrzeby protokołu HTTPS. Jeśli pole wyboru nie jest zaznaczone, dla ruchu HTTP jest uwidoczniony pojedynczy port (80).

Jeśli używasz platformy .NET 8 lub nowszej, domyślny plik Dockerfile tworzony przez program Visual Studio przy użyciu normalnego konta użytkownika (poszukaj wiersza USER app), ale to konto nie ma podwyższonych uprawnień wymaganych do zainstalowania Node.js. Aby uwzględnić tę sytuację, wykonaj następujące czynności:

1. W pliku Dockerfile usuń wiersz USER app.
2. Zmiana portów uwidocznionych w pierwszej sekcji pliku Dockerfile na port 80 dotyczy żądań HTTP i (jeśli wybrano obsługę protokołu HTTPS podczas tworzenia projektu) 443 dla żądań HTTPS.
3. Edytuj launchSettings.json , aby zmienić odwołania do portów na 80 i 443; zastąp wartość 8080 numerem 80 dla protokołu HTTP i 8081 numerem 443 dla protokołu HTTPS.

W przypadku wszystkich wersji platformy .NET wykonaj następujące kroki, aby zaktualizować plik Dockerfile w celu zainstalowania Node.js:

1. Dodaj następujące wiersze, aby zainstalować bibliotekę curl, Node.js 14.x i niektóre wymagane biblioteki node w kontenerze. Pamiętaj, aby dodać te wiersze zarówno w pierwszej sekcji, jak i dodać instalację menedżera npm.exe pakietów Node do obrazu podstawowego, a także w build sekcji .

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

Plik Dockerfile powinien teraz wyglądać mniej więcej tak:

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

W programie Visual Studio 2022 w wersji 17.0 do 17.7 powinna wyglądać następująco:

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

Powyższy plik Dockerfile jest oparty na obrazie mcr.microsoft.com/dotnet/core/aspnet i zawiera instrukcje dotyczące modyfikowania obrazu podstawowego przez kompilowanie projektu i dodawanie go do kontenera.

Modyfikowanie pliku Dockerfile (kontenery systemu Windows)

Otwórz plik projektu, klikając dwukrotnie węzeł projektu i aktualizując plik projektu (*.csproj), dodając następującą właściwość jako element podrzędny <PropertyGroup> elementu:

 <DockerfileFastModeStage>base</DockerfileFastModeStage>

Uwaga

Wymagana jest zmiana pliku DockerfileFastModeStage , ponieważ plik Dockerfile dodaje etap na początku pliku Dockerfile. Aby zoptymalizować wydajność, program Visual Studio używa trybu szybkiego, ale działa tylko wtedy, gdy jest używany właściwy etap. Wartość domyślna to pierwszy etap w pliku Dockerfile, który w tym przykładzie został zmieniony z base na coś innego, aby pobrać Node.js. Aby uzyskać więcej informacji na temat trybu szybkiego, zobacz Dostosowywanie kontenerów platformy Docker w programie Visual Studio.

Zaktualizuj plik Dockerfile, dodając następujące wiersze. Te wiersze będą kopiować węzły i "npm" do kontenera.

1. Dodaj # escape=` do pierwszego wiersza pliku Dockerfile

2. Dodaj następujące wiersze przed 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. Dodaj następujący wiersz przed i po FROM ... build

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

4. Kompletny plik Dockerfile powinien teraz wyglądać mniej więcej tak:

   #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. .dockerignore Zaktualizuj plik, usuwając element **/bin.

Debugowanie

W przypadku programu Visual Studio 2022 w wersji 17.8 lub nowszej oraz szablonu React i ASP.NET Core projekty są już skonfigurowane do uruchamiania projektów klienta i serwera z obsługą debugowania.

Jeśli używasz starszej wersji programu Visual Studio, kontynuuj czytanie, aby skonfigurować debugowanie przy użyciu serwera proxy aplikacji jednostronicowej (SPA).

Projekt używa serwera proxy SPA podczas debugowania. Zobacz Ulepszone szablony aplikacji jednostronicowej (SPA). Podczas debugowania klient JavaScript działa na maszynie hosta, ale kod serwera ASP.NET Core jest uruchamiany w kontenerze. Po opublikowaniu serwer proxy nie jest uruchamiany, a kod klienta jest uruchamiany na tym samym serwerze co kod ASP.NET Core. Masz już profil debugowania *Docker , którego można użyć do debugowania kodu serwera. Aby debugować kod klienta JavaScript, możesz utworzyć dodatkowy profil debugowania. Należy również ręcznie uruchomić serwer proxy z poziomu wiersza polecenia podczas debugowania języka JavaScript. Można pozostawić je uruchomione przez wiele sesji debugowania.

1. Skompiluj projekt, jeśli nie został jeszcze skompilowany.

2. Otwórz wiersz polecenia dewelopera programu Visual Studio, przejdź do folderu ClientApp w projekcie, a następnie nadaj polecenie npm run start. Powinny zostać wyświetlone informacje podobne do następujących:

   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
   

   Uwaga

   Zanotuj lokalny adres URL. Należy to podać w profilu uruchamiania debugowania, który jest przechowywany w launchSettings.json pliku.

3. Otwórz listę rozwijaną zawierającą profile debugowania (obok ikony zielonego trójkąta lub przycisk Start ), a następnie wybierz pozycję {ProjectName} Właściwości debugowania, a następnie wybierz profil platformy Docker .

4. Sprawdź sekcję Zmienne środowiskowe i dodaj następujące zmienne środowiskowe, jeśli jeszcze nie istnieją:

   ASPNETCORE_ENVIRONMENT=Development,ASPNETCORE_HOSTINGSTARTUPASSEMBLIES=Microsoft.AspNetCore.SpaProxy

5. Ustaw adres URL na https://localhost:{proxy-port} miejsce, w którym {proxy-port} znajduje się port z serwera proxy (z kroku 1).

   

   Ta akcja zmienia wpis platformy Docker w launchSettings.json pliku i uruchamia prawidłowy adres URL lokalnego serwera proxy uruchomionego na hoście. launchSettings.json Znajdź plik w Eksplorator rozwiązań w obszarze Właściwości.

6. Powinien zostać wyświetlony kod podobny do następującego:

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

   Ważne

   Nie należy ustawiać opcji publishAllPorts ustawień uruchamiania na true wartość , jeśli używasz serwera proxy. Ta opcja publikuje wszystkie uwidocznione porty na losowym porcie, który nie będzie działać po ustawieniu określonego portu na serwerze proxy SPA.

7. Otwórz plik ClientApp/src/setupProxy.js i zmień wiersz, który ustawia obiekt docelowy na użycie localhost adresu i portu w kontenerze. Port można znaleźć na karcie Porty okna Kontenery .

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

   Jeśli używasz protokołu HTTPS, pamiętaj, aby wybrać odpowiedni port dla protokołu HTTPS, który jest 443 w tym samouczku.

8. Uruchom aplikację przy użyciu debugowania (F5).

   

   Jeśli wystąpi błąd kompilacji podczas próby zapisania zestawów wyjściowych, może być konieczne zatrzymanie wcześniej uruchomionego kontenera w celu odblokowania plików.

9. Sprawdź, czy w kodzie JavaScript po stronie klienta można trafić punkt przerwania, ustawiając punkt przerwania w funkcji ClientApp/src/components/Counter.js w funkcji incrementCounter , a następnie spróbuj nacisnąć punkt przerwania, klikając przycisk Przyrost na stronie Liczniki.

   

10. Następnie spróbuj użyć punktu przerwania w kodzie po stronie serwera ASP.NET Core. Ustaw punkt przerwania w WeatherController.cs metodzie Get i spróbuj dołączyć /weatherforecast go do podstawowego localhost i adresu URL portu, aby aktywować ten kod.

    

11. Jeśli port kontenera ulegnie zmianie, co może się zdarzyć, jeśli wprowadzisz znaczącą zmianę, na przykład zaktualizowanie lub zaktualizowanie launchSettings.json profilu uruchamiania debugowania w środowisku IDE, należy zaktualizować port w setupProxy.js programie , a także ponownie uruchomić serwer proxy. Zakończ bieżący serwer proxy (Ctrl+C w oknie polecenia, w którym jest uruchomiony), a następnie uruchom go ponownie przy użyciu tego samego polecenia .npm run start

Okno Kontenery

Otwórz okno narzędzia Kontenery. Możesz go znaleźć w menu w obszarze Wyświetl>inne kontenery systemu Windows>lub naciśnij klawisze Ctrl+Q i zacznij wpisywać containers w polu wyszukiwania, a następnie wybierz pozycję Kontenery w oknie wyników. Gdy pojawi się okno, zadokuj go w dolnej części okienka edytora.

W oknie Kontenery są wyświetlane uruchomione kontenery i można wyświetlić informacje o nich. Możesz wyświetlić zmienne środowiskowe, etykiety, porty, woluminy, system plików i dzienniki. Przyciski paska narzędzi umożliwiają utworzenie terminalu (monitu powłoki) wewnątrz kontenera, dołączenie debugera lub przycinanie nieużywanych kontenerów. Zobacz Korzystanie z okna Kontenery.

Kliknij kartę Pliki i rozwiń app folder, aby wyświetlić opublikowane pliki aplikacji.

Możesz również wyświetlić obrazy i sprawdzić informacje o nich. Wybierz kartę Obrazy , znajdź go dla projektu, a następnie wybierz kartę Szczegóły , aby wyświetlić plik JSON zawierający informacje o obrazie.

Uwaga

Obraz deweloperski nie zawiera plików binarnych aplikacji i inną zawartość, ponieważ konfiguracje debugowania używają instalowania woluminu w celu zapewnienia iteracyjnej edycji i debugowania. Aby utworzyć obraz produkcyjny zawierający całą zawartość, użyj konfiguracji wydania .

Publikowanie obrazów platformy Docker

Po zakończeniu cyklu tworzenia i debugowania aplikacji możesz utworzyć obraz produkcyjny aplikacji.

1. Zmień listę rozwijaną konfiguracji na Wydanie i skompiluj aplikację.

2. Kliknij prawym przyciskiem myszy projekt w Eksplorator rozwiązań i wybierz polecenie Publikuj.

3. W oknie dialogowym publikowanie elementu docelowego wybierz pozycję Docker Container Registry.

   

4. Następnie wybierz pozycję Azure Container Registry.

   

5. Wybierz pozycję Utwórz nowy rejestr kontenerów platformy Azure.

6. Wypełnij żądane wartości na ekranie Tworzenie nowego rejestru kontenerów platformy Azure.

   Ustawienie	Sugerowana wartość	opis
   Prefiks DNS	Nazwa unikatowa w skali globalnej	Nazwa, która jednoznacznie identyfikuje rejestr kontenerów.
   Subskrypcja	Wybierz swoją subskrypcję	Subskrypcja platformy Azure, która ma być używana.
   Grupa zasobów	myResourceGroup	Nazwa grupy zasobów, w której ma zostać utworzony rejestr kontenerów. Wybierz pozycję Nowa, aby utworzyć nową grupę zasobów.
   SKU	Standardowa	Warstwa usługi rejestru kontenerów
   Lokalizacja rejestru	Blisko Ciebie znajduje się lokalizacja	Wybierz lokalizację w regionie w pobliżu ciebie lub w pobliżu innych usług, które korzystają z rejestru kontenerów.

   

7. Wybierz pozycję Utwórz, a następnie wybierz pozycję Zakończ.

   

   Po zakończeniu procesu publikowania możesz przejrzeć ustawienia publikowania i edytować je, w razie potrzeby lub opublikować obraz ponownie przy użyciu przycisku Publikuj .

   

   Aby ponownie rozpocząć korzystanie z okna dialogowego Publikowanie, usuń profil publikowania przy użyciu linku Usuń na tej stronie, a następnie ponownie wybierz pozycję Publikuj .

Następne kroki

Teraz możesz ściągnąć kontener z rejestru do dowolnego hosta, który może uruchamiać obrazy platformy Docker, na przykład azure Container Instances.

Dodatkowe zasoby

• Opracowywanie kontenerów w programie Visual Studio
• Rozwiązywanie problemów związanych z opracowywaniem zwartości w programie Visual Studio przy użyciu platformy Docker
• Repozytorium usługi GitHub dla narzędzi kontenerów programu Visual Studio