Hızlı Başlangıç: Visual Studio'da Tek Sayfalı React Uygulaması ile Docker kullanma

Visual Studio ile tek sayfalı React.js uygulama gibi istemci tarafı JavaScript'e sahip uygulamalar da dahil olmak üzere kapsayıcılı ASP.NET Core uygulamalarını kolayca derleyebilir, hatalarını ayıklayabilir ve çalıştırabilir ve bunları Azure Container Registry, Docker Hub, Azure Uygulaması Service veya kendi Container Registry'nizde yayımlayabilirsiniz. Bu makalede Azure Container Registry'de yayımlıyoruz.

Önkoşullar

• Docker Desktop
• Web Geliştirme, Azure Araçları iş yükü ve/veya .NET Core platformlar arası geliştirme iş yükü yüklü Visual Studio 2022
• Bir Azure aboneliği olan Azure Container Registry'de yayımlamak için. Ücretsiz deneme için kaydolun.
• Node.js
• Windows kapsayıcıları, Windows 10 sürüm 1809 veya üzeri için, bu makalede başvuruda bulunan Docker görüntülerini kullanmak için.

Yükleme ve ayarlama

Docker yüklemesi için öncelikle Windows için Docker Desktop: Yüklemeden önce bilinmesi gerekenler makalesinde yer alan bilgileri gözden geçirin. Ardından Docker Desktop'ı yükleyin.

Proje oluşturma ve Docker desteği ekleme

Visual Studio 2022 sürüm 17.8 veya üzerini kullanıyorsanız şu adımları izleyin:

1. React ve ASP.NET Core şablonunu kullanarak yeni bir proje oluşturun.

   

2. Ek bilgiler ekranında Docker Desteğini Etkinleştir'i seçemezsiniz, ancak endişelenmeyin, bu desteği daha sonra ekleyebilirsiniz.

   

   Visual Studio biri React JavaScript istemci kodu, diğeri de ASP.NET Core C# sunucu kodu için iki proje oluşturur.

3. Sunucu proje düğümüne sağ tıklayın ve Docker Desteği Ekle'yi>seçerek projenize bir Dockerfile ekleyin.

   

4. Kapsayıcı türünü seçin.

Visual Studio 2022 sürüm 17.0 ile 17.7 için aşağıdaki adımları kullanın:

1. React.js şablonuyla ASP.NET Core kullanarak yeni bir proje oluşturun.

   

2. Ek bilgiler ekranında Docker Desteğini Etkinleştir'i seçemezsiniz, ancak endişelenmeyin, bu desteği daha sonra ekleyebilirsiniz.

   

3. Proje düğümüne sağ tıklayın ve Docker Desteği Ekle'yi>seçerek projenize bir Dockerfile ekleyin.

   

4. Kapsayıcı türünü seçin.

Sonraki adım, Linux kapsayıcıları mı yoksa Windows kapsayıcıları mı kullandığınıza bağlı olarak farklıdır.

Dockerfile'ı değiştirme (Linux kapsayıcıları)

Projede son Docker görüntüsü oluşturmaya yönelik bir Dockerfile oluşturulur. içindeki komutları anlamak için Dockerfile başvurusuna bakın.

Varsayılan Dockerfile kapsayıcıyı çalıştırmak için bir temel görüntü kullanır, ancak üzerinde bir Node.js uygulaması da çalıştırmak istediğinizde Node.js yüklemeniz gerekir; başka bir deyişle Dockerfile'da birkaç yere bazı yükleme komutları eklemeniz gerekir. Değişiklikler kapsayıcının ayrıcalıklı sistem dosyalarını ve klasörlerini etkilediğinden, yükleme komutları yükseltilmiş izinler gerektirir.

Yeni proje iletişim kutusunun HTTPS için yapılandır onay kutusu işaretlendiğinde Dockerfile iki bağlantı noktasını kullanıma sunar. HTTP trafiği için bir bağlantı noktası kullanılır; diğer bağlantı noktası HTTPS için kullanılır. Onay kutusu işaretlenmemişse, HTTP trafiği için tek bir bağlantı noktası (80) kullanıma sunulur.

