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
• 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

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 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#.

3. 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.

   

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 z ASP.NET Core przy użyciu szablonu React.js.

   

2. 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.

   

3. Kliknij prawym przyciskiem myszy węzeł projektu i wybierz pozycję Dodaj>Docker Support, aby dodać plik Dockerfile do projektu.

   

4. 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.

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. 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.

3. 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 .

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}, 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ź plik launchSettings.json w Eksploratorze 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żny

   Nie należy ustawiać opcji ustawień uruchamiania publishAllPorts na true, 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.

7. 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.

8. 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.

9. 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.

   

10. Następnie spróbuj użyć punktu przerwania w kodzie po stronie serwera ASP.NET Core. Ustaw punkt przerwania w WeatherController.cs w metodzie Get i spróbuj dołączyć /weatherforecast 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 launchSettings.json lub zaktualizowanie profilu uruchamiania debugowania w środowisku IDE, należy zaktualizować port w setupProxy.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 polecenia npm run start.

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.

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

2. Kliknij prawym przyciskiem projekt w Eksploratorze rozwiązań i wybierz pozycję 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 nową usługę Azure Container Registry.

6. 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.

   

7. 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.

Dodatkowe zasoby

• tworzenie kontenerów za pomocą programu Visual Studio
• Rozwiązywanie problemów z programowaniem w programie Visual Studio przy użyciu platformy Docker
• repozytorium GitHub Narzędzi Kontenerów Visual Studio