ASP.NET Core Blazor WebAssembly'yi barındırma ve dağıtma

Bu makalede Blazor WebAssembly uygulamalarını barındırma ve dağıtma açıklanmaktadır.

Barındırma modeliyleBlazor WebAssembly:

• Uygulama Blazor , bağımlılıkları ve .NET çalışma zamanı paralel olarak tarayıcıya indirilir.
• Uygulama doğrudan tarayıcı kullanıcı arabirimi iş parçacığında yürütülür.

Bu makale, uygulamanın statik bir barındırma web sunucusuna veya hizmetine yerleştirildiği Blazor dağıtım senaryosuyla ilgilidir; .NET, uygulamaya hizmet Blazor vermek için kullanılmaz. Bu strateji IIS, Azure hizmetleri, Apache, Nginx ve GitHub Sayfaları için bu düğümdeki tek başına dağıtım bölümünde ve diğer makalelerde ele alınmıştır.

Alt alan adı ve IIS alt uygulama barındırma

Alt etki alanı barındırma, uygulamanın özel yapılandırılmasını gerektirmez. Uygulamayı bir alt etki alanında barındırmak için uygulamanın temel yolunu ( etiketini içinde) yapılandırmanız <base>.

IIS alt uygulama barındırma, uygulama temel yolunu ayarlamanızı gerektirir. IIS alt uygulama barındırma hakkında daha fazla bilgi ve ek kılavuzlar için ilişkili bağlantılar için bkz ASP.NET Core'u Blazorbarındırma ve dağıtma.

Bazı mobil cihaz tarayıcıları için en büyük yığın boyutunu azaltma

İstemcide çalışan (Blazor veya tek başına .Client uygulamanın projesi) ve mobil cihaz tarayıcılarını, özellikle iOS'ta Safari'yi hedefleyen bir Blazor Web App uygulama oluştururken, MSBuild özelliği Blazor WebAssembly kullanılarak uygulama için maksimum belleği azaltmak gerekebilir. Varsayılan değer 2.147.483.648 bayttır; bu değer çok büyük olabilir ve tarayıcı daha fazla bellek tahsis etmeyi başaramazsa, uygulama daha fazla bellek talep etmeye çalıştığında uygulamanın kilitlenmesine neden olabilir. Aşağıdaki örnek, dosyadaki değeri 268.435.456 bayt Program olarak ayarlar:

<EmccMaximumHeapSize>268435456</EmccMaximumHeapSize>

Mono/WebAssembly MSBuild özellikleri ve hedefleri hakkında daha fazla bilgi için .

.NET derlemeleri için webcil paketleme biçimi

Webcil , kısıtlayıcı ağ ortamlarında kullanımı Blazor WebAssembly etkinleştirmek üzere tasarlanmış .NET derlemeleri için web dostu bir paketleme biçimidir. Webcil dosyaları, derlemelerin WebAssembly dosyaları olarak dağıtıldığı ve bu dosyaların standart .wasm dosya uzantısını kullandığı standart bir WebAssembly sarmalayıcı kullanır.

Webcil, bir Blazor WebAssembly uygulama yayımladığınızda varsayılan paketleme biçimidir. Webcil kullanımını devre dışı bırakmak için uygulamanın proje dosyasında aşağıdaki MSBuild özelliğini ayarlayın:

<PropertyGroup>
  <WasmEnableWebcil>false</WasmEnableWebcil>
</PropertyGroup>

Önyükleme kaynaklarının yüklenme şeklini özelleştirme

Önyükleme kaynaklarının nasıl yükleneceğini API loadBootResource kullanarak özelleştirin. Daha fazla bilgi için bkz . ASP.NET Core Blazor başlatma.

Sıkıştırma

Bir Blazor WebAssembly uygulama yayımlandığında, uygulamanın boyutunu küçültmek ve çalışma zamanı sıkıştırma ek yükünü kaldırmak için çıkış yayımlama sırasında statik olarak sıkıştırılır. Aşağıdaki sıkıştırma algoritmaları kullanılır:

• Brotli (en yüksek düzey)
• Gzip

Blazor uygun sıkıştırılmış dosyaları sunmak için ana bilgisayara güvenir. Tek başına bir Blazor WebAssembly uygulama barındırırken, statik olarak sıkıştırılmış dosyaların sunulduğundan emin olmak için ek çalışma gerekebilir:

• IIS web.config sıkıştırma yapılandırması için IIS: Brotli ve Gzip sıkıştırma bölümüne bakın.
• Statik olarak sıkıştırılmış dosya içeriği müzakeresini desteklemeyen statik barındırma çözümlerinde barındırma yaparken, uygulamanızı Brotli sıkıştırılmış dosyaları alıp çözümleyecek şekilde yapılandırmayı göz önünde bulundurun.

