Краткий старт: Использование Docker с одностраничным приложением React в Visual Studio

Статья
01/27/2025

С помощью Visual Studio можно легко создавать, отлаживать и запускать контейнерные приложения ASP.NET Core, включая приложения JavaScript на стороне клиента, такие как React.js одностраничное приложение (SPA), и публиковать их в Реестре контейнеров Azure, Центре Docker, Службе приложений Azure или собственном реестре контейнеров. В этой статье мы публикуем реестр контейнеров Azure.

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

Docker Desktop
Visual Studio 2019 с рабочей нагрузкой веб-разработки, нагрузкой инструментов Azure и (или) рабочей нагрузкой кроссплатформенной разработки .NET Core
средства разработки .NET Core 3.1 для разработки с помощью .NET Core 3.1.
Чтобы опубликовать в Реестре контейнеров Azure, необходима подписка Azure. зарегистрируйте бесплатную пробную версию.
Node.js
Чтобы использовать образы Docker, указанные в этой статье, для контейнеров Windows требуется Windows 10 версии 1809 или более поздней.

Docker Desktop
Visual Studio 2022 с установленной рабочей нагрузкой разработки веб-приложений, рабочей нагрузкой средств Azure и/или кроссплатформенной рабочей нагрузкой разработки .NET Core
Чтобы опубликовать в Реестре контейнеров Azure, требуется подписка Azure. зарегистрируйте бесплатную пробную версию.
Node.js
Для использования образов Docker, упомянутых в этой статье, для контейнеров Windows необходима Windows 10 версии 1809 или более поздней.

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

Для установки Docker сначала просмотрите сведения в Docker Desktop для Windows: Что знать перед установкой. Затем установите Docker Desktop.

Создание проекта и добавление поддержки Docker

Создайте проект с помощью ASP.NET Core с шаблоном React.js.
На экране Дополнительные сведения нельзя выбрать Включить поддержку Docker, но не беспокойтесь, вы сможете добавить эту поддержку позже.
Щелкните правой кнопкой мыши на узле проекта и выберите Добавить>поддержку Docker, чтобы добавить Dockerfile в проект.
Выберите тип контейнера.

Следующий шаг отличается в зависимости от того, используете ли вы контейнеры Linux или контейнеры Windows.

Заметка

Если вы используете последние шаблоны проектов в Visual Studio 2022 или более поздней версии, вам не нужно изменять Dockerfile.

Изменение Файла Dockerfile (контейнеров Linux)

В проекте создается Dockerfile, рецепт создания окончательного образа Docker. Справочник по Dockerfile поможет вам понять команды, содержащиеся в нем.

По умолчанию Dockerfile использует базовый образ для запуска контейнера, но если вы также хотите запустить приложение Node.js на нем, необходимо установить Node.js, что означает добавление некоторых команд установки в нескольких местах в Dockerfile. Для команд установки требуются повышенные разрешения, так как изменения влияют на привилегированные системные файлы и папки контейнера.

Если установлен флажок диалогового окна нового проекта для настройки HTTPS, Dockerfile открывает два порта. Один порт используется для трафика HTTP; другой порт используется для HTTPS. Если флажок не установлен, для HTTP-трафика предоставляется один порт (80).

Если вы ориентируетесь на .NET 8 или более поздние версии, Visual Studio по умолчанию создает Dockerfile, используя обычную учетную запись пользователя (найдите строку USER app), но у этой учетной записи нет повышенных разрешений, необходимых для установки Node.js. Чтобы учесть эту ситуацию, сделайте следующее:

В Dockerfile удалите строку USER app.
Измените порты, предоставляемые в первом разделе Dockerfile на порт 80, — для HTTP-запросов и (если вы решили поддерживать HTTPS при создании проекта) 443 для HTTPS-запросов.
Измените launchSettings.json, чтобы изменить ссылки на порты на 80 и 443; замените 8080 на 80 для HTTP и 8081 на 443 для HTTPS.

Для всех версий .NET выполните следующие действия, чтобы обновить Dockerfile для установки Node.js:

