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

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

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

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

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

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

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

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

1. Создайте проект с помощью шаблона React и ASP.NET Core .

   

2. На экране Дополнительные сведения вы не сможете выбрать параметр Включить поддержку Docker, но не беспокойтесь, эту поддержку можно добавить позже.

   

   Visual Studio создает два проекта — один для клиентского кода React JavaScript, а другой — для кода сервера ASP.NET Core C#.

3. Щелкните правой кнопкой мыши узел проекта сервера и выберите "Добавить поддержку Docker", чтобы добавить>Dockerfile в проект.

   

4. Выберите тип контейнера.

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

1. Создайте проект, используя шаблон ASP.NET Core с React.js.

   

2. На экране Дополнительные сведения вы не сможете выбрать параметр Включить поддержку Docker, но не беспокойтесь, эту поддержку можно добавить позже.

   

3. Щелкните правой кнопкой мыши узел проекта и выберите Добавить >Поддержка Docker, чтобы добавить файл Dockerfile в проект.

   

4. Выберите тип контейнера.

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

Изменение файла 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. Чтобы учесть эту ситуацию, сделайте следующее:

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

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

1. Добавьте следующие строки для установки 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/customizecontainer to learn how to customize your debug container and how Visual Studio uses this Dockerfile to build your images for faster debugging.

FROM mcr.microsoft.com/dotnet/aspnet:8.0 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:8.0 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
ARG BUILD_CONFIGURATION=Release
WORKDIR /src
COPY ["reactapp1.client/nuget.config", "reactapp1.client/"]
COPY ["ReactApp1.Server/ReactApp1.Server.csproj", "ReactApp1.Server/"]
COPY ["reactapp1.client/reactapp1.client.esproj", "reactapp1.client/"]
RUN dotnet restore "./ReactApp1.Server/./ReactApp1.Server.csproj"
COPY . .
WORKDIR "/src/ReactApp1.Server"
RUN dotnet build "./ReactApp1.Server.csproj" -c $BUILD_CONFIGURATION -o /app/build

FROM build AS publish
ARG BUILD_CONFIGURATION=Release
RUN dotnet publish "./ReactApp1.Server.csproj" -c $BUILD_CONFIGURATION -o /app/publish /p:UseAppHost=false

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "ReactApp1.Server.dll"]

В Visual Studio 2022 версии 17.0 до 17.7 он должен выглядеть следующим образом:

#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:6.0 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:6.0 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/core/aspnet и содержит инструкции по изменению базового образа путем сборки проекта и добавления его в контейнер.

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

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

 <DockerfileFastModeStage>base</DockerfileFastModeStage>

Примечание.

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

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

1. Добавьте # escape=` в первую строку файла "Dockerfile".

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

3. Добавьте следующую строку до и после FROM ... build.

   COPY --from=downloadnodejs C:\nodejs\ C:\Windows\system32\
   

4. Теперь весь файл "Dockerfile" должен выглядеть примерно так:

   #See https://aka.ms/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images   for faster debugging.
   
   #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
   # escape=`
   FROM mcr.microsoft.com/powershell:nanoserver-1809 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/aspnet:6.0 AS base
   WORKDIR /app
   EXPOSE 80
   EXPOSE 443
   COPY --from=downloadnodejs C:\\nodejs C:\\Windows\\system32
   
   FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
   COPY --from=downloadnodejs C:\\nodejs C:\\Windows\\system32
   WORKDIR /src
   COPY ["Project1-SPA-Windows/Project1-SPA-Windows.csproj", "Project1-SPA-Windows/"]
   RUN dotnet restore "Project1-SPA-Windows/Project1-SPA-Windows.csproj"
   COPY . .
   WORKDIR "/src/Project1-SPA-Windows"
   RUN dotnet build "Project1-SPA-Windows.csproj" -c Release -o /app/build
   
   FROM build AS publish
   RUN dotnet publish "Project1-SPA-Windows.csproj" -c Release -o /app/publish /p:UseAppHost=false
   
   FROM base AS final
   WORKDIR /app
   COPY --from=publish /app/publish .
   ENTRYPOINT ["dotnet", "Project1-SPA-Windows.dll"]
   

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