.NET 8 veya üstünü hedef alıyorsanız, Visual Studio'nun normal kullanıcı hesabını kullanarak oluşturduğu varsayılan Dockerfile (satırı USER apparayın) ancak bu hesabın Node.js yüklemek için gereken yükseltilmiş izinleri yoktur. Bu durumu hesaba eklemek için aşağıdakileri yapın:

1. Dockerfile dosyasında satırını USER appsilin.
2. Dockerfile dosyasının ilk bölümünde gösterilen bağlantı noktalarını HTTP istekleri için 80 numaralı bağlantı noktası ve HTTPS istekleri için (projeyi oluştururken HTTPS'yi desteklemeyi seçtiyseniz) 443 olarak değiştirin.
3. Buradaki bağlantı noktası başvurularını 80 ve 443 olarak değiştirmek için düzenleyin launchSettings.json ; 8080'i HTTP için 80 ve HTTPS için 8081'i 443 ile değiştirin.

Tüm .NET sürümleri için Dockerfile'ı Node.js yükleyecek şekilde güncelleştirmek için aşağıdaki adımları kullanın:

1. Kapsayıcıya curl, Node.js 14.x ve belirli gerekli Node kitaplıklarını yüklemek için aşağıdaki satırları ekleyin. Node paket yöneticisinin npm.exe yüklemesini hem temel görüntüye hem de bölümüne eklemek için bu satırları ilk bölümde eklediğinizden build emin olun.

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 şu şekilde görünmelidir:

#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 sürüm 17.0 ile 17.7 sürümlerinde aşağıdakine benzer olmalıdır:

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

Yukarıdaki Dockerfile, mcr.microsoft.com/dotnet/core/aspnet görüntüsünü temel alır ve projenizi oluşturup kapsayıcıya ekleyerek temel görüntüyü değiştirme yönergelerini içerir.

Dockerfile'ı (Windows kapsayıcıları) değiştirme

Proje düğümüne çift tıklayarak proje dosyasını açın ve aşağıdaki özelliği öğesinin alt öğesi olarak ekleyerek proje dosyasını (*.csproj) güncelleştirin <PropertyGroup> :

 <DockerfileFastModeStage>base</DockerfileFastModeStage>

Not

Buradaki Dockerfile, Dockerfile'ın başına bir aşama eklediğinden DockerfileFastModeStage değişikliği gereklidir. Performansı iyileştirmek için Visual Studio Hızlı modu kullanır, ancak yalnızca doğru aşama kullanıldığında çalışır. Varsayılan, Dockerfile dosyasının ilk aşamasıdır ve bu örnekte, Node.js indirmek için başka bir aşamaya değiştirilir base . Hızlı mod hakkında daha fazla açıklama için bkz. Visual Studio'da Docker kapsayıcılarını özelleştirme.

Aşağıdaki satırları ekleyerek Dockerfile dosyasını güncelleştirin. Bu satırlar Node ve 'npm' öğesini kapsayıcıya kopyalar.

1. Dockerfile dosyasının ilk satırına ekleme # escape=`

2. Önce aşağıdaki satırları ekleyin 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. Aşağıdaki satırı önce ve sonra ekleyin FROM ... build

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

4. Dockerfile dosyasının tamamı şu şekilde görünmelidir:

   #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 dosyasını kaldırarak güncelleştirin**/bin.

Hata Ayıklama

Visual Studio 2022 sürüm 17.8 ve üzeri ile React ve ASP.NET Core şablonuyla, projeler hem istemci hem de sunucu projelerini hata ayıklama desteğiyle başlatacak şekilde yapılandırılmıştır.

Visual Studio'nun önceki bir sürümünü kullanıyorsanız, tek sayfalı uygulama (SPA) proxy sunucusuyla hata ayıklamayı ayarlamak için okumaya devam edin.

Proje, hata ayıklama sırasında SPA Proxy'sini kullanır. Bkz . Geliştirilmiş tek sayfalı uygulama (SPA) şablonları. Hata ayıklama sırasında JavaScript istemcisi konak makinede çalışır, ancak ASP.NET Core sunucu kodu kapsayıcıda çalışır. Yayımlandığında, proxy çalıştırılamaz ve istemci kodu ASP.NET Core koduyla aynı sunucuda çalışır. Sunucu kodunda hata ayıklamak için kullanabileceğiniz *Docker hata ayıklama profiliniz zaten var. JavaScript istemci kodunda hata ayıklamak için ek bir hata ayıklama profili oluşturabilirsiniz. Ayrıca JavaScript hatalarını ayıklarken bir komut isteminden ara sunucuyu el ile başlatmanız gerekir. Birden çok hata ayıklama oturumunda çalışır durumda bırakabilirsiniz.

1. Henüz derlenmediyse projeyi derleyin.

2. Visual Studio geliştirme komut istemini açın, projenizdeki ClientApp klasörüne gidin ve komutunu npm run startverin. Şuna benzer bir şey görmeniz gerekir:

   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
   

   Not

   Yerel URL'yi not edin. Bunu dosyanızda launchSettings.json depolanan bir hata ayıklama başlatma profilinde sağlamanız gerekir.

3. Hata ayıklama profilleri içeren açılan listeyi açın (yeşil üçgen simgesinin veya Başlangıç düğmesinin yanında) ve {ProjectName} Hata Ayıklama Özellikleri'ni seçin ve Docker profilini seçin.

4. Ortam değişkenleri bölümünü denetleyin ve henüz yoksa aşağıdaki ortam değişkenlerini ekleyin:

   ASPNETCORE_ENVIRONMENT=Development,ASPNETCORE_HOSTINGSTARTUPASSEMBLIES=Microsoft.AspNetCore.SpaProxy

5. URL'yihttps://localhost:{proxy-port} ara sunucudan bağlantı noktasının olduğu yere {proxy-port} ayarlayın (1. adımdan).

   

   Bu eylem, dosyadaki Docker girdisini launchSettings.json değiştirir ve konakta çalışan yerel ara sunucu için doğru URL'yi başlatır. launchSettings.json Dosyayı Özellikler'in altındaki Çözüm Gezgini'de bulun.

6. Aşağıdaki koda benzer bir şey görmeniz gerekir:

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

   Önemli

   Ara sunucu kullanıyorsanız başlatma ayarları seçeneğini publishAllPortstrue olarak ayarlamayın. Bu seçenek, kullanıma sunulan tüm bağlantı noktalarını rastgele bir bağlantı noktasına yayımlar ve bu, SPA proxy'sinde belirli bir bağlantı noktasını ayarladığınızda çalışmaz.

7. ClientApp/src/setupProxy.js dosyasını açın ve hedefi kapsayıcıdaki adresi ve bağlantı noktasını kullanacak localhost şekilde ayarlayan satırı değiştirin. Bağlantı noktasını Kapsayıcılar penceresinin Bağlantı Noktaları sekmesinde bulabilirsiniz.

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

   HTTPS kullanıyorsanız, bu öğreticide 443 olan HTTPS için doğru bağlantı noktasını seçtiğinizden emin olun.

8. Uygulamayı hata ayıklama (F5) ile başlatın.

   

   Çıkış derlemelerini yazmaya çalışırken bir derleme hatası alırsanız, dosyaların kilidini açmak için daha önce çalışan bir kapsayıcıyı durdurmanız gerekebilir.

9. incrementCounter işlevinde ClientApp/src/components/Counter.js içinde bir kesme noktası ayarlayarak istemci tarafı JavaScript kodunda kesme noktasına basabildiğinizi doğrulayın ve ardından Sayaçlar sayfasındaki Artım düğmesine tıklayarak kesme noktasına ulaşmayı deneyin.

   

10. Ardından, sunucu tarafı ASP.NET Çekirdek kodunda bir kesme noktasına ulaşmaya çalışın. yönteminde WeatherController.csGet bir kesme noktası ayarlayın ve bu kodu etkinleştirmek için temel localhost ve bağlantı noktası URL'sine eklemeyi /weatherforecast deneyin.

    

11. Kapsayıcı bağlantı noktası değişirse , IDE'de hata ayıklama başlatma profilini güncelleştirme launchSettings.json veya güncelleştirme gibi önemli bir değişiklik yaparsanız gerçekleşebilir, bağlantı noktasını güncelleştirmeniz ve ayrıca proxy'yi setupProxy.js yeniden başlatmanız gerekir. Geçerli ara sunucuyu sonlandırın (çalıştırıldığı komut penceresinde Ctrl+C) ve ardından aynı komutu npm run startkullanarak yeniden başlatın.

Kapsayıcılar penceresi

Kapsayıcılar araç penceresini açın. Bunu Diğer Windows>Kapsayıcılarını Görüntüle'nin>altındaki menüde bulabilir veya Ctrl+Q tuşuna basıp arama kutusuna yazmaya containers başlayıp sonuçlardan Kapsayıcılar penceresi'ni seçebilirsiniz. Pencere açıldığında, düzenleyici bölmesinin altındaki alt kısıma sabitleyin.

Kapsayıcılar penceresi çalışan kapsayıcıları gösterir ve bunlar hakkındaki bilgileri görüntülemenizi sağlar. Ortam değişkenlerini, etiketleri, bağlantı noktalarını, birimleri, dosya sistemini ve günlükleri görüntüleyebilirsiniz. Araç çubuğu düğmeleri kapsayıcı içinde bir terminal (kabuk istemi) oluşturmanıza, hata ayıklayıcısını eklemenize veya kullanılmayan kapsayıcıları ayıklamanıza olanak verir. Bkz . Kapsayıcılar penceresini kullanma.

Dosyalar sekmesine tıklayın ve yayımlanan uygulama dosyalarınızı görmek için klasörü genişletinapp.

Ayrıca resimleri görüntüleyebilir ve bunlar hakkındaki bilgileri inceleyebilirsiniz. Resimler sekmesini seçin, projeniz için bir tane bulun ve ardından bir görüntü hakkında bilgi içeren bir json dosyasını görüntülemek için Ayrıntılar sekmesini seçin.

Not

Hata ayıklama yapılandırmaları yinelemeli düzenleme ve hata ayıklama deneyimi sağlamak için birim bağlamayı kullandığından geliştirme görüntüsü uygulama ikili dosyalarını ve diğer içeriği içermez. Tüm içerikleri içeren bir üretim görüntüsü oluşturmak için Yayın yapılandırmasını kullanın.

Docker görüntülerini yayımlama

Uygulamanın geliştirme ve hata ayıklama döngüsü tamamlandıktan sonra uygulamanın üretim görüntüsünü oluşturabilirsiniz.

1. Yapılandırma açılan listesini Yayınla ve uygulamayı derle olarak değiştirin.

2. Çözüm Gezgini'da projenize sağ tıklayın ve Yayımla'yı seçin.

3. Yayımlama hedefi iletişim kutusunda Docker Container Registry'yi seçin.

   

4. Ardından Azure Container Registry'yi seçin.

   

5. Yeni Azure Container Registry oluştur'u seçin.

6. Yeni Azure Container Registry oluştur ekranında istediğiniz değerleri doldurun.

   Ayar	Önerilen değer	Açıklama
   DNS Ön Eki	Genel olarak benzersiz bir ad	Kapsayıcı kayıt defterinizi benzersiz olarak tanımlayan ad.
   Abonelik	Aboneliğinizi seçin	Kullanılacak Azure aboneliği.
   Kaynak Grubu	myResourceGroup	Kapsayıcı kayıt defterinizin oluşturulacağı kaynak grubunun adı. Yeni kaynak grubu oluşturmak Yeni'yi seçin.
   SKU	Standart	Kapsayıcı kayıt defterinin hizmet katmanı
   Kayıt Defteri Konumu	Size yakın bir konum	Size yakın bir bölgede veya kapsayıcı kayıt defterinizi kullanan diğer hizmetlere yakın bir Konum seçin.

   

7. Oluştur'u ve ardından Son'u seçin.

   

   Yayımlama işlemi sona erdiğinde yayımlama ayarlarını gözden geçirebilir ve gerektiğinde düzenleyebilir veya Yayımla düğmesini kullanarak görüntüyü yeniden yayımlayabilirsiniz.

   

   Yayımla iletişim kutusunu kullanarak yeniden başlamak için, bu sayfadaki Sil bağlantısını kullanarak yayımlama profilini silin ve sonra yeniden Yayımla'yı seçin.

Sonraki adımlar

Artık kapsayıcıyı kayıt defterinden Docker görüntülerini çalıştırabilen herhangi bir konağa (örneğin Azure Container Instances) çekebilirsiniz.

Ek kaynaklar

• Visual Studio ile kapsayıcı geliştirme
• Docker ile Visual Studio geliştirme sorunlarını giderme
• Visual Studio Container Tools GitHub deposu