Добавьте следующие строки, чтобы установить curl, Node.js 14.x и определенные необходимые библиотеки Node в контейнере. Не забудьте добавить эти строки в первом разделе, чтобы добавить установку диспетчера пакетов node npm.exe в базовый образ, а также в разделе 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

Теперь Dockerfile должен выглядеть примерно так:

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

Предыдущий Dockerfile основан на образе mcr.microsoft.com/dotnet/aspnet и содержит инструкции по изменению базового образа, создав проект и добавив его в контейнер.

Изменение Файла Dockerfile (контейнеров Windows)

Откройте файл проекта, дважды щелкнув по узлу проекта. Затем обновите файл проекта (*.csproj), добавив следующее свойство в качестве дочернего элемента <PropertyGroup>.

 <DockerfileFastModeStage>base</DockerfileFastModeStage>

Заметка

Изменение DockerfileFastModeStage необходимо, так как данный Dockerfile здесь добавляет стадию в начало Dockerfile. Для оптимизации производительности Visual Studio использует быстрый режим, но работает только в том случае, если используется правильный этап. По умолчанию используется первый этап в Dockerfile, который в этом примере изменяется с base на что-то другое, чтобы скачать Node.js. Дополнительные сведения о Быстрый режимсм. в разделе Настройка контейнеров Docker в Visual Studio.

Обновите Dockerfile, добавив следующие строки. Эти строки будут копировать Node и npm в контейнер.

Добавьте # escape=` в первую строку Dockerfile

Добавьте следующие строки перед 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

Добавьте следующую строку до и после FROM ... build
```
COPY --from=downloadnodejs C:\nodejs\ C:\Windows\system32\
```

Полный файл Dockerfile должен выглядеть примерно так:

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

Обновите файл .dockerignore, удалив **/bin.

Выполните следующие действия, если вы используете Visual Studio 2022 версии 17.8 или более поздней версии:

Создайте проект с помощью шаблона React и ASP.NET Core.
На экране Дополнительные сведения выберите Включить поддержку контейнеров. Не забудьте выбрать параметр Dockerfile, так как необходимо вручную внести изменения в этот файл.

Заметка

В некоторых версиях Visual Studio 2022 этот параметр не включен, но вы можете добавить эту поддержку позже.

Visual Studio создает два проекта — один для клиентского кода React JavaScript, а другой — для кода сервера ASP.NET Core C#.
Если вы не добавили поддержку контейнеров Docker во время создания проекта, щелкните правой кнопкой мыши узел проекта сервера и выберите Добавить>службу поддержки Docker и обязательно выберите параметр Dockerfile для создания Dockerfile.
Выберите тип контейнера.

Выполните следующие действия для Visual Studio 2022 версии 17.0 до 17.7:

Создайте проект с помощью ASP.NET Core с шаблоном React.js.
На экране Дополнительные сведения нельзя выбрать Включить поддержку Docker, но не беспокойтесь, вы сможете добавить поддержку позднее.
Щелкните правой кнопкой мыши по узлу проекта и выберите Добавить>поддержку Docker, чтобы добавить Dockerfile в проект.
Выберите тип контейнера.

Отлаживать

В Visual Studio 2022 версии 17.9 или более поздней версии, а также шаблон React и ASP.NET Core, использующий vite.js, проекты уже настроены для запуска клиентских и серверных проектов с поддержкой отладки, но необходимо настроить правильный порт для прокси-сервера одностраничного приложения (SPA), чтобы использовать для доступа к серверу ASP.NET Core, работающему в контейнере. Вы можете получить порт узла из окна контейнеров в Visual Studio и задать его в проекте React, как описано в разделе Создание приложения React — Docker.

Вы также можете отключить в браузере запуск сервера, настроенного для открытия с помощью Swagger, что не требуется для этого сценария. Чтобы отключить запуск браузера, откройте свойства (Alt+Enter), перейдите на вкладку Отладка и нажмите на ссылку Открыть UI профилей запуска отладки, и снимите флажок Запуск браузера.

Если вы используете более раннюю версию Visual Studio 2022, продолжайте чтение, чтобы настроить отладку с прокси-сервером одностраничного приложения (SPA).

