Hızlı Başlangıç: Visual Studio'da Tek sayfalı React uygulamasıyla Docker kullanma

2025-06-12

Visual Studio ile, React.js tek sayfalı uygulama (SPA) 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 App 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ünün yüklü olduğu visual studio 2019
.NET Core 3.1 ile geliştirme için .NET Core 3.1 Geliştirme Araçları.
Azure Container Registry'ye yayımlamak için bir Azure aboneliği gereklidir. Ücretsiz deneme içinkaydolun.
Node.js
Windows kapsayıcıları için, bu makalede belirtilen Docker görüntülerini kullanmak amacıyla Windows 10 sürüm 1809 veya daha yenisi gereklidir.

Docker Desktop
Visual Studio 2022, Web Geliştirme, Azure Araçları iş yükü ve/veya .NET Core platformlar arası geliştirme iş yükü yüklü
Azure Container Registry'ye yayımlamak için bir Azure aboneliği gereklidir. Ücretsiz deneme içinkaydolun.
Node.js
Windows kapsayıcıları için, bu makalede belirtilen Docker görüntülerini kullanmak amacıyla Windows 10 sürüm 1809 veya daha yenisi gereklidir.

Yükleme ve kurulum

Docker yüklemesi için önce Windows için Docker Desktopdaki bilgileri gözden geçirin:yüklemeden önce bilmeniz gerekenler. Ardından Docker Desktopyükleyin.

Proje oluşturma ve Docker desteği ekleme

React.jsşablonuyla ASP.NET Core kullanarak yeni bir proje oluşturun.
Ek bilgiler ekranında Docker Desteği'ni etkinleştir seçemezsiniz, ancak endişelenmeyin, bu desteği daha sonra ekleyebilirsiniz.
Proje düğümüne sağ tıklayın ve projenize bir Dockerfile eklemek için >Docker Desteği Ekle seçeneğini seçin.
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.

Not

Visual Studio 2022 veya sonraki sürümlerinde en son proje şablonlarını kullanıyorsanız Dockerfile'ı değiştirmeniz gerekmez.

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

Dockerfile, son Docker görüntüsü oluşturma tarifi projede oluşturulur. Daha fazla bilgi için içindeki komutları anlamak amacıyla Dockerfile referansına başvurun.

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.jsyü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 sonraki bir sürümü hedeflediyseniz, Visual Studio'nun normal kullanıcı hesabını kullanarak oluşturduğu varsayılan Dockerfile (USER appsatırını arayın), ancak bu hesabın Node.jsyüklemek için gereken yükseltilmiş izinleri yoktur. Bu durumu hesaba eklemek için aşağıdakileri yapın:

Dockerfile dosyasında USER appsatırını silin.
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.
launchSettings.json düzenleyerek bağlantı noktası başvurularını 80 ve 443 olarak değiştirin; 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 dosyasını Node.jsyükleyecek şekilde güncelleştirmek için aşağıdaki adımları kullanın:

Kapsayıcıya curl, Node.js 14.x ve bazı gerekli Node kitaplıklarını yüklemek için aşağıdaki satırları ekleyin. Node paketi yöneticisinin npm.exe yüklemesini hem temel görüntüye eklemek hem de build bölümüne eklemek için bu satırları ilk bölüme eklemeniz gerektiğinden 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/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"]

Yukarıdaki Dockerfilemcr.microsoft.com/dotnet/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 <PropertyGroup> öğesinin alt öğesi olarak ekleyerek proje dosyasını (*.csproj) güncelleştirin:

 <DockerfileFastModeStage>base</DockerfileFastModeStage>

Not

DockerfileFastModeStage değişikliği gereklidir çünkü buradaki Dockerfile, Dockerfile'ın başına bir aşama eklediğinden bu değişiklik gerekir. Performansı iyileştirmek için Visual Studio Hızlı modunu kullanır, ancak yalnızca doğru aşama kullanıldığında çalışır. Dockerfile dosyasındaki varsayılan ilk aşamadır, bu örnekte, Node.jsindirmek amacıyla base aşamasından başka bir aşamaya değiştirilir. Hızlı modu hakkında daha fazla açıklama için bkz. Visual Studio 'de 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.

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