JavaScript Brotli çözücüsünü GitHub deposundan edinin. Küçültüldü kod çözücü dosyası adlandırılır decode.min.js ve deponun js klasöründe bulunur.

Uyarı

Betiğin decode.js (decode.min.js) küçültülmüş sürümü başarısız olursa, bunun yerine küçültülmemiş sürümü (decode.js) kullanmayı deneyin.

Uygulamayı kod çözücüsü kullanacak şekilde güncelleştirin.

wwwroot/index.html dosyasında, autostart'nin false etiketine Blazor'i <script> olarak ayarlayın.

<script src="_framework/blazor.webassembly.js" autostart="false"></script>

Blazor etiketinden sonra ve kapanış <script> etiketinden önce, aşağıdaki JavaScript kod bloğunu </body> ekleyin. Aşağıdaki işlev, tarayıcının önbelleğini güncel tutmak için fetch ile cache: 'no-cache' çağırır.

Blazor Web App:

<script type="module">
  import { BrotliDecode } from './decode.min.js';
  Blazor.start({
    webAssembly: {
      loadBootResource: function (type, name, defaultUri, integrity) {
        if (type !== 'dotnetjs' && location.hostname !== 'localhost' && type !== 'configuration' && type !== 'manifest') {
          return (async function () {
            const response = await fetch(defaultUri + '.br', { cache: 'no-cache' });
            if (!response.ok) {
              throw new Error(response.statusText);
            }
            const originalResponseBuffer = await response.arrayBuffer();
            const originalResponseArray = new Int8Array(originalResponseBuffer);
            const decompressedResponseArray = BrotliDecode(originalResponseArray);
            const contentType = type === 
              'dotnetwasm' ? 'application/wasm' : 'application/octet-stream';
            return new Response(decompressedResponseArray, 
              { headers: { 'content-type': contentType } });
          })();
        }
      }
    }
  });
</script>

Bağımsız Blazor WebAssembly:

<script type="module">
  import { BrotliDecode } from './decode.min.js';
  Blazor.start({
    loadBootResource: function (type, name, defaultUri, integrity) {
      if (type !== 'dotnetjs' && location.hostname !== 'localhost' && type !== 'configuration') {
        return (async function () {
          const response = await fetch(defaultUri + '.br', { cache: 'no-cache' });
          if (!response.ok) {
            throw new Error(response.statusText);
          }
          const originalResponseBuffer = await response.arrayBuffer();
          const originalResponseArray = new Int8Array(originalResponseBuffer);
          const decompressedResponseArray = BrotliDecode(originalResponseArray);
          const contentType = type === 
            'dotnetwasm' ? 'application/wasm' : 'application/octet-stream';
          return new Response(decompressedResponseArray, 
            { headers: { 'content-type': contentType } });
        })();
      }
    }
  });
</script>

Önyükleme kaynaklarını yükleme hakkında daha fazla bilgi için bkz: ASP.NET Core Blazor başlangıç.

Sıkıştırmayı CompressionEnabled devre dışı bırakmak için UYGULAMANıN proje dosyasına MSBuild özelliğini ekleyin ve değerini olarak falseayarlayın:

<PropertyGroup>
  <CompressionEnabled>false</CompressionEnabled>
</PropertyGroup>

Komut kabuğunda ` CompressionEnabled ` komutuna, ` dotnet publish ` özelliği aşağıdaki söz dizimi ile geçirilebilir.

dotnet publish -p:CompressionEnabled=false

Doğru yönlendirme için URL'leri yeniden yazma

Bir Blazor WebAssembly uygulamadaki sayfa bileşenleri için yönlendirme istekleri, bir uygulamadaki Blazor Server yönlendirme istekleri kadar basit değildir. İki bileşeni olan bir Blazor WebAssembly uygulamayı göz önünde bulundurun:

• Main.razor: Uygulamanın kökünde yüklenir ve About bileşenine (href="About") bir bağlantı içerir.
• About.razor: About bileşeni.

