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

Bu makalede ASP.NET Core, Content Delivery Networks (CDN), dosya sunucuları ve GitHub Pages kullanılarak nasıl barındırılacağı ve dağıtılacağı Blazor WebAssembly 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.

Alt etki alanı 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 uygulama temel yolunu (içindeki etiketi) yapılandırmanız gerekmez.wwwroot/index.html<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 daha fazla kılavuza yönelik çapraz 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

<EmccMaximumHeapSize>268435456</EmccMaximumHeapSize>

Mono/WebAssembly MSBuild özellikleri ve hedefleri hakkında daha fazla bilgi için bkz WasmApp.Common.targets . (dotnet/runtime GitHub deposu).

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

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

API kullanarak önyükleme kaynaklarının nasıl yüklendiğini özelleştirin loadBootResource . 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

• 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 anlaşmasını desteklemeyen statik barındırma çözümlerinde barındırırken, uygulamayı Brotli sıkıştırılmış dosyalarını getirecek ve kodunu çözecek şekilde yapılandırmayı göz önünde bulundurun:

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

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

wwwroot/index.html dosyasında, 'nin <script> etiketinde Blazorolarak false ayarlayınautostart:

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

etiketinden <script> sonra Blazorve kapanış </body> etiketinden önce aşağıdaki JavaScript kod <script> bloğunu ekleyin.

<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>

<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şlatma.

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

dotnet publish -p:CompressionEnabled=false

<PropertyGroup>
  <BlazorEnableCompression>false</BlazorEnableCompression>
</PropertyGroup>