FROM ... base önce aşağıdaki satırları ekleyin

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 önce ve sonra aşağıdaki satırı ekleyin

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

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

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

.dockerignorekaldırarak **/bin dosyasını güncelleştirin.

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

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

yeni React ve ASP.NET Core projesi oluşturma işleminin ekran görüntüsü
Ek bilgiler ekranında kapsayıcı desteğini etkinleştir seçin. Dockerfile seçeneğini belirlediğinizden emin olun çünkü bu dosyada el ile değişiklik yapmanız gerekir.

Not

Visual Studio 2022'nin bazı sürümlerinde bu seçenek etkinleştirilmez, ancak 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.
Proje oluşturma sırasında Docker kapsayıcı desteği eklemediyseniz, sunucu proje düğümüne sağ tıklayın ve >Docker Desteği ekle'yi seçin. Dockerfile oluşturmak için Dockerfile seçeneğini belirlediğinizden emin olun.
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:

React.jsşablonuyla ASP.NET Core kullanarak yeni bir proje oluşturun.
Ek bilgiler ekranında Docker Desteği'ni etkinleştir seçemezsiniz, ancak endişelenmeyin, bu desteği daha sonra ekleyebilirsiniz.
Proje düğümüne sağ tıklayın ve projenize bir Dockerfile eklemek için >Docker Desteği Ekle seçeneğini seçin.
Kapsayıcı türünü seçin.

Hata ayıklama

Visual Studio 2022 sürüm 17.9 veya üzeri ve kullanan vite.js şablonuyla projeler zaten hem istemci hem de sunucu projelerini hata ayıklama desteğiyle başlatacak şekilde yapılandırılmıştır, ancak kapsayıcıda çalışan ASP.NET Core sunucusuna erişmek için tek sayfalı uygulama (SPA) proxy'si için doğru bağlantı noktasını ayarlamanız gerekir. Visual Studio'daki Kapsayıcılar penceresinden konak bağlantı noktasını alabilir ve bunu React projenizde Create a React app - Dockerbaşlıklı belgede açıklandığı şekilde ayarlayabilirsiniz.

Bu senaryo için gerekli olmayan Swagger ile açılmak üzere ayarlanmış sunucunun tarayıcıdaki başlatmasını da devre dışı bırakabilirsiniz. Tarayıcı başlatmasını devre dışı bırakmak için, Özellikler (Alt+Girin) öğesini açın, Hata Ayıklama sekmesine gidin ve Hata ayıklama başlatma profillerini aç kullanıcı arabirimibağlantıya tıklayın ve Tarayıcıyı başlat onay kutusunun işaretini kaldırın.

Visual Studio 2022'nin ö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. Geliştirilmiş tek sayfalı uygulama (SPA) şablonlarına bakın. (Bkz. ,) 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 bir Hata Ayıklama profili *Docker 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.

Henüz derlenmediyse projeyi derleyin.
Visual Studio geliştirme komut istemini açın, projenizdeki ClientApp klasörüne gidin ve npm run startkomutunu verin. Aşağıdakine 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 launchSettings.json dosyanızda depolanan bir hata ayıklama başlatma profilinde sağlamanız gerekir.
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 seçin ve Docker profilini seçin.
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
URLhttps://localhost:{proxy-port} olarak ayarlayın; burada {proxy-port} proxy sunucusundan bağlantı noktasıdır (1. adımdan itibaren).

Bu eylem, launchSettings.json dosyasındaki Docker girişini değiştirir ve konakta çalışan yerel ara sunucu için doğru URL'yi başlatır. launchSettings.json dosyasını Özellikleraltında Çözüm Gezgini bulun.
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.
ClientApp/src/setupProxy.js dosyasını açın ve hedefi kapsayıcıdaki localhost adresini ve bağlantı noktasını kullanacak ş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.
Hata ayıklama ile uygulamayı başlatın (F5).

