Samouczek: tworzenie aplikacji ASP.NET Core za pomocą platformy React w programie Visual Studio

Artykuł
02/07/2024

Z tego artykułu dowiesz się, jak utworzyć projekt ASP.NET Core, który będzie działać jako zaplecze interfejsu API i projekt React, który będzie działać jako interfejs użytkownika.

Obecnie program Visual Studio zawiera szablony aplikacji jednostronicowej (SPA) ASP.NET Core, które obsługują platformę Angular i React. Szablony udostępniają wbudowany folder Aplikacja kliencka w projektach ASP.NET Core, który zawiera podstawowe pliki i foldery każdej struktury.

Możesz użyć metody opisanej w tym artykule, aby utworzyć aplikacje jednostronicowe ASP.NET Core, które:

Umieść aplikację kliencką w osobnym projekcie spoza projektu ASP.NET Core
Tworzenie projektu klienta na podstawie interfejsu wiersza polecenia platformy zainstalowanego na komputerze

Uwaga

W tym artykule opisano proces tworzenia projektu przy użyciu zaktualizowanego szablonu w programie Visual Studio 2022 w wersji 17.8, który używa interfejsu wiersza polecenia vite.

Wymagania wstępne

Program Visual Studio 2022 w wersji 17.8 lub nowszej z zainstalowanym obciążeniem ASP.NET i tworzenie aplikacji internetowych. Przejdź do strony pobierania programu Visual Studio, aby zainstalować ją bezpłatnie. Jeśli musisz zainstalować obciążenie i masz już program Visual Studio, przejdź do pozycji Narzędzia Pobierz narzędzia>i funkcje..., co spowoduje otwarcie Instalator programu Visual Studio. Wybierz obciążenie ASP.NET i tworzenie aplikacji internetowych, a następnie wybierz pozycję Modyfikuj.
npm (https://www.npmjs.com/), który jest dołączony do Node.js
npx (https://www.npmjs.com/package/npx)

Tworzenie aplikacji frontonu

W oknie Start wybierz pozycję Utwórz nowy projekt.
Wyszukaj pozycję React na pasku wyszukiwania u góry, a następnie wybierz pozycję React i ASP.NET Core (wersja zapoznawcza). Ten szablon jest szablonem języka JavaScript.
Nadaj projektowi nazwę ReactWithASP , a następnie wybierz pozycję Utwórz.

Eksplorator rozwiązań przedstawiono następujące informacje o projekcie:

W porównaniu z autonomicznym szablonem react zobaczysz kilka nowych i zmodyfikowanych plików do integracji z platformą ASP.NET Core:
- vite.config.js
- App.js (zmodyfikowane)
- App.test.js (zmodyfikowane)
Wybierz zainstalowaną przeglądarkę na pasku narzędzi Debugowanie, takim jak Chrome lub Microsoft Edge.

Jeśli odpowiednia przeglądarka nie jest jeszcze zainstalowana, najpierw zainstaluj przeglądarkę, a następnie wybierz ją.

Ustawianie właściwości projektu

W Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt ReactWithASP.Server i wybierz polecenie Właściwości.
Na stronie Właściwości otwórz kartę Debugowanie i wybierz opcję Otwórz profile uruchamiania debugowania. Usuń zaznaczenie opcji Uruchom przeglądarkę dla profilu o nazwie po projekcie ASP.NET Core (lub https, jeśli istnieje).

Ta wartość uniemożliwia otwarcie strony internetowej przy użyciu danych o pogodzie źródłowej.

Uwaga

W programie Visual Studio launch.json przechowuje ustawienia uruchamiania skojarzone z przyciskiem Uruchom na pasku narzędzi Debugowanie. Obecnie launch.json musi znajdować się w folderze .vscode.

Uruchamianie projektu

Naciśnij klawisz F5 lub wybierz przycisk Start w górnej części okna, aby uruchomić aplikację. Pojawią się dwa wiersze polecenia:

Uruchomiony projekt interfejsu API platformy ASP.NET Core
Interfejs wiersza polecenia vite przedstawiający komunikat, taki jak VITE v4.4.9 ready in 780 ms

Uwaga

Sprawdź dane wyjściowe konsoli pod kątem komunikatów. Na przykład może pojawić się komunikat o aktualizacji Node.js.

Zostanie wyświetlona i wypełniona za pośrednictwem interfejsu API aplikacja React. Jeśli nie widzisz aplikacji, zobacz Rozwiązywanie problemów.

Publikowanie projektu

W Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt ReactWithASP.Server i wybierz polecenie Dodaj>odwołanie do projektu.

Upewnij się, że wybrano projekt reactwithasp.client .
Wybierz pozycję OK.
Ponownie kliknij prawym przyciskiem myszy projekt ASP.NET Core i wybierz polecenie Edytuj plik projektu.

Spowoduje to otwarcie pliku csproj dla projektu.
W pliku csproj upewnij się, że odwołanie do projektu zawiera <ReferenceOutputAssembly> element z wartością ustawioną na false.

To odwołanie powinno wyglądać podobnie do poniższego.
```
 <ProjectReference Include="..\reactwithasp.client\reactwithasp.client.esproj">
   <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
 </ProjectReference>
```
Kliknij prawym przyciskiem myszy projekt ASP.NET Core i wybierz polecenie Załaduj ponownie projekt , jeśli ta opcja jest dostępna.

W Program.cs upewnij się, że jest obecny następujący kod.

app.UseDefaultFiles();
app.UseStaticFiles();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
   app.UseSwagger();
   app.UseSwaggerUI();
}

Aby opublikować, kliknij prawym przyciskiem myszy projekt ASP.NET Core, wybierz pozycję Publikuj i wybierz opcje, aby dopasować go do żądanego scenariusza publikowania, takiego jak platforma Azure, publikowanie w folderze itp.

Proces publikowania zajmuje więcej czasu niż tylko w przypadku projektu ASP.NET Core, ponieważ npm run build polecenie jest wywoływane podczas publikowania. Polecenie BuildCommand jest domyślnie uruchamiane npm run build .

Rozwiązywanie problemów

Błąd serwera proxy

Może zostać wyświetlony następujący błąd:

[HPM] Error occurred while trying to proxy request /weatherforecast from localhost:4200 to https://localhost:7183 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

Jeśli widzisz ten problem, najprawdopodobniej fronton został uruchomiony przed zapleczem. Po wyświetleniu wiersza polecenia zaplecza i uruchomieniu po prostu odśwież aplikację React w przeglądarce.

Weryfikowanie portów

Jeśli dane pogodowe nie są ładowane poprawnie, może być również konieczne sprawdzenie, czy porty są poprawne.

Upewnij się, że numery portów są zgodne. Przejdź do pliku launch Ustawienia.json w projekcie ASP.NET Core ReactWithASP.Server (w folderze Properties). Pobierz numer portu z applicationUrl właściwości .

Jeśli istnieje wiele applicationUrl właściwości, poszukaj jednej z nich przy użyciu punktu końcowego https . Wygląda podobnie do https://localhost:7183.
Otwórz plik vite.config.js dla projektu React. Zaktualizuj właściwość tak, aby odpowiadała target właściwości podczas uruchamiania applicationUrl Ustawienia.json. Zaktualizowana wartość wygląda podobnie do następującej:
```
target: 'https://localhost:7183/',
```

Błąd prywatności

Może zostać wyświetlony następujący błąd certyfikatu:

Your connection isn't private

Spróbuj usunąć certyfikaty react z folderu %appdata%\local\asp.net\https lub %appdata%\roaming\asp.net\https, a następnie ponów próbę.

Następne kroki

Aby uzyskać więcej informacji na temat aplikacji SPA w ASP.NET Core, zobacz sekcję React w sekcji Tworzenie aplikacji jednostronicowych. Połączony artykuł zawiera dodatkowy kontekst dla plików projektu, takich jak aspnetcore-https.js, chociaż szczegóły implementacji różnią się w zależności od różnic między szablonami. Na przykład zamiast folderu ClientApp pliki React znajdują się w osobnym projekcie.

Aby uzyskać informacje dotyczące programu MSBuild specyficzne dla projektu klienta, zobacz Właściwości programu MSBuild dla programu JSPS.