Tarayıcının adres çubuğu kullanılarak uygulamanın varsayılan belgesi istendiğinde (örneğin, https://www.contoso.com/):

1. Tarayıcı bir istekte bulunur.
2. Varsayılan sayfa döndürülür ve bu genellikle index.htmlşeklindedir.
3. index.html uygulamayı başlatır.
4. Router bileşen yüklenir ve RazorMain bileşen render edilir.

Ana sayfada, About bileşeninin bağlantısını seçmek istemcide çalışır çünkü Blazor yönlendirici, tarayıcının www.contoso.com için İnternet'te About istekte bulunmasını durdurur ve işlenen About bileşene kendisi hizmet eder. Uygulama içindeki Blazor WebAssembly iç uç noktalara yönelik tüm istekler aynı şekilde çalışır: İstekler, İnternet'te sunucu tarafından barındırılan kaynaklara yönelik tarayıcı tabanlı istekleri tetiklemez. Yönlendirici talepleri dahili olarak yönetir.

için tarayıcının adres çubuğu www.contoso.com/Aboutkullanılarak bir istek yapılırsa istek başarısız olur. Uygulamanın İnternet ana bilgisayarında böyle bir kaynak olmadığından 404 - Bulunamadı yanıtı döndürülür.

Tarayıcılar istemci tarafı sayfalar için İnternet tabanlı konaklara istekte bulunacağından, web sunucuları ve barındırma hizmetleri sunucuda fiziksel olarak olmayan kaynaklara yönelik tüm istekleri sayfaya index.html yeniden yazmalıdır. index.html döndürüldüğünde, uygulamanın Blazor yönlendiricisi devralır ve doğru kaynakla yanıt verir.

IIS sunucusuna dağıtım yaparken, url yeniden yazma modülünü uygulamanın yayımlanan web.config dosyasıyla kullanabilirsiniz. Daha fazla bilgi için bkz. IIS ile ASP.NET Core'u Blazor WebAssembly barındırma ve dağıtma.

Bağımsız dağıtım

Tek başına dağıtım, uygulamayı doğrudan istemcilerin talep ettiği bir dizi statik dosya olarak sunar. Herhangi bir statik dosya sunucusu Blazor uygulamasını sunabilir.

Bağımsız dağıtım varlıkları, /bin/Release/{TARGET FRAMEWORK}/publish/wwwroot yer tutucusunun hedef çerçeve olduğu bin/Release/{TARGET FRAMEWORK}/browser-wasm/publish veya {TARGET FRAMEWORK} klasörüne yayımlanır.

Azure App Service

Blazor WebAssembly uygulamalar, uygulamayı IIS'de barındıran Windows üzerinde Azure App Services'e dağıtılabilir.

Linux için Azure Uygulaması Hizmeti'ne tek başına Blazor WebAssembly uygulama dağıtma şu anda desteklenmiyor. Bu senaryoyu destekleyen Blazor WebAssembly uygulamanın Azure Static Web Apps kullanarak tek başına barındırılmasını öneririz.

Docker ile tek başına

Bağımsız bir Blazor WebAssembly uygulama, statik dosya sunucusunda barındırılmak üzere bir dizi statik dosya olarak yayımlanır.

Uygulamayı Docker'da barındırmak için:

• Nginx veya Apache gibi web sunucusu desteğine sahip bir Docker kapsayıcısı seçin.
• publish Klasör varlıklarını, statik dosyalara hizmet vermek için web sunucusunda tanımlanan bir konum klasörüne kopyalayın.
• Blazor WebAssembly uygulamasına hizmet vermek için gerekli ek yapılandırmayı uygulayın.

Yapılandırma yönergeleri için aşağıdaki kaynaklara bakın:

• Nginx veya Apache makaleleri
• Docker Belgeleri

Sunucu yapılandırma değerleri

Blazor WebAssembly uygulamalar, geliştirme ortamında çalışma zamanı sırasında komut satırı bağımsız değişkenleri olarak aşağıdaki konak yapılandırma değerlerini kabul edebilir.

İçerik kökü

bağımsız değişkeni, --contentroot uygulamanın içerik dosyalarını (içerik kökü) içeren dizinin mutlak yolunu ayarlar. Aşağıdaki örneklerde uygulamanın /content-root-path içerik kök yolu verilmiştir.

• Uygulamayı komut satırında yerel olarak çalıştırırken argümanını verin. Uygulamanın dizininden şu komutu yürütebilirsiniz:

  dotnet watch --contentroot=/content-root-path
  

• IIS Express profilinde uygulamanın launchSettings.json dosyasına bir girdi ekleyin. Bu ayar, uygulama Visual Studio Hata Ayıklayıcısı ile çalıştırıldığında ve (veya dotnet watch) ile dotnet run bir komut isteminden çalıştırıldığında kullanılır.

  "commandLineArgs": "--contentroot=/content-root-path"
  

• Visual Studio'da, Özellikler>Hata Ayıklama>Uygulama bağımsız değişkenleri altında bağımsız değişkenini belirtin. Visual Studio özellik sayfasında bağımsız değişkenin ayarlanması, bağımsız değişkeni launchSettings.json dosyasına ekler.

  --contentroot=/content-root-path
  

Yol temeli

--pathbase bağımsız değişkeni, kök olmayan bir göreli URL yoluyla yerel olarak çalıştırılan bir uygulamanın temel yolunu ayarlar (<base> etiket href, hazırlık ve canlı ortamda / dışında başka bir yola ayarlanır). Aşağıdaki örneklerde uygulamanın /relative-URL-path yol tabanı verilmiştir. Daha fazla bilgi için bkz. ASP.NET Core Blazor uygulama temel yolu.

Önemli

href <base> etiketinin sağlandığı yoldan farklı olarak, / bağımsız değişken değerini geçirirken sondaki eğik çizgiyi (--pathbase) eklemeyin. Uygulama temel yolu etikette <base> olarak <base href="/CoolApp/"> verilmişse (sondaki eğik çizgi içeriyorsa), komut satırı bağımsız değişken değerini --pathbase=/CoolApp şeklinde geçirin (sondaki eğik çizgi yok).

• Uygulamayı komut satırında yerel olarak çalıştırırken argümanını verin. Uygulamanın dizininden şu komutu yürütebilirsiniz:

  dotnet watch --pathbase=/relative-URL-path
  

• IIS Express profilinde uygulamanın launchSettings.json dosyasına bir girdi ekleyin. Bu ayar, uygulamayı Visual Studio Hata Ayıklayıcısı ile çalıştırırken veya bir komut isteminden dotnet watch (veya dotnet run) ile kullandığınızda kullanılır.

  "commandLineArgs": "--pathbase=/relative-URL-path"
  

• Visual Studio'da, Özellikler>Hata Ayıklama>Uygulama bağımsız değişkenleri altında bağımsız değişkenini belirtin. Visual Studio özellik sayfasında bağımsız değişkenin ayarlanması, bağımsız değişkeni launchSettings.json dosyasına ekler.

  --pathbase=/relative-URL-path
  

Daha fazla bilgi için bkz. ASP.NET Core Blazor uygulama temel yolu.

URL'ler

--urls bağımsız değişkeni, istekleri dinlemek için protokoller ve bağlantı noktalarıyla birlikte IP adreslerini veya konak adreslerini ayarlar.

• Uygulamayı komut satırında yerel olarak çalıştırırken argümanını verin. Uygulamanın dizininden şu komutu yürütebilirsiniz:

  dotnet watch --urls=http://127.0.0.1:0
  

• IIS Express profilinde uygulamanın launchSettings.json dosyasına bir girdi ekleyin. Bu ayar, uygulamayı Visual Studio Hata Ayıklayıcısı ile çalıştırırken veya bir komut isteminden dotnet watch (veya dotnet run) ile kullandığınızda kullanılır.

  "commandLineArgs": "--urls=http://127.0.0.1:0"
  

• Visual Studio'da, Özellikler>Hata Ayıklama>Uygulama bağımsız değişkenleri altında bağımsız değişkenini belirtin. Visual Studio özellik sayfasında bağımsız değişkenin ayarlanması, bağımsız değişkeni launchSettings.json dosyasına ekler.

  --urls=http://127.0.0.1:0
  

Kesiciyi yapılandırma

Blazor çıkış derlemelerindeki gereksiz Ara Dil (IL) öğelerini kaldırmak için her Release derlemesinde IL kırpması gerçekleştirir. Daha fazla bilgi için bkz ASP.NET Core için Düzeltici'yi YapılandırmaBlazor.

Önceki dağıtım bozulması

Genellikle kurulum sırasında

• Yalnızca değiştirilen dosyalar değiştirilir ve bu da genellikle daha hızlı bir dağıtıma neden olur.
• Yeni dağıtımın parçası olmayan mevcut dosyalar, yeni dağıtım tarafından kullanılmak üzere yerinde bırakılır.

Nadir durumlarda, önceki bir dağıtımda kalan dosyalar yeni bir dağıtımı bozabilir. Mevcut dağıtımın (veya dağıtımdan önce yerel olarak yayımlanan uygulamanın) tamamen silinmesi, bozuk bir dağıtımla ilgili sorunu çözebilir. Genellikle, var olan dağıtımı bir kez silmek, DevOps derlemesi ve dağıtım işlem hattı da dahil olmak üzere sorunu çözmek için yeterlidir.

DevOps derleme ve dağıtım işlem hattı kullanımdayken her zaman önceki bir dağıtımı temizlemenin gerekli olduğunu belirlerseniz, bozulmanın tam nedenini giderene kadar derleme işlem hattına geçici olarak bir adım ekleyerek her yeni dağıtımın önceki dağıtımını silebilirsiniz.