Отладка

С помощью Visual Studio 2022 версии 17.8 и более поздних версий и шаблона React и ASP.NET Core проекты уже настроены для запуска клиентских и серверных проектов с поддержкой отладки.

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

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

1. Выполните сборку проекта, если он еще не собран.

2. Откройте командную строку разработчика 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 файле.

3. Откройте раскрывающийся список, содержащий профили отладки (рядом с зеленым значком треугольника или кнопкой "Пуск") и выберите свойства отладки {ProjectName} и выберите профиль Docker.

4. Проверьте раздел Переменные среды и добавьте следующие переменные среды, если их еще нет:

   ASPNETCORE_ENVIRONMENT=Development,ASPNETCORE_HOSTINGSTARTUPASSEMBLIES=Microsoft.AspNetCore.SpaProxy

5. Для URL-адреса задайте https://localhost:{proxy-port}, где {proxy-port} является портом прокси-сервера (из шага 1).

   

   Это действие изменяет запись Docker в launchSettings.json файле и запускает правильный URL-адрес локального прокси-сервера, работающего на узле. launchSettings.json Найдите файл в Обозреватель решений в разделе "Свойства".

6. Отобразиться примерно следующий код:

   "profiles": {
      "Docker": {
         "commandName": "Docker",
         "launchBrowser": true,
         "environmentVariables": {
           "ASPNETCORE_ENVIRONMENT": "Development",
           "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
         },
         "launchUrl": "https://localhost:44407",
         "useSSL": true
      }
   }
   

   Внимание

   Не устанавливайте параметр publishAllPortstrue параметров запуска, если вы используете прокси-сервер. Этот параметр опубликует все открытые порты на случайном порту, который не будет работать при настройке определенного порта в прокси-сервере SPA.

7. Откройте файл ClientApp/src/setupProxy.js и измените строку, которая задает целевой объект для использования localhost адреса и порта в контейнере. Порт можно найти на вкладке Порты окна Контейнеры.

   const target =  'https://localhost:{container-port}';
   

   Если вы используете HTTPS, обязательно выберите правильный порт для HTTPS, который равен 443 в этом руководстве.

8. Запустите приложение с отладкой (F5).

   

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

9. Убедитесь, что вы можете попасть в точку останова в коде JavaScript на стороне клиента, задав ее в ClientApp/src/components/Counter.js в функции incrementCounter, а затем попытайтесь достичь точки останова, нажав кнопку Шаг приращения на странице счетчиков.

   

10. Затем попробуйте установить точку останова в коде ASP.NET Core на стороне сервера. Задайте точку останова в WeatherController.cs методе Get и попробуйте добавить /weatherforecast в базовый localhost URL-адрес и URL-адрес порта для активации этого кода.

    

11. Если порт контейнера изменяется, что может произойти, если вы вносите значительное изменение, например обновление launchSettings.json или обновление профиля запуска отладки в интегрированной среде разработки, необходимо обновить порт, setupProxy.js а также перезапустить прокси-сервер. Завершите текущий прокси-сервер (с помощью комбинации клавиш CTRL+C в командном окне, где он выполняется), а затем перезапустите его с помощью той же команды npm run start.

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

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

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

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

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

Примечание.

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

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

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

1. Измените раскрывающийся список конфигурации на выпуск и создайте приложение.

2. В обозревателе решений щелкните правой кнопкой проект и выберите Опубликовать.

3. В диалоговом окне "Целевой объект публикации" выберите Реестр контейнеров Docker.

   

4. Далее выберите Реестр контейнеров Azure.

   

5. Выберите Создать Реестр контейнеров Azure.

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

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

   

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

   

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

   

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

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

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

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

• Разработка с помощью контейнеров в Visual Studio
• Устранение неполадок при разработке с Docker в Visual Studio
• Репозиторий GitHub со средствами Visual Studio для контейнеров