Çı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.
İstemci tarafı JavaScript kodunda kekme noktasına basabildiğinizi doğrulamak için incrementCounter işlevinde ClientApp/src/components/Counter.js bir kesme noktası ayarlayın ve ardından Sayaçlar sayfasındaki Artım düğmesine tıklayarak kesme noktasına ulaşmayı deneyin.
Ardından, sunucu tarafı ASP.NET Çekirdek kodunda bir kesme noktasına ulaşmaya çalışın. WeatherController.cs yöntemindeki Get bir kesme noktası ayarlayın ve bu kodu etkinleştirmek için temel /weatherforecast ve bağlantı noktası URL'sine localhost eklemeyi deneyin.
Kapsayıcı bağlantı noktası, launchSettings.json veya IDE'deki hata ayıklama başlatma profilini güncellediğinizde, yani önemli bir değişiklik yaptığınızda değişirse, setupProxy.js bağlantı noktasını güncelleştirmeniz ve proxy'yi yeniden başlatmanız gerekir. Geçerli ara sunucuyu sonlandırın (Ctrl+C çalıştığı komut penceresinde) ve ardından npm run startaynı komutu kullanarak yeniden başlatın.

Araç çubuğundaki hata ayıklama açılan listesinden Docker seçin ve uygulamada hata ayıklamaya başlayın. Sertifikaya güvenme hakkında istem içeren bir ileti görebilirsiniz; devam etmek için sertifikaya güvenmeyi seçin. İlk derlemede Docker temel görüntüleri indirir, bu nedenle biraz daha uzun sürebilir.

Çıktı penceresindeki Kapsayıcı Araçları seçeneği hangi eylemlerin gerçekleştiğini gösterir. npm.exeile ilişkili yükleme adımlarını görmeniz gerekir.

Tarayıcı, uygulamanın giriş sayfasını gösterir.

Çalışan uygulamanın ekran görüntüsü.

Kapsayıcılar penceresi

Konteynerler araç penceresini açın. Bunu Görünüm>Diğer Windows>Kapsayıcılarıaltındaki menüde bulabilir veya Ctrl+Q tuşlarına basıp arama kutusuna containers yazmaya başlayıp sonuçlardan Kapsayıcılar penceresini 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 bu kapsayıcılar 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.

kapsayıcılar penceresinin ekran görüntüsü

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

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

Görüntüleri ve ayrıntıları gösteren Kapsayıcılar penceresinin ekran görüntüsü.

Not

geliştirme görüntüsü uygulama ikili dosyalarını ve diğer içeriği içermez çünkü Hata Ayıklama yapılandırmaları, yinelemeli düzenleme ve hata ayıklama deneyimini sağlamak için birim bağlamayı kullanır. Tüm içerikleri içeren bir üretim görüntüsü oluşturmak için Release 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.

Yapılandırma menüsündeki açılır listeyi Sürüm olarak değiştirin ve uygulamayı oluşturun.
çözüm gezgini projenize sağ tıklayın ve Yayımla'ni seçin.
Yayımlama hedefi iletişim kutusunda Docker Container Registryöğesini seçin.
Ardından Azure Container Registryseçin.
Yeni bir Azure Container Registry oluşturseç.

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

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

Visual Studio'nun Azure Container Registry oluştur iletişim kutusunun ekran görüntüsü.

Oluştur'uve ardından Son'useç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 yayımla'yı yeniden seçin.

Yapılandırma menüsündeki açılır listeyi Sürüm olarak değiştirin ve uygulamayı oluşturun.
çözüm gezgini projenize sağ tıklayın ve Yayımla'ni seçin.
Yayımlama hedefi iletişim kutusunda Docker Container Registryöğesini seçin.
Ardından Azure Container Registryseçin.
Yeni bir Azure Container Registry oluşturseç.

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

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

Visual Studio'nun Azure Container Registry oluştur iletişim kutusunun ekran görüntüsü.

Oluştur'uve ardından Son'useç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 yayımla'yı yeniden 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 çekebilirsiniz, örneğin Azure Container Instances.

Ek kaynaklar

Visual Studio ile kapsayıcı geliştirme
Visual Studio geliştirme sorunlarını Docker ile gidermek
Visual Studio Container Tools GitHub deposunu

Aracılığıyla paylaş

Hızlı Başlangıç: Visual Studio'da Tek sayfalı React uygulamasıyla Docker kullanma

Önkoşullar

Yükleme ve kurulum

Proje oluşturma ve Docker desteği ekleme

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

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

Hata ayıklama

Kapsayıcılar penceresi

Docker görüntülerini yayımlama

Sonraki adımlar

Ek kaynaklar

Geri Bildirim

Ek kaynaklar