dotnet publish -p:BlazorEnableCompression=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ükler ve bileşene About (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ı önyükleme.
4. Router bileşen yükler ve RazorMain bileşen işlenir.

Ana sayfada, bileşenin bağlantısının About seçilmesi istemcide çalışır çünkü Blazor yönlendirici, tarayıcının için İnternet'te www.contoso.com About istekte bulunmasını durdurur ve işlenen About bileşenin kendisine 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 istekleri dahili olarak işler.

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. Döndürülürse index.html , uygulamanın yönlendiricisi Blazor 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 IIS bölümüne bakın.

<SelfContained>false</SelfContained>

<RuntimeIdentifier>{RID}</RuntimeIdentifier>

<SelfContained>false</SelfContained>

Tek başına dağıtım

Tek başına dağıtım, uygulamayı doğrudan istemciler Blazor WebAssembly tarafından istenen bir dizi statik dosya olarak sunar. Herhangi bir statik dosya sunucusu uygulamaya hizmet Blazor yapabilir.

Tek başına dağıtım varlıkları, yer tutucunun /bin/Release/{TARGET FRAMEWORK}/publish/wwwroot hedef çerçeve olduğu {TARGET FRAMEWORK} veya bin\Release\{TARGET FRAMEWORK}\browser-wasm\publish\ klasöründe (kullanılan .NET SDK sürümüne bağlı olarak) yayımlanır.

Azure App Service

Blazor WebAssemblyuygulamalar, uygulamayı IIS'de barındıran Windows'da Azure Uygulaması Hizmetlerine dağıtılabilir.

Linux için Azure Uygulaması Hizmeti'ne tek başına Blazor WebAssembly uygulama dağıtma şu anda desteklenmiyor. Bu senaryoyı destekleyen Azure Static Web Apps kullanarak tek başına Blazor WebAssembly bir uygulama barındırmanızı öneririz.

Azure Statik Web Uygulamaları

Azure Static Web Apps'e uygulama Blazor WebAssembly dağıtmak için aşağıdaki yaklaşımlardan birini kullanın:

• Visual Studio'dan dağıtma
• Visual Studio Code'dan dağıtma
• GitHub’dan dağıtım

Visual Studio'dan dağıtma

Visual Studio'dan dağıtmak için Azure Static Web Apps için bir yayımlama profili oluşturun:

1. İşlem sırasında Visual Studio yeniden başlatması gerekebileceğinden, projedeki kaydedilmemiş tüm çalışmaları kaydedin.

2. Visual Studio'nun Yayımlama kullanıcı arabiriminde, yayımlama profili oluşturmak için Hedef>Azure'a>Özgü Hedef>Azure Statik Web Uygulamaları'nı seçin.

3. Visual Studio için Azure Web İşleri Araçları bileşeni yüklü değilse, ASP.NET ve web geliştirme bileşenini yüklemek için bir istem görüntülenir. Visual Studio Yükleyicisi kullanarak araçları yüklemek için istemleri izleyin. Visual Studio, araçları yüklerken otomatik olarak kapatılıp yeniden açılır. Araçlar yüklendikten sonra yayımlama profilini oluşturmak için ilk adımda baştan başlayın.

4. Yayımlama profili yapılandırmasında Abonelik adını belirtin. Mevcut bir örneği seçin veya Yeni örnek oluştur'u seçin. Azure portalının Statik Web Uygulaması Oluştur kullanıcı arabiriminde yeni bir örnek oluştururken Dağıtım ayrıntıları>Kaynağı'nı Diğer olarak ayarlayın. Devam etmeden önce Azure portalında dağıtımın tamamlanmasını bekleyin.

5. Yayımlama profili yapılandırmasında, örneğin kaynak grubundan Azure Static Web Apps örneğini seçin. Yayımlama profilini oluşturmak için Son'u seçin. Visual Studio Statik Web Uygulamaları (SWA) CLI'sını yüklemek isterse, istemleri izleyerek CLI'yi yükleyin. SWA CLI için NPM/Node gerekir .js (Visual Studio belgeleri).

Yayımlama profili oluşturulduktan sonra Yayımla düğmesini seçerek yayımlama profilini kullanarak uygulamayı Azure Static Web Apps örneğine dağıtın.

Visual Studio Code'dan dağıtma

Visual Studio Code'dan dağıtmak için bkz . Hızlı Başlangıç: Azure Static Web Apps ile ilk statik sitenizi oluşturma.

GitHub’dan dağıtım

GitHub deposundan dağıtım yapmak için bkz. Öğretici: Azure Static Web Apps'te ile Blazor statik web uygulaması oluşturma.

IIS

IIS, uygulamalar için Blazor yetenekli bir statik dosya sunucusudur. IIS'yi barındıracak Blazorşekilde yapılandırmak için bkz . IIS'de Statik Web Sitesi Oluşturma.

Yayımlanan varlıklar, SDK'nın hangi sürümünün /bin/Release/{TARGET FRAMEWORK}/publish kullanıldığına ve yer tutucunun {TARGET FRAMEWORK} hedef çerçeve olduğuna bağlı olarak veya bin\Release\{TARGET FRAMEWORK}\browser-wasm\publish klasöründe oluşturulur. Klasörün içeriğini publish web sunucusunda veya barındırma hizmetinde barındırın.

web.config

Proje Blazor yayımlandığında, aşağıdaki IIS yapılandırmasıyla bir web.config dosya oluşturulur:

• MIME türleri
• HTTP sıkıştırması aşağıdaki MIME türleri için etkinleştirilir:
  • application/octet-stream
  • application/wasm
• URL Yeniden Yazma Modülü kuralları oluşturulur:
  • Uygulamanın statik varlıklarının (wwwroot/{PATH REQUESTED}) bulunduğu alt dizine hizmet edin.
  • Dosya olmayan varlıklara yönelik isteklerin statik varlıklar klasöründeki (wwwroot/index.html ) uygulamanın varsayılan belgesine yeniden yönlendirilmesi için SPA geri dönüş yönlendirmesi oluşturun.

Özel kullanım web.config

Özel web.config bir dosya kullanmak için:

SDK'nın web.config yayımlama sırasındaki oluşturma veya dönüştürme işlemi, dosyayı klasördeki publish yayımlanmış varlıklara taşımazsa veya özel web.config dosyanızdaki özel yapılandırmayı değiştirmiyorsa, işlemin tam denetimini almak için aşağıdaki yaklaşımlardan herhangi birini kullanın:

• SDK dosyayı oluşturmuyorsa, örneğin, SDK'nın hangi sürümünün kullanıldığına ve yer tutucunun hedef çerçeve olduğuna bağlı olarak veya konumundaki tek başına Blazor WebAssembly bir uygulamada /bin/Release/{TARGET FRAMEWORK}/publish/wwwroot bin\Release\{TARGET FRAMEWORK}\browser-wasm\publish, özelliğini true proje dosyasında (.csproj) olarak ayarlayın<PublishIISAssets>.{TARGET FRAMEWORK} Genellikle tek başına WebAssembly uygulamaları için, özel web.config bir dosyayı taşımak ve dosyanın SDK tarafından dönüştürülmesini önlemek için gereken tek ayar budur.

  <PropertyGroup>
    <PublishIISAssets>true</PublishIISAssets>
  </PropertyGroup>
  

• Sdk'nın web.config proje dosyasındaki dönüştürmesini devre dışı bırakın (.csproj):

  <PropertyGroup>
    <IsTransformWebConfigDisabled>true</IsTransformWebConfigDisabled>
  </PropertyGroup>
  

• Özel bir dosyayı taşımak için proje dosyasına (.csproj) özel web.config bir hedef ekleyin. Aşağıdaki örnekte, özel web.config dosya geliştirici tarafından projenin köküne yerleştirilir. web.config Dosya başka bir yerde bulunuyorsa dosyasındaki dosyanın SourceFilesyolunu belirtin. Aşağıdaki örnek ile $(PublishDir)klasörünü belirtirpublish, ancak özel çıkış konumu için bir yol DestinationFolder sağlar.

  <Target Name="CopyWebConfig" AfterTargets="Publish">
    <Copy SourceFiles="web.config" DestinationFolder="$(PublishDir)" />
  </Target>
  

URL Yeniden Yazma Modülünü Yükleme

URL'leri yeniden yazmak için URL Yeniden Yazma Modülü gereklidir. Modül varsayılan olarak yüklenmez ve Web Sunucusu (IIS) rol hizmeti özelliği olarak yüklenemez. Modülün IIS web sitesinden indirilmesi gerekir. Modülü yüklemek için Web Platformu Yükleyicisi'ni kullanın:

1. Yerel olarak URL Yeniden Yazma Modülü indirmeleri sayfasına gidin. İngilizce sürüm için WebPI yükleyicisini indirmek için WebPI'yi seçin. Diğer diller için, yükleyiciyi indirmek üzere sunucu (x86/x64) için uygun mimariyi seçin.
2. Yükleyiciyi sunucuya kopyalayın. Yükleyiciyi çalıştırın. Yükle düğmesini seçin ve lisans koşullarını kabul edin. Yükleme tamamlandıktan sonra sunucunun yeniden başlatılması gerekmez.

Web sitesini yapılandırma

Web sitesinin Fiziksel yolunu uygulamanın klasörüne ayarlayın. Klasör aşağıdakileri içerir:

• Iis'nin web.config gerekli yeniden yönlendirme kuralları ve dosya içerik türleri de dahil olmak üzere web sitesini yapılandırmak için kullandığı dosya.
• Uygulamanın statik varlık klasörü.

IIS alt uygulaması olarak barındırma

Tek başına bir uygulama IIS alt uygulaması olarak barındırılıyorsa aşağıdakilerden birini gerçekleştirin:

• Devralınan ASP.NET Çekirdek Modülü işleyicisini devre dışı bırakın.

  Dosyanın bölümüne bir <handlers> bölüm ekleyerek uygulamanın yayımlanan web.config dosyasındaki işleyiciyi Blazor <system.webServer> kaldırın:

  <handlers>
    <remove name="aspNetCore" />
  </handlers>
  

• olarak ayarlanmış bir <location> öğe inheritInChildApplications kullanarak kök (üst) uygulamanın <system.webServer> bölümünün devralını falsedevre dışı bırakın:

  <?xml version="1.0" encoding="utf-8"?>
  <configuration>
    <location path="." inheritInChildApplications="false">
      <system.webServer>
        <handlers>
          <add name="aspNetCore" ... />
        </handlers>
        <aspNetCore ... />
      </system.webServer>
    </location>
  </configuration>
  

  Not

  Kök (üst) uygulamanın <system.webServer> bölümünün devralmayı devre dışı bırakmak, .NET SDK'sı kullanılarak yayımlanan uygulamalar için varsayılan yapılandırmadır.

İşleyiciyi kaldırma veya devralmayı devre dışı bırakma işlemi, uygulamanın temel yolunu yapılandırmaya ek olarak gerçekleştirilir. Uygulamanın dosyasındaki uygulama temel yolunu, IIS'de index.html alt uygulamayı yapılandırırken kullanılan IIS diğer adı olarak ayarlayın.

Konak ve ASP.NET Core'u Blazor dağıtma makalesindeki yönergeleri izleyerek uygulamanın temel yolunu yapılandırın.

Brotli ve Gzip sıkıştırma

IIS, aracılığıyla tek başına Blazor WebAssembly uygulamalar için Brotli veya Gzip sıkıştırılmış Blazor varlıklarına hizmet vermek üzere yapılandırılabilirweb.config. Örnek bir yapılandırma dosyası için bkz web.config. .

Aşağıdaki senaryolarda örnek web.config dosyanın ek yapılandırması gerekebilir:

• Uygulamanın belirtimi aşağıdakilerden birini çağırır:
  • Örnek web.config dosya tarafından yapılandırılmamış sıkıştırılmış dosyalar sunma.
  • Örnek web.config dosya tarafından yapılandırılan sıkıştırılmış dosyaları sıkıştırılmamış biçimde sunma.
• Sunucunun IIS yapılandırması (örneğin, applicationHost.config) sunucu düzeyinde IIS varsayılanları sağlar. Sunucu düzeyinde yapılandırmaya bağlı olarak, uygulama örnek web.config dosyanın içerdiğinden farklı bir IIS yapılandırması gerektirebilir.

Özel web.config dosyalar hakkında daha fazla bilgi için Özel web.config dosya kullanma bölümüne bakın.

Sorun giderme

Web sitesinin yapılandırmasına erişmeye çalışırken bir 500 - İç Sunucu Hatası alınırsa ve IIS Yöneticisi hata oluşturursa, URL Yeniden Yazma Modülünün yüklendiğini onaylayın. Modül yüklenmediğinde, web.config dosya IIS tarafından ayrıştırılamaz. Bu, IIS Yöneticisi'nin web sitesinin yapılandırmasını ve web sitesinin statik dosyaları sunmasını Blazorengeller.

IIS dağıtımlarında sorun giderme hakkında daha fazla bilgi için bkz. Azure Uygulaması Service ve IIS'de ASP.NET Core sorunlarını giderme.

Azure Depolama

Azure Depolama statik dosya barındırma sunucusuz Blazor uygulama barındırmaya izin verir. Özel etki alanı adları, Azure Content Delivery Network (CDN) ve HTTPS desteklenir.

Blob hizmeti bir depolama hesabında statik web sitesi barındırma için etkinleştirildiğinde:

• Dizin belge adını olarak index.htmlayarlayın.
• Hata belgesi yolunu olarak index.htmlayarlayın. Razor bileşenleri ve diğer dosya dışı uç noktalar blob hizmeti tarafından depolanan statik içerikteki fiziksel yollarda yer almaz. Yönlendiricinin işlemesi gereken bu kaynaklardan birine yönelik bir istek alındığında Blazor , blob hizmeti tarafından oluşturulan 404 - Bulunamadı hatası isteği Hata belgesi yoluna yönlendirir. Blob index.html döndürülür ve Blazor yönlendirici yolu yükler ve işler.

Dosyaların üst bilgilerindeki uygunsuz MIME türleri nedeniyle çalışma zamanında dosyalar Content-Type yüklenmiyorsa, aşağıdaki eylemlerden birini gerçekleştirin:

• Dosyalar dağıtıldığında doğru MIME türlerini (Content-Type üst bilgiler) ayarlamak için araçlarınızı yapılandırın.

• Uygulama dağıtıldıktan sonra dosyaların MIME türlerini (Content-Type üst bilgiler) değiştirin.

  Her dosya için Depolama Gezgini(Azure portalı) içinde:

  1. Dosyaya sağ tıklayın ve Özellikler’i seçin.
  2. ContentType'ı ayarlayın ve Kaydet düğmesini seçin.

Daha fazla bilgi için bkz . Azure Depolama'da statik web sitesi barındırma.

Nginx

Aşağıdaki nginx.conf dosya, Nginx'in diskte karşılık gelen bir dosyayı bulamayışında index.html dosyayı gönderecek şekilde nasıl yapılandırıldığını gösterecek şekilde basitleştirilmiştir.

events { }
http {
    server {
        listen 80;

        location / {
            root      /usr/share/nginx/html;
            try_files $uri $uri/ /index.html =404;
        }
    }
}

ile limit_reqBlazor WebAssembly NGINX seri hızı sınırını ayarlarken, uygulamalar bir uygulama tarafından yapılan görece çok sayıda isteği karşılamak için büyük burst bir parametre değeri gerektirebilir. Başlangıçta değeri en az 60 olarak ayarlayın:

http {
    server {
        ...

        location / {
            ...

            limit_req zone=one burst=60 nodelay;
        }
    }
}

Tarayıcı geliştirici araçları veya ağ trafiği aracı isteklerin 503 - Hizmet Kullanılamıyor durum kodu aldığını gösteriyorsa değeri artırın.

Üretim Nginx web sunucusu yapılandırması hakkında daha fazla bilgi için bkz . NGINX Plus ve NGINX Yapılandırma Dosyaları Oluşturma.

Apache

Apache'ye uygulama Blazor WebAssembly dağıtmak için:

1. Apache yapılandırma dosyasını dizinine /etc/httpd/conf.d/ yerleştirin.

2. Uygulamanın yayımlanan varlıklarını (/bin/Release/{TARGET FRAMEWORK}/publish/wwwrootyer tutucu hedef {TARGET FRAMEWORK} çerçevedir) dizine /var/www/blazorapp (yapılandırma dosyasında belirtilen DocumentRoot konum) yerleştirin.

3. Apache hizmetini yeniden başlatın.

Daha fazla bilgi için bkz. mod_mime ve mod_deflate.

GitHub Pages

Sayfaları dağıtan varsayılan GitHub Eylemi, klasör gibi alt çizgiyle başlayan klasörlerin dağıtımını _framework atlar. Alt çizgiyle başlayan klasörleri dağıtmak için Git dalı için boş .nojekyll bir dosya ekleyin.

Git, gibi JavaScript (JS) dosyalarını metin olarak blazor.webassembly.jsele alır ve satır sonlarını CRLF'den (satır dönüş satırı akışı) dağıtım işlem hattında LF'ye (satır akışı) dönüştürür. Dosyalarda yapılan JS bu değişiklikler, dosyadaki blazor.boot.json istemciye göndermekten Blazor farklı dosya karmaları oluşturur. Uyuşmazlıklar istemcide bütünlük denetimi hatalarına neden olur. Bu sorunu çözmenin bir yaklaşımı, uygulamanın varlıklarını Git dala eklemeden önce satırı olan *.js binary bir .gitattributes dosya eklemektir. Satırı, Git'i *.js binary dosyaları ikili dosyalar olarak değerlendirecek JS şekilde yapılandırarak dağıtım işlem hattındaki dosyaların işlenmesini önler. İşlenmemiş dosyaların dosya karmaları dosyadaki blazor.boot.json girdilerle eşleşir ve istemci tarafı bütünlük denetimleri geçer. Daha fazla bilgi için bkz . ASP.NET Core Blazor WebAssembly .NET çalışma zamanı ve uygulama paketi önbelleğe alma.

URL yeniden yazma işlemlerini işlemek için, isteği sayfaya index.html yönlendirmeyi işleyen bir betik içeren bir dosya ekleyinwwwroot/404.html. Bir örnek için GitHub deposuna SteveSandersonMS/BlazorOnGitHubPagesbakın:

• wwwroot/404.html
• Canlı site

Kuruluş sitesi yerine proje sitesi kullanırken içindeki etiketini wwwroot/index.htmlgüncelleştirin<base>. href Öznitelik değerini, sonunda eğik çizgiyle GitHub deposu adına ayarlayın (örneğin, /my-repository/). SteveSandersonMS/BlazorOnGitHubPages GitHub deposunda temelhref, yapılandırma dosyası tarafından .github/workflows/main.yml yayımlandığında güncelleştirilir.

Docker ile tek başına

Tek başına Blazor WebAssembly bir uygulama, statik dosya sunucusu tarafından barındırmak için bir dizi statik dosya olarak yayımlanır.

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

• Ngnix 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.
• Uygulamaya hizmet vermek için gereken ek yapılandırmayı Blazor WebAssembly uygulayın.

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

• Bu makalenin Nginx bölümü veya Apache bölümü
• Docker Belgeleri

Konak yapılandırma değerleri

Blazor WebAssembly uygulamalar , geliştirme ortamında çalışma zamanı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ı bir komut isteminde yerel olarak çalıştırırken bağımsız değişkenini geçirin. 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 run) ile dotnet watch bir komut isteminden çalıştırıldığında kullanılır.

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

