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 aplikacja (SPA) i publikować je w usłudze Azure Container Registry, Docker Hub, Azure App Service lub własnym rejestrze kontenerów. W tym artykule publikujemy w usłudze Azure Container Registry.
Warunki wstępne
- Docker Desktop
- programu Visual Studio 2019 za pomocą Web Development, obciążenia Narzędzi platformy Azure i/lub obciążenia programowania dla wielu platform platformy .NET Core
- .NET Core 3.1 Development Tools na potrzeby programowania za pomocą platformy .NET Core 3.1.
- Aby opublikować w usłudze Azure Container Registry, potrzebna jest subskrypcja platformy Azure. utwórz konto bezpłatnej wersji próbnej.
- Node.js
- Aby używać obrazów Docker wymienionych w tym artykule dla kontenerów Windows, wymagany jest system Windows 10 w wersji 1809 lub nowszej.
- Docker Desktop
- Zestaw programu Visual Studio 2022 z zestawem Web Development, zestawem narzędzi Azure i/lub zestawem programowania międzyplatformowego .NET Core zainstalowanym
- Aby opublikować w usłudze Azure Container Registry, wymagana jest subskrypcja Azure. utwórz konto bezpłatnej wersji próbnej.
- Node.js
- Aby używać obrazów platformy Docker, o których mowa w tym artykule, kontenery Windows wymagają systemu Windows 10 w wersji 1809 lub nowszej.
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
Utwórz nowy projekt przy użyciu szablonu ASP.NET Core z React.js.
Na ekranie Dodatkowe informacje nie można wybrać Włącz obsługę Docker, ale nie martw się, możesz dodać tę obsługę później.
Kliknij prawym przyciskiem myszy na węzeł projektu i wybierz pozycję Dodaj>Docker Support, aby dodać plik Dockerfile do swojego projektu.
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.
Notatka
Jeśli używasz najnowszych szablonów projektów w programie Visual Studio 2022 lub nowszym, nie musisz modyfikować pliku Dockerfile.
Modyfikowanie pliku Dockerfile (kontenery systemu Linux)
W projekcie zostanie utworzony dockerfile, przepis na utworzenie końcowego obrazu platformy Docker. Odwołaj się do dokumentacji Dockerfile, aby zrozumieć polecenia w nim zawarte.
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 Konfiguracja dla HTTPS okna dialogowego nowego projektu , plik Dockerfile uwidacznia dwa porty. Jeden port jest używany na potrzeby ruchu HTTP; drugi port jest używany dla 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:
- W pliku Dockerfile usuń wiersz
USER app
. - 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.
- Edytuj
launchSettings.json
, aby zmienić odwołania do portów na 80 i 443; Zastąp wartość 8080 wartością 80 dla protokołu HTTP i 8081 wartością 443 dla protokołu HTTPS.
W przypadku wszystkich wersji platformy .NET wykonaj następujące kroki, aby zaktualizować plik Dockerfile do zainstalowania Node.js:
- 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, aby dodać instalację menedżera pakietów Node
npm.exe
do obrazu podstawowego, jak i w sekcjibuild
.
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
Dockerfile powinny 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.
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"]
Poprzedni Dockerfile jest oparty na obrazie mcr.microsoft.com/dotnet/aspnet i zawiera instrukcje modyfikowania obrazu podstawowego przez budowanie 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 elementu <PropertyGroup>
:
<DockerfileFastModeStage>base</DockerfileFastModeStage>
Notatka
Wymagana jest zmiana DockerfileFastModeStage, ponieważ tutaj Dockerfile dodaje etap na początku Dockerfile. Aby zoptymalizować wydajność, program Visual Studio używa tryb szybki, 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 skopiują Node.js i npm do kontenera.
Dodawanie
# escape=`
do pierwszego wiersza pliku DockerfileDodaj 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
Dodaj następujący wiersz przed i po
FROM ... build
COPY --from=downloadnodejs C:\nodejs\ C:\Windows\system32\
Kompletny plik Dockerfile powinien teraz wyglądać mniej więcej tak:
# 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"]
Zaktualizuj plik
.dockerignore
, usuwając**/bin
.
Wykonaj następujące kroki, jeśli używasz programu Visual Studio 2022 w wersji 17.8 lub nowszej:
Utwórz nowy projekt przy użyciu szablonu React i ASP.NET Core.
Na ekranie Dodatkowe informacje wybierz pozycję Włącz obsługę kontenerów. Pamiętaj, aby wybrać opcję Dockerfile, ponieważ musisz ręcznie wprowadzić zmiany w tym pliku.
Notatka
W niektórych wersjach programu Visual Studio 2022 ta opcja nie jest włączona, ale 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#.
Jeśli podczas tworzenia projektu nie dodano obsługi kontenera platformy Docker, kliknij prawym przyciskiem myszy węzeł projektu serwera i wybierz pozycję Dodaj>docker Support i upewnij się, że wybrano opcję Dockerfile, aby utworzyć plik Dockerfile.
Wybierz typ kontenera.
Wykonaj następujące kroki dla programu Visual Studio 2022 w wersji 17.0 do 17.7:
Utwórz nowy projekt z ASP.NET Core przy użyciu szablonu React.js.
Na ekranie Dodatkowe informacje nie można wybrać Włącz obsługę Docker, ale nie martw się, możesz dodać tę obsługę później.
Kliknij prawym przyciskiem myszy węzeł projektu i wybierz pozycję Dodaj>Docker Support, aby dodać plik Dockerfile do projektu.
Wybierz typ kontenera.
Debugować
W programie Visual Studio 2022 w wersji 17.9 lub nowszej oraz szablonie React i ASP.NET Core, który używa vite.js
, projekty są już skonfigurowane do uruchamiania projektów klienta i serwera z obsługą debugowania, ale należy skonfigurować odpowiedni port serwera proxy aplikacji jednostronicowej (SPA) do uzyskiwania dostępu do serwera ASP.NET Core uruchomionego w kontenerze. Port hosta można uzyskać z okna Kontenery w programie Visual Studio i ustawić go w projekcie React, jak opisano w Tworzenie aplikacji React - Docker.
Możesz również wyłączyć uruchamianie w przeglądarce serwera, który jest skonfigurowany do otwierania w Swagger, co nie jest wymagane w tym scenariuszu. Aby wyłączyć uruchamianie przeglądarki, otwórz Właściwości (Alt+Enter), przejdź do karty Debug, a następnie kliknij link Otwórz interfejs profili uruchamiania debugowania, i wyczyść pole wyboru Uruchom przeglądarkę.
Jeśli używasz starszej wersji programu Visual Studio 2022, 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 jednostronicowych (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.
Skompiluj projekt, jeśli nie został jeszcze skompilowany.
Otwórz wiersz polecenia dewelopera programu Visual Studio, przejdź do folderu ClientApp w projekcie, a następnie nadaj polecenie
npm run start
. Powinna zostać wyświetlona zawartość podobna do następującej: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
Notatka
Zanotuj lokalny adres URL. Należy to podać w profilu uruchamiania debugowania, który jest przechowywany w pliku
launchSettings.json
.Otwórz listę rozwijaną zawierającą profile debugowania (obok ikony zielonego trójkąta lub przycisk Rozpocznij), następnie wybierz pozycję {ProjectName} Właściwości debugowaniai profil Docker .
Sprawdź sekcję Zmienne środowiskowe i dodaj następujące zmienne środowiskowe, jeśli jeszcze nie istnieją:
ASPNETCORE_ENVIRONMENT=Development,ASPNETCORE_HOSTINGSTARTUPASSEMBLIES=Microsoft.AspNetCore.SpaProxy
Ustaw adres URL na
https://localhost:{proxy-port}
, gdzie{proxy-port}
jest portem z serwera proxy (z kroku 1).Ta akcja powoduje zmianę wpisu platformy Docker w pliku
launchSettings.json
i uruchomienie poprawnego adresu URL lokalnego serwera proxy uruchomionego na hoście. Znajdź pliklaunchSettings.json
w Eksploratorze rozwiązań w obszarze właściwości .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żny
Nie należy ustawiać opcji ustawień uruchamiania
publishAllPorts
natrue
, jeśli używasz serwera proxy. Ta opcja publikuje wszystkie uwidocznione porty na losowo wybrany port, co nie zadziała w momencie ustawienia określonego portu na serwerze proxy SPA.Otwórz plik ClientApp/src/setupProxy.js i zmień wiersz, który ustawia obiekt docelowy na użycie adresu
localhost
i portu w kontenerze. Port można znaleźć na karcie Porty w oknie Kontenery.const target = 'https://localhost:{container-port}';
Jeśli używasz protokołu HTTPS, pamiętaj, aby wybrać odpowiedni port, który w tym samouczku wynosi 443.
Uruchom aplikację z debugowaniem (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.
Sprawdź, czy można osiągnąć punkt przerwania w klienckim kodzie JavaScript, ustawiając punkt przerwania w ClientApp/src/components/Counter.js w funkcji incrementCounter, a następnie spróbuj osiągnąć punkt przerwania, klikając przycisk Zwiększ na stronie Liczniki.
Następnie spróbuj użyć punktu przerwania w kodzie po stronie serwera ASP.NET Core. Ustaw punkt przerwania w
WeatherController.cs
w metodzieGet
i spróbuj dołączyć/weatherforecast
do podstawowegolocalhost
i adresu URL portu, aby aktywować ten kod.Jeśli port kontenera ulegnie zmianie, co może się zdarzyć, jeśli wprowadzisz znaczącą zmianę, na przykład zaktualizowanie
launchSettings.json
lub zaktualizowanie profilu uruchamiania debugowania w środowisku IDE, należy zaktualizować port wsetupProxy.js
, 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 polecenianpm run start
.
Wybierz Docker z listy rozwijanej debugowania na pasku narzędzi i rozpocznij debugowanie aplikacji. Może zostać wyświetlony komunikat z monitem o zaufanie certyfikatowi; wybierz opcję zaufania certyfikatowi, aby kontynuować. Podczas pierwszej kompilacji platforma Docker pobiera obrazy podstawowe, więc może to potrwać nieco dłużej.
Opcja Container Tools w oknie Output pokazuje, jakie akcje mają miejsce. Powinny zostać wyświetlone kroki instalacji skojarzone z npm.exe.
W przeglądarce zostanie wyświetlona strona główna aplikacji.
Okno kontenerów
Otwórz okno narzędzia Kontenery. Można go znaleźć w menu pod View>Other Windows>Containerslub naciśnij Ctrl+Q i zacznij wpisywać containers
w polu do wyszukiwania, a następnie z wyników wybierz okno Kontenery. Gdy pojawi się okno, zadokuj je na dole pod panelem edytora.
W oknie Containers 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 Użyj okna Kontenery.
Kliknij kartę Files i rozwiń folder app
, aby wyświetlić opublikowane pliki aplikacji.
Możesz również wyświetlić obrazy i sprawdzić informacje o nich. Wybierz kartę Obrazy, znajdź odpowiedni dla swojego projektu, a następnie wybierz kartę Szczegóły, aby wyświetlić plik JSON zawierający informacje o obrazie.
Notatka
Obraz deweloperski nie zawiera plików binarnych aplikacji i innej zawartości, ponieważ konfiguracje debugowania używają podłączania 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.
Zmień listę rozwijaną konfiguracji na Release i skompiluj aplikację.
Kliknij prawym przyciskiem myszy projekt w eksploratorze rozwiązań i wybierz pozycję Publikuj.
W oknie dialogowym celu publikacji wybierz Docker Container Registry.
Następnie wybierz pozycję Azure Container Registry.
Wybierz pozycję Utwórz nową usługę Azure Container Registry.
Wypełnij żądane wartości na ekranie Utwórz nową usługę Azure Container Registry.
Ustawienie Sugerowana wartość Opis prefiks DNS Globalnie unikatowa nazwa Nazwa, która jednoznacznie identyfikuje rejestr kontenerów. Subskrypcja Wybieranie subskrypcji Subskrypcja platformy Azure do wykorzystania. grupy zasobów GrupaZasobówMoja Nazwa grupy zasobów, w której ma zostać utworzony rejestr kontenerów. Wybierz pozycję Nowy, aby utworzyć nową grupę zasobów. SKU Norma Poziom usługi rejestru kontenerów lokalizacja rejestru Lokalizacja blisko ciebie Wybierz lokalizację w regionie blisko Ciebie lub w pobliżu innych usług korzystających z rejestru kontenerów. Wybierz Utwórz, a następnie wybierz Zakończ.
Po zakończeniu procesu publikowania możesz przejrzeć ustawienia publikowania i edytować je, w razie potrzeby lub ponownie opublikować obraz przy użyciu przycisku Publikuj.
Aby ponownie skorzystać z okna dialogowego Publikuj, usuń profil publikacji, korzystając z linku Usuń na tej stronie, a następnie wybierz ponownie Publikuj.
Zmień listę rozwijaną konfiguracji na Release i skompiluj aplikację.
Kliknij prawym przyciskiem projekt w Eksploratorze rozwiązań i wybierz pozycję Publikuj.
W oknie dialogowym publikowanie elementu docelowego wybierz pozycję Docker Container Registry.
Następnie wybierz pozycję Azure Container Registry.
Wybierz pozycję Utwórz nową usługę Azure Container Registry.
Wypełnij żądane wartości na ekranie Utwórz nową usługę Azure Container Registry.
Ustawienie Sugerowana wartość Opis prefiks DNS Globalnie unikatowa nazwa Nazwa, która jednoznacznie identyfikuje rejestr kontenerów. Subskrypcja Wybieranie subskrypcji Subskrypcja platformy Azure, którą można użyć. grupa zasobów myResourceGroup (moja grupa zasobów) Nazwa grupy zasobów, w której ma zostać utworzony rejestr kontenerów. Wybierz pozycję Nowy, aby utworzyć nową grupę zasobów. SKU Norma Poziom usługi rejestru kontenerów lokalizacja rejestru Lokalizacja blisko Ciebie Wybierz lokalizację w regionie blisko Ciebie lub w pobliżu innych usług korzystających z rejestru kontenerów. Wybierz Utwórz, a następnie wybierz Zakończ.
Po zakończeniu procesu publikowania możesz przejrzeć ustawienia publikowania i edytować je, w razie potrzeby lub ponownie opublikować obraz przy użyciu przycisku Publikuj.
Aby ponownie rozpocząć korzystanie z okna dialogowego Publikuj, usuń profil publikowania przy użyciu linku Usuń na tej stronie, a następnie wybierz ponownie Publikuj.
Następne kroki
Teraz możesz pobrać kontener z rejestru na dowolny host, który może uruchamiać obrazy Dockera, na przykład Azure Container Instances.