В проекте используется прокси-сервер SPA во время отладки. См. улучшенные шаблоны одностраничных приложений (SPA) . При отладке клиент JavaScript выполняется на главном компьютере, но код сервера ASP.NET Core выполняется в контейнере. При публикации прокси-сервер не запускается, а клиентский код выполняется на том же сервере, что и код ASP.NET Core. У вас уже есть профиль отладки *Docker, который можно использовать для отладки кода сервера. Для отладки клиентского кода JavaScript можно создать дополнительный профиль отладки. При отладке JavaScript также необходимо вручную запустить прокси-сервер из командной строки. Вы можете оставить его работающим через несколько сеансов отладки.

Создайте проект, если он еще не создан.
Откройте командную строку разработки Visual Studio, перейдите в папку ClientApp в проекте, а затем предоставьте команду npm run start. Вы должны увидеть примерно следующее:
```
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
```
Заметка

Обратите внимание на локальный URL-адрес. Это необходимо указать в профиле запуска отладки, который хранится в файле launchSettings.json.
Откройте раскрывающийся список, содержащий профили отладки (рядом с зеленым значком треугольника или кнопкой "Пуск ") и выберите {ProjectName} Debug Propertiesи выберите профиль Docker.
Проверьте раздел переменных среды и добавьте следующие переменные среды, если они еще не присутствуют:

ASPNETCORE_ENVIRONMENT=Development,ASPNETCORE_HOSTINGSTARTUPASSEMBLIES=Microsoft.AspNetCore.SpaProxy
Задайте URL-адрес как https://localhost:{proxy-port}, где {proxy-port} — это порт, полученный с прокси-сервера (с шага 1).

Это действие изменяет запись Docker в файле launchSettings.json и запускает правильный URL-адрес локального прокси-сервера, работающего на узле. Найдите файл launchSettings.json в обозревателе решений в разделе Свойства.
Вы должны увидеть примерно следующий код:
```
"profiles": {
   "Docker": {
      "commandName": "Docker",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development",
        "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
      },
      "launchUrl": "https://localhost:44407",
      "useSSL": true
   }
}
```
Важный

Не устанавливайте параметр параметров запуска publishAllPortstrue, если вы используете прокси-сервер. Этот параметр публикует все предоставленные порты в случайный порт, который не будет работать при установке определенного порта в прокси-сервере SPA.
Откройте файл ClientApp/src/setupProxy.js и измените строку, которая задает целевой объект для использования адреса localhost и порта в контейнере. На вкладке "Порты " окна "Контейнеры " можно найти порт.
```
const target =  'https://localhost:{container-port}';
```
Если вы используете HTTPS, обязательно выберите правильный порт для HTTPS, который равен 443 в этом руководстве.
Запустите приложение с отладкой (F5).

Если при попытке записать выходные файлы сборки происходит ошибка, возможно, потребуется остановить ранее запущенный контейнер, чтобы разблокировать файлы.
Убедитесь, что вы можете попасть в точку останова в коде JavaScript на стороне клиента, задав точку останова в ClientApp/src/components/Counter.js в функции incrementCounter, а затем попробуйте установить точку останова, нажав кнопку Increment на странице Counters.
Затем попробуйте установить точку останова в серверном коде ASP.NET Core. Задайте точку останова в WeatherController.cs в методе Get и попробуйте добавить /weatherforecast в базовый localhost и URL-адрес порта для активации этого кода.
Если порт контейнера изменится, что может произойти, если вы вносите значительное изменение, например обновление launchSettings.json или обновление профиля запуска отладки в интегрированной среде разработки, необходимо обновить порт в setupProxy.js, а также перезапустить прокси-сервер. Завершите текущий прокси-сервер (CTRL+C в командном окне, где он запущен), а затем перезапустите его с помощью той же команды npm run start.

Выберите Docker из раскрывающегося списка отладки на панели инструментов и начните отладку приложения. Может появиться сообщение с запросом на доверие к сертификату; Выберите, чтобы доверять сертификату, чтобы продолжить. При первой сборке Docker скачивает базовые образы, поэтому может занять немного больше времени.

Параметр средств контейнеров в окне выходных данных показывает, какие действия выполняются. Вы увидите шаги установки, связанные с npm.exe.

В браузере показана домашняя страница приложения.

снимок экрана: запуск приложения.

Окно контейнеров

Откройте окно инструментов контейнеров. Его можно найти в меню в разделе View>Other Windows>Контейнерыили нажать клавиши ctrl CTRL+Q и начать вводить containers в поле поиска, а затем выберите контейнеры из результатов. Когда окно появится, закрепите его в нижней части области редактора.

Окно контейнеров отображает запущенные контейнеры и позволяет просматривать сведения о них. Вы можете просматривать переменные среды, метки, порты, тома, файловую систему и журналы. Кнопки панели инструментов позволяют создавать терминал (запрос оболочки) внутри контейнера, присоединять отладчик или удалять неиспользуемые контейнеры. См. раздел Использование окна "Контейнеры".

снимок экрана окна

Щелкните вкладку Файлы и разверните папку app, чтобы просмотреть опубликованные файлы приложения.

Вы также можете просматривать изображения и проверять сведения о них. Перейдите на вкладку "Изображения", найдите нужное изображение для вашего проекта, а затем выберите вкладку "Сведения", чтобы просмотреть json-файл, содержащий информацию об изображении.

снимок экрана окна

Заметка

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

Публикация образов Docker

После завершения процесса разработки и отладки приложения можно создать рабочий образ приложения.

Измените раскрывающийся список конфигурации на Release и создайте приложение.
Щелкните проект правой кнопкой мыши в Обозревателе решений и выберите Опубликовать.
В диалоговом окне "Целевой объект публикации" выберите Реестр контейнеров Docker.
Затем выберите реестр контейнеров Azure.
Выберите Создать новый реестр контейнеров Azure.

Введите нужные значения на экране Создание нового реестра контейнеров Azure.

Настройка	Предлагаемое значение	Описание
префикс DNS	Глобально уникальное имя	Имя, которое однозначно идентифицирует реестр контейнеров.
подписка	Выбор подписки	Используемая подписка Azure.
группа ресурсов	myResourceGroup	Имя группы ресурсов, в которой создается реестр контейнеров. Выберите Новый, чтобы создать новую группу ресурсов.
SKU	Стандарт	Уровень служб реестра контейнеров
Расположение реестра	Расположение, близкое к вам	Выберите расположение в регионе рядом с вами или рядом с другими службами, используюющими реестр контейнеров.

снимок экрана: диалоговое окно создания реестра контейнеров Azure в Visual Studio.

Выберите Создать, а затем выберите Готово.

После завершения процесса публикации можно просмотреть параметры публикации и изменить их при необходимости или снова опубликовать изображение с помощью кнопки "Опубликовать".

Чтобы снова использовать диалоговое окно публикации, удалите профиль публикации с помощью ссылки Удалить на этой странице, а затем снова выберите Опубликовать.

Измените раскрывающийся список конфигурации на Release и соберите приложение.
Щелкните правой кнопкой мыши на вашем проекте в Обозревателе решений и выберите Опубликовать.
В диалоговом окне "Целевой объект публикации" выберите Реестр контейнеров Docker.
Затем выберите реестр контейнеров Azure.
Выберите Создать новый реестр контейнеров Azure.

Введите нужные значения на экране Создание нового реестра контейнеров Azure.

Настройка	Предлагаемое значение	Описание
префикс DNS	Глобально уникальное имя	Имя, которое однозначно идентифицирует реестр контейнеров.
Подписка	Выбор подписки	Используемая подписка Azure.
группа ресурсов	мояГруппаРесурсов	Имя группы ресурсов, в которой создается реестр контейнеров. Выберите Новая, чтобы создать новую группу ресурсов.
SKU	Стандарт	Уровень служб реестра контейнеров
Расположение реестра	Расположение, близкое к вам	Выберите расположение в регионе рядом с вами или рядом с другими службами, используюющими реестр контейнеров.

снимок экрана: диалоговое окно создания реестра контейнеров Azure в Visual Studio.

Выберите Создать, а затем выберите Готово.

После завершения процесса публикации можно просмотреть параметры публикации и изменить их при необходимости или снова опубликовать изображение с помощью кнопки "Опубликовать".

Снимок экрана, показывающий успешную публикацию

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