• Visual Studio'da, Özellikler>Hata Ayıklama>Uygulaması bağımsız değişkenlerinde 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 dosyaya launchSettings.json ekler.

  --contentroot=/content-root-path
  

Yol tabanı

--pathbase bağımsız değişkeni, kök olmayan göreli URL yolu ile yerel olarak çalıştırılacak bir uygulamanın uygulama temel yolunu ayarlar (<base>etiket href hazırlama ve üretim dışında / bir yola ayarlanır). Aşağıdaki örneklerde uygulamanın /relative-URL-path yol tabanı verilmiştir. Daha fazla bilgi için bkz . Uygulama temel yolu.

• Uygulamayı bir komut isteminde yerel olarak çalıştırırken bağımsız değişkenini geçirin. 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 ve (veyadotnet run) ile dotnet watch bir komut isteminden kullanılır.

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

• Visual Studio'da, Özellikler>Hata Ayıklama>Uygulaması bağımsız değişkenlerinde 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 dosyaya launchSettings.json ekler.

  --pathbase=/relative-URL-path
  

URL'ler

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

• Uygulamayı bir komut isteminde yerel olarak çalıştırırken bağımsız değişkenini geçirin. 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 ve (veyadotnet run) ile dotnet watch bir komut isteminden kullanılır.

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

