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

Статья
05/30/2024

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

Необходимые компоненты

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

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

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

Для установки 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. Для команд установки требуются повышенные разрешения, так как изменения влияют на привилегированные системные файлы и папки контейнера.

Если в диалоговом окне создания проекта установлен флажок Configure for HTTPS (Настроить для трафика HTTPS), Dockerfile будет предоставлять два порта. Один порт используется для трафика HTTP, другой — для HTTPS. Если флажок не установлен, для трафика HTTP будет предоставляться один порт (80).

Если вы используете .NET 8 или более поздней версии, по умолчанию Dockerfile, который Visual Studio создает с помощью обычной учетной записи пользователя (найдите строку 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 и некоторых обязательных библиотек Узлов в контейнере. Обязательно добавьте эти строки в первый раздел, чтобы добавить установку диспетчера npm.exe пакетов Node в базовый образ, а также в 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+ВВОД), перейдите на вкладку "Отладка" и щелкните ссылку Открыть пользовательский интерфейс профилей запуска отладки и снимите флажок "Запустить браузер".

Если вы используете более раннюю версию 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} и выберите профиль 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
   }
}
```
Внимание

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

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

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

В параметре Инструменты контейнера в окне Вывод показано, какие действия выполняются. Вы должны увидеть действия по установке, связанные с npm.exe.

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

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

Окно "Контейнеры"

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

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

Снимок экрана: окно

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

Вы также можете просмотреть образы и сведения о них. Перейдите на вкладку Образы, найдите образ для своего проекта, а затем откройте вкладку Сведения, чтобы просмотреть файл JSON со сведениями об образе.

Снимок экрана: окно

Примечание.

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

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

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

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

Заполните нужные значения на экране Создать реестр контейнеров Azure.

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

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

Выберите Создать, а затем нажмите кнопку Готово.

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

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

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

Заполните нужные значения на экране Создать реестр контейнеров Azure.

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

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

Выберите Создать, а затем нажмите кнопку Готово.

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

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

Следующие шаги

Теперь можно извлечь контейнер из реестра в любой узел, поддерживающий работу образов Docker, например Экземпляры контейнеров Azure.

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

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

Необходимые компоненты

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

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

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

Изменение файла "Dockerfile" (контейнеры Windows)

Отладка

Окно "Контейнеры"

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

Следующие шаги

Дополнительные ресурсы

Обратная связь

Дополнительные ресурсы