Руководство. Создание приложения ASP.NET Core с помощью React в Visual Studio

Статья
01/09/2025

В этой статье вы узнаете, как создать проект ASP.NET Core для работы в качестве серверной части API и проекта React, который будет выступать в качестве пользовательского интерфейса.

В настоящее время Visual Studio включает шаблоны ASP.NET Core Single Page Application (SPA), поддерживающие Angular и React. Шаблоны предоставляют встроенную папку клиентского приложения в проектах ASP.NET Core, содержащих базовые файлы и папки каждой платформы.

Метод, описанный в этой статье, можно использовать для создания ASP.NET одностраничных приложений core, которые:

Поместите клиентское приложение в отдельный проект вне проекта ASP.NET Core
Создание клиентского проекта на основе платформы CLI, установленной на компьютере

Заметка

В этой статье описывается процесс создания проекта с помощью обновленного шаблона в Visual Studio 2022 версии 17.11, который использует интерфейс командной строки Vite. Vite определяет версию React с помощью зависимостей проекта, например настроенных в package.json.

Необходимые условия

Visual Studio 2022 версии 17.11 или более поздней версии с установленной рабочей нагрузкой ASP.NET и веб-разработки. Перейдите на страницу загрузки Visual Studio, чтобы бесплатно установить ее. Если вам нужно установить рабочую нагрузку, и вы уже имеете Visual Studio, перейдите в раздел Tools>Get Tools and Features..., который открывает Установщик Visual Studio. Выберите компонент ASP.NET и веб-разработка, а затем выберите Изменить.
npm (https://www.npmjs.com/), который входит в состав Node.js

Создание интерфейсного приложения

В окне "Пуск" выберите Создать проект.
Найдите React в строке поиска в верхней части, а затем выберите React и ASP.NET Core. Этот шаблон является шаблоном JavaScript.
Назовите проект ReactWithASP, а затем выберите Далее.

В диалоговом окне "Дополнительные сведения" убедитесь, что включена настройка для использования HTTPS. В большинстве случаев оставьте остальные параметры значениями по умолчанию.
Выберите Создать.

Обозреватель решений отображает следующие сведения о проекте:

По сравнению с автономным шаблоном Reactвы увидите некоторые новые и измененные файлы для интеграции с ASP.NET Core:
- vite.config.js
- App.js (изменено)
- App.test.js (изменено)
Выберите установленный браузер на панели инструментов отладки, например Chrome или Microsoft Edge.

Если нужный браузер еще не установлен, сначала установите браузер и выберите его.

Установите свойства проекта

В обозревателе решений щелкните правой кнопкой мыши проект ReactWithASP.Server и выберите Свойства.
На странице "Свойства" откройте вкладку "Отладка" и выберите параметр "Открыть интерфейс профилей запуска отладки". Снимите флажок запуск браузера для профиля https или профиля с именем проекта ASP.NET Core, если он присутствует.

Это значение предотвращает открытие веб-страницы с исходными данными о погоде.

Заметка

В Visual Studio launch.json хранятся параметры запуска, связанные с кнопкой "Пуск" на панели инструментов отладки. В настоящее время launch.json должен находиться в папке .vscode.
Щелкните правой кнопкой мыши решение в обозревателе решений и выберите Свойства. Убедитесь, что для параметров запуска проекта задано значение Несколько проектов, а действие для обоих проектов — Запустить.

Запуск проекта

Нажмите F5 или нажмите кнопку "Пуск" в верхней части окна, чтобы запустить приложение. Отображаются две командные строки:

Запущенный проект API ASP.NET Core
Интерфейс командной строки Vite, показывающий сообщение, например VITE v4.4.9 ready in 780 ms

Заметка

Проверьте вывод консоли на наличие сообщений. Например, может появиться сообщение об обновлении Node.js.

Приложение React отображается и заполняется через API (порт localhost может отличаться от снимка экрана).

снимок экрана: приложение прогноза погоды.

Если приложение не отображается, ознакомьтесь с руководством по устранению неполадок.

Публикация проекта

В обозревателе решений щелкните правой кнопкой мыши проект ReactWithASP.Server и выберите Добавить ссылку на проект.

Убедитесь, что выбран проект reactwithasp.client.
Нажмите кнопку ОК.
Щелкните правой кнопкой мыши проект ASP.NET Core и выберите Изменить файл проекта.

Это открывает файл .csproj для проекта.
В файле .csproj убедитесь, что ссылка на проект содержит элемент <ReferenceOutputAssembly> со значением false.

Эта ссылка должна выглядеть следующим образом.
```
 <ProjectReference Include="..\reactwithasp.client\reactwithasp.client.esproj">
   <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
 </ProjectReference>
```
Щелкните правой кнопкой мыши проект ASP.NET Core и выберите перезагрузить проект, если этот параметр доступен.

В Program.csубедитесь, что следующий код присутствует.

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

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

Чтобы опубликовать, щелкните правой кнопкой мыши проект ASP.NET Core, выберите Опубликоватьи выберите параметры, соответствующие требуемому сценарию публикации, например Azure, публикация в папку и т. д.

Процесс публикации занимает больше времени, чем только для проекта ASP.NET Core, так как команда npm run build вызывается при публикации. Команда сборки BuildCommand по умолчанию выполняетсяnpm run build.

При публикации в папке см. структуру каталогов Core ASP.NET дополнительные сведения о файлах, добавленных в папку публикации.

Устранение неполадок

Ошибка прокси-сервера

Может появиться следующая ошибка:

[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)

Если вы видите эту проблему, скорее всего, интерфейсная часть запущена перед серверной частью.

Как только вы увидите командную строку серверной части в рабочем состоянии, просто перезагрузите приложение React в браузере.
Кроме того, убедитесь, что серверная часть настроена на запуск перед фронтендом. Чтобы проверить, выберите решение в обозревателе решений, выберите Свойства в меню проектов. Затем выберите Настроить запускаемые проекты и убедитесь, что внутренний проект ASP.NET Core сначала находится в списке. Если он не первый, выберите проект и нажмите кнопку СТРЕЛКА ВВЕРХ, чтобы сделать его первым проектом в списке запуска.

Проверка портов

Если данные о погоде не загружаются правильно, может потребоваться проверить правильность портов.

Убедитесь, что номера портов совпадают. Перейдите к файлу launchSettings.json в проекте ASP.NET Core ReactWithASP.Server (в папке Properties ). Получите номер порта из свойства applicationUrl.

Если есть несколько свойств applicationUrl, найдите один с помощью конечной точки https. Похоже на https://localhost:7183.
Откройте файл vite.config.js проекта React. Обновите свойство target, чтобы он соответствовал свойству applicationUrl в launchSettings.json. Обновленное значение выглядит примерно так:
```
target: 'https://localhost:7183/',
```

Ошибка конфиденциальности

Вы можете увидеть следующую ошибку сертификата:

Your connection isn't private

Попробуйте удалить сертификаты React из %appdata%\local\asp.net\https или %appdata%\roaming\asp.net\https, а затем повторите попытку.

Докер

Если вы создадите проект с поддержкой Docker включена, сделайте следующее:

После загрузки приложения получите порт HTTPS Docker с помощью окна контейнеров в Visual Studio. Перейдите на вкладку среды или порты .
Откройте файл vite.config.js проекта React. Обновите переменную target, чтобы он соответствовал порту HTTPS в окне "Контейнеры". Например, в следующем коде:
```
const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
   env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7143';
```
измените https://localhost:7143 на соответствующий порт HTTPS (в этом примере https://localhost:44307).
Перезапустите приложение.

Дальнейшие действия

Дополнительные сведения о приложениях SPA в ASP.NET Core см. в разделе React в разделе Разработка одностраничных приложений. Связанная статья содержит дополнительный контекст для файлов проекта, таких как aspnetcore-https.js, хотя сведения о реализации отличаются в зависимости от различий шаблонов. Например, вместо папки ClientApp файлы React содержатся в отдельном проекте.

Для получения сведений о MSBuild, относящихся к клиентскому проекту, см. раздел "Свойства MSBuild для JSPS".

Поделиться через