• Visual Studio'da, Özellikler>Hata Ayıklama>Uygulaması bağımsız değişkenlerinde 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 dosyaya launchSettings.json ekler.

  --urls=http://127.0.0.1:0
  

dir {PATH} | rename-item -NewName { $_.name -replace ".dll\b",".bin" }
((Get-Content {PATH}\blazor.boot.json -Raw) -replace '.dll"','.bin"') | Set-Content {PATH}\blazor.boot.json

((Get-Content {PATH}\service-worker-assets.js -Raw) -replace '.dll"','.bin"') | Set-Content {PATH}\service-worker-assets.js

for f in {PATH}/*; do mv "$f" "`echo $f | sed -e 's/\.dll/.bin/g'`"; done
sed -i 's/\.dll"/.bin"/g' {PATH}/blazor.boot.json

sed -i 's/\.dll"/.bin"/g' {PATH}/service-worker-assets.js

param([string]$filepath,[string]$tfm)
dir $filepath\bin\Release\$tfm\browser-wasm\publish\wwwroot\_framework | rename-item -NewName { $_.name -replace ".dll\b",".bin" }
((Get-Content $filepath\bin\Release\$tfm\browser-wasm\publish\wwwroot\_framework\blazor.boot.json -Raw) -replace '.dll"','.bin"') | Set-Content $filepath\bin\Release\$tfm\browser-wasm\publish\wwwroot\_framework\blazor.boot.json
Remove-Item $filepath\bin\Release\$tfm\browser-wasm\publish\wwwroot\_framework\blazor.boot.json.gz
Remove-Item $filepath\bin\Release\$tfm\browser-wasm\publish\wwwroot\_framework\blazor.boot.json.br

((Get-Content $filepath\bin\Release\$tfm\browser-wasm\publish\wwwroot\service-worker-assets.js -Raw) -replace '.dll"','.bin"') | Set-Content $filepath\bin\Release\$tfm\browser-wasm\publish\wwwroot\_framework\wwwroot\service-worker-assets.js
Remove-Item $filepath\bin\Release\$tfm\browser-wasm\publish\wwwroot\_framework\wwwroot\service-worker-assets.js.gz
Remove-Item $filepath\bin\Release\$tfm\browser-wasm\publish\wwwroot\_framework\wwwroot\service-worker-assets.js.br

<Target Name="ChangeDLLFileExtensions" AfterTargets="AfterPublish" Condition="'$(Configuration)'=='Release'">
  <Exec Command="powershell.exe -command &quot;&amp; { .\ChangeDLLExtensions.ps1 '$(SolutionDir)' '$(TargetFramework)'}&quot;" />
</Target>

<staticContent>
  ...
  <mimeMap fileExtension=".bin" mimeType="application/octet-stream" />
  ...
</staticContent>

<mimeMap fileExtension=".bin.br" mimeType="application/octet-stream" />
<mimeMap fileExtension=".bin.gz" mimeType="application/octet-stream" />

- <mimeMap fileExtension=".dll" mimeType="application/octet-stream" />

- <mimeMap fileExtension=".dll.br" mimeType="application/octet-stream" />
- <mimeMap fileExtension=".dll.gz" mimeType="application/octet-stream" />

Önceki dağıtım bozulması

Genellikle dağıtımda:

• 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.

Bütünlük denetimi hatalarını çözme

Bir uygulamanın başlangıç dosyalarını indirdiğinde Blazor WebAssembly , tarayıcıya yanıtlar üzerinde bütünlük denetimleri gerçekleştirmesini belirtir. BlazorDLL (), WebAssembly (.dll.wasm ) ve dosyadaki istemcilerde blazor.boot.json önbelleğe alınmayan diğer dosyalar için SHA-256 karma değerleri gönderir. Önbelleğe alınan dosyaların dosya karmaları, dosyadaki blazor.boot.json karmalarla karşılaştırılır. Eşleşen karma içeren önbelleğe alınmış dosyalar için önbelleğe Blazor alınmış dosyaları kullanır. Aksi takdirde, dosyalar sunucudan istenir. Bir dosya indirildikten sonra karma değeri bütünlük doğrulaması için yeniden denetlenecektir. İndirilen herhangi bir dosyanın bütünlük denetimi başarısız olursa tarayıcı tarafından bir hata oluşturulur.

Blazor'nin dosya bütünlüğünü yönetme algoritması:

• Kullanıcının uygulama dosyalarını indirme işlemi sırasında web sunucunuza yeni bir dağıtım uygulanması gibi, uygulamanın tutarsız bir dosya kümesini yükleme riskini almamasını sağlar. Tutarsız dosyalar hatalı çalışan bir uygulamaya neden olabilir.
• Kullanıcının tarayıcısının hiçbir zaman tutarsız veya geçersiz yanıtları önbelleğe almamasını sağlar. Bu, kullanıcı sayfayı el ile yenilese bile uygulamanın başlatılmasını engelleyebilir.
• Beklenen SHA-256 karmaları değişene kadar yanıtları önbelleğe alma ve sunucu tarafı değişikliklerini denetlememenizi güvenli hale getirir, böylece sonraki sayfa yüklemeleri daha az istek içerir ve daha hızlı tamamlanır.

Web sunucusu beklenen SHA-256 karmalarıyla eşleşmeyen yanıtlar döndürürse, tarayıcının geliştirici konsolunda aşağıdaki örneğe benzer bir hata görüntülenir:

Hesaplanan SHA-256 bütünlüğü 'IIa70iwvmEg5WiDV17OpQ5eCztNYqL186J56852RpJY=' ile 'https://myapp.example.com/_framework/MyBlazorApp.dll' kaynağının 'integrity' özniteliğinde geçerli bir özet bulunamadı. Kaynak engellendi.

Çoğu durumda, uyarı bütünlük denetimiyle ilgili bir sorun olduğunu göstermez. Bunun yerine, uyarı genellikle başka bir sorunun var olduğu anlamına gelir.

'Blazor WebAssemblynin önyükleme başvuru kaynağı için GitHub deposundaki dosyaya dotnet/aspnetcore bakınBoot.WebAssembly.ts.

Bütünlük sorunlarını tanılama

Bir uygulama oluşturulduğunda, oluşturulan blazor.boot.json bildirim, derleme çıkışının oluşturulduğu sırada önyükleme kaynaklarının SHA-256 karmalarını açıklar. Içindeki SHA-256 karmaları tarayıcıya teslim edilen dosyalarla blazor.boot.json eşleştiği sürece bütünlük denetimi geçer.

Bunun başarısız olmasının yaygın nedenleri şunlardır:

• Web sunucusunun yanıtı, tarayıcının istediği dosya yerine bir hatadır (örneğin, 404 - Bulunamadı veya 500 - İç Sunucu Hatası). Bu, tarayıcı tarafından yanıt hatası olarak değil bütünlük denetimi hatası olarak bildirilir.
• Dosyaların derlemesi ve tarayıcıya teslimi arasında dosyaların içeriğini değiştiren bir şey var. Bu durum oluşabilir:
  • Siz veya derleme araçları derleme çıktısını el ile değiştirirseniz.
  • Dağıtım işleminin bazı yönleri dosyaları değiştirdiyse. Örneğin, Git tabanlı dağıtım mekanizması kullanıyorsanız, Windows'da dosya işleyip Bunları Linux'ta kullanıma alırsanız Git'in Windows stili satır sonlarını saydam bir şekilde Unix stili satır sonlarına dönüştürdüğünü unutmayın. Dosya satırı sonlarının değiştirilmesi SHA-256 karmalarını değiştirir. Bu sorunu önlemek için derleme yapıtlarını dosya olarak kabul etmek için kullanmayı .gitattributes göz önünde bulundurun.binary
  • Web sunucusu, dosya içeriğini sunmanın bir parçası olarak değiştirir. Örneğin, bazı içerik dağıtım ağları (CDN'ler) HTML'yi otomatik olarak küçültmeyi dener ve bu şekilde değiştirir. Bu tür özellikleri devre dışı bırakmanız gerekebilir.
• Dosya blazor.boot.json düzgün yüklenemedi veya istemcide yanlış önbelleğe alınmış. Yaygın nedenler şunlardan birini içerir:
  • Yanlış yapılandırılmış veya hatalı çalışan özel geliştirici kodu.
  • Bir veya daha fazla yanlış yapılandırılmış ara önbelleğe alma katmanı.

Sizin durumunuzda bunlardan hangisinin geçerli olduğunu tanılamak için:

1. Hata iletisini okuyarak hangi dosyanın hatayı tetiklediğine dikkat edin.
2. Tarayıcınızın geliştirici araçlarını açın ve Ağ sekmesine bakın. Gerekirse, istek ve yanıt listesini görmek için sayfayı yeniden yükleyin. Bu listede hatayı tetikleyen dosyayı bulun.
3. Yanıttaki HTTP durum kodunu denetleyin. Sunucu 200 - Tamam (veya başka bir 2xx durum kodu) dışında bir şey döndürürse tanılamanız gereken bir sunucu tarafı sorununuz vardır. Örneğin, durum kodu 403 yetkilendirme sorunu olduğu, durum kodu 500 ise sunucunun belirtilmeyen bir şekilde başarısız olduğu anlamına gelir. Uygulamayı tanılamak ve düzeltmek için sunucu tarafı günlüklerine başvurun.
4. Durum kodu 200 - Kaynak için Tamam ise, tarayıcının geliştirici araçlarında yanıt içeriğine bakın ve içeriğin beklenen verilerle eşleşip eşleşmediğini denetleyin. Örneğin, sık karşılaşılan bir sorun, isteklerin diğer dosyalar için bile verilerinizi index.html döndürmesi için yönlendirmeyi yanlış yapılandırmaktır. İsteklere .wasm verilen yanıtların WebAssembly ikilileri olduğundan ve isteklere verilen .dll yanıtların .NET derleme ikili dosyaları olduğundan emin olun. Aksi takdirde, tanılamanız gereken bir sunucu tarafı yönlendirme sorununuz vardır.
5. Bütünlük sorunlarını giderme PowerShell betiğiyle uygulamanın yayımlanan ve dağıtılan çıkışını doğrulamaya bakın.

Sunucunun makul şekilde doğru veriler döndürdüğünü onaylarsanız, dosyanın derlemesi ve teslimi arasında içeriği değiştiren başka bir şey olmalıdır. Bunu araştırmak için:

• Derleme araç zincirini ve dağıtım mekanizmasını, dosyalar oluşturulduktan sonra dosyaları değiştirip değiştirmediklerini inceleyin. Bunun bir örneği, Git'in daha önce açıklandığı gibi dosya satırı sonlarını dönüştürmesidir.
• Yanıtları dinamik olarak değiştirmeye (örneğin, HTML'yi küçültmeye çalışma) ayarlanmış olma ihtimaline karşı web sunucusunu veya CDN yapılandırmasını inceleyin. Web sunucusunun HTTP sıkıştırması (örneğin, döndüren content-encoding: br veya content-encoding: gzip) uygulaması sorun değildir, çünkü bu durum sıkıştırmadan sonra sonucu etkilemez. Ancak, web sunucusunun sıkıştırılmamış verileri değiştirmesi uygun değildir .

Bütünlük sorunlarını giderme PowerShell betiği

integrity.ps1 Yayımlanan ve dağıtılan Blazor bir uygulamayı doğrulamak için PowerShell betiğini kullanın. Betik, uygulamanın çerçevenin tanımlayabildiği bütünlük sorunları Blazor olduğunda başlangıç noktası olarak PowerShell Core 7 veya üzeri için sağlanır. PowerShell'in 7.2.0 sürümünden sonraki bir sürümde çalışıyor olması da dahil olmak üzere, uygulamalarınız için betiğin özelleştirilmesi gerekebilir.

Betik, bütünlük karmaları içeren farklı bildirimlerdeki publish sorunları algılamak için klasördeki ve dağıtılan uygulamadan indirilen dosyaları denetler. Bu denetimler en yaygın sorunları algılamalıdır:

• Yayımlanan çıktıdaki bir dosyayı farkında olmadan değiştirdiniz.
• Uygulama dağıtım hedefine doğru dağıtılmadı veya dağıtım hedefinin ortamında bir şey değiştirildi.
• Dağıtılan uygulama ile uygulamayı yayımlama çıktısı arasında farklar vardır.

Betiği bir PowerShell komut kabuğunda aşağıdaki komutla çağırın:

.\integrity.ps1 {BASE URL} {PUBLISH OUTPUT FOLDER}

Aşağıdaki örnekte, betik konumunda yerel olarak çalışan bir uygulamada https://localhost:5001/yürütülür:

.\integrity.ps1 https://localhost:5001/ C:\TestApps\BlazorSample\bin\Release\net6.0\publish\

Yer tutucular:

• {BASE URL}: Dağıtılan uygulamanın URL'si. Sondaki eğik çizgi (/) gereklidir.
• {PUBLISH OUTPUT FOLDER}: Uygulamanın publish dağıtım için yayımlandığı klasörün veya konumun yolu.

C:\Users\{USER}\Documents\GitHub\AspNetCore.Docs\aspnetcore\blazor\host-and-deploy\webassembly\_samples\integrity.ps1

CertUtil -hashfile {PATH AND FILE NAME} {SHA256|MD5}

PWA olmayan uygulamalar için bütünlük denetimini devre dışı bırakma

Çoğu durumda, bütünlük denetimini devre dışı bırakmayın. Bütünlük denetiminin devre dışı bırakılması, beklenmeyen yanıtlara neden olan ve daha önce listelenen avantajların kaybolmasına neden olan temel sorunu çözmez.

Web sunucusunun tutarlı yanıtlar döndürmeye dayanamayabileceği durumlar olabilir ve temel alınan sorun çözülene kadar bütünlük denetimlerini geçici olarak devre dışı bırakmaktan başka seçeneğiniz olmayabilir.

Bütünlük denetimlerini devre dışı bırakmak için Blazor WebAssembly , uygulamanın proje dosyasında.csproj ():

<BlazorCacheBootResources>false</BlazorCacheBootResources>

BlazorCacheBootResourcesayrıca , .wasmve diğer dosyaları SHA-256 karmalarına göre önbelleğe alma .dllvarsayılan davranışını devre dışı bırakır Blazorçünkü özelliği SHA-256 karmalarının doğruluğuna dayanamazsınız. Bu ayarda bile tarayıcının normal HTTP önbelleği bu dosyaları önbelleğe almaya devam edebilir, ancak bunun olup olmaması web sunucusu yapılandırmanıza ve cache-control hizmet veren üst bilgilere bağlıdır.

Bütünlük denetimini devre dışı bırakmanın gerekli olduğu senaryoların kapsamlı bir listesini sağlayamıyoruz. Sunucular, isteği çerçevenin kapsamı Blazor dışında rastgele yollarla yanıtlayabilir. Çerçeve, uygulamanın sağlayabilecekleri BlazorCacheBootResources bütünlük garantisini kaybetme pahasına uygulamayı çalıştırılabilir hale getirme ayarını sağlar. Yine, özellikle üretim dağıtımları için bütünlük denetimini devre dışı bırakmanızı önermiyoruz. Geliştiriciler, bütünlük denetiminin başarısız olmasına neden olan temel bütünlük sorununu çözmeye çalışmalıdır.

Bütünlük sorunlarına neden olabilecek birkaç genel durum şunlardır:

• Bütünlüğün denetlenemez olduğu HTTP üzerinde çalışıyor.
• Dağıtım işleminiz herhangi bir şekilde yayımlandıktan sonra dosyaları değiştirirse.
• Konağınız dosyaları herhangi bir şekilde değiştirirse.

PWA'lar için bütünlük denetimini devre dışı bırakma

Blazor'nin Aşamalı Web Uygulaması (PWA) şablonu, uygulama dosyalarını çevrimdışı kullanım için getirmek ve depolamaktan sorumlu olan önerilen service-worker.published.js bir dosya içeriyor. Bu, normal uygulama başlatma mekanizmasından ayrı bir işlemdir ve kendi ayrı bütünlük denetimi mantığına sahiptir.

Dosyanın içinde service-worker.published.js aşağıdaki satır bulunur:

.map(asset => new Request(asset.url, { integrity: asset.hash }));

Bütünlük denetimini devre dışı bırakmak için, satırı aşağıdaki şekilde değiştirerek parametresini kaldırın integrity :

.map(asset => new Request(asset.url));

Bütünlük denetiminin devre dışı bırakılması, bütünlük denetimi tarafından sunulan güvenlik garantilerini kaybetmeniz anlamına gelir. Örneğin, yeni bir sürümü dağıttığınız anda kullanıcının tarayıcısı uygulamayı önbelleğe alırsa, eski dağıtımdaki bazı dosyaları ve yeni dağıtımdaki bazı dosyaları önbelleğe alma riski vardır. Böyle bir durumda uygulama, siz daha fazla güncelleştirme dağıtana kadar bozuk durumda takılır.