Menghosting dan menyebarkan ASP.NET Core Blazor

Artikel ini menjelaskan cara menghosting dan menyebarkan aplikasi Blazor.

Menerbitkan aplikasi

Aplikasi diterbitkan untuk penyebaran dalam konfigurasi Rilis.

Visual Studio

1. Pilih perintah Terbitkan {APPLICATION} dari menu Build, tempat {APPLICATION} tempat penampung nama aplikasi.
2. Pilih terbitkan target. Untuk menerbitkan secara lokal, pilih Folder. Pilih Selanjutnya.
3. Saat menerbitkan secara lokal, terima lokasi folder default atau tentukan lokasi yang berbeda. Pilih Selesai untuk menyimpan profil. Pilih Tutup.
4. Untuk membersihkan folder publikasi target sebelum menerbitkan aplikasi, pilih Tampilkan semua pengaturan. Pilih Pengaturan>Opsi Terbitkan File>Hapus semua file yang ada sebelum menerbitkan. Pilih Simpan.
5. Pilih tombol Terbitkan.

Visual Studio Code dan .NET CLI

Buka jendela perintah di direktori akar proyek.

dotnet publish Gunakan perintah untuk menerbitkan aplikasi:

dotnet publish

Sebelum .NET 8, konfigurasi penerbitan default adalah Debug. Saat menerbitkan aplikasi yang menargetkan .NET 7 atau yang lebih lama, berikan opsi -c|--configuration ke perintah dengan "Release" untuk menerbitkan dalam konfigurasi Release.

dotnet publish -c Release

Menerbitkan aplikasi akan memicu pemulihan dependensi proyek dan membangun proyek sebelum membuat aset untuk penyebaran. Sebagai bagian dari proses pembangunan, metode dan rangkaian yang tidak digunakan dihapus untuk mengurangi ukuran unduhan aplikasi dan waktu muat.

Kosongkan folder penerbitan target

Saat menggunakan dotnet publish perintah dalam shell perintah untuk menerbitkan aplikasi, perintah menghasilkan file yang diperlukan untuk penyebaran berdasarkan status proyek saat ini dan menempatkan file ke dalam folder output yang ditentukan. Perintah tidak secara otomatis membersihkan folder target sebelum menerbitkan aplikasi.

Untuk mengosongkan folder target secara otomatis sebelum aplikasi diterbitkan, tambahkan target MSBuild berikut ke file proyek aplikasi (.csproj) di bawah elemen root <Project> :

<Target Name="_RemovePublishDirBeforePublishing" BeforeTargets="BeforePublish">
  <RemoveDir Directories="$(PublishDir)" Condition="'$(PublishDir)' != ''" />
</Target>

Lokasi publikasi default

• Blazor Web App: Aplikasi diterbitkan ke dalam folder /bin/Release/{TARGET FRAMEWORK}/publish, di mana tempat penampung {TARGET FRAMEWORK} adalah kerangka target. Sebarkan konten dari folder publish ke host.
• Standalone Blazor WebAssembly Mandiri: Aplikasi diterbitkan ke folder bin/Release/{TARGET FRAMEWORK}/publish atau bin/Release/{TARGET FRAMEWORK}/browser-wasm/publish. Untuk menyebarkan apl sebagai situs statis, salin konten dari folder wwwroot ke host situs statis.

IIS

Untuk menghosting Blazor aplikasi di IIS, lihat sumber daya berikut:

• Hosting IIS
  • Menerbitkan aplikasi ASP.NET Core ke IIS
  • Host ASP.NET Core di Windows dengan IIS
• Blazor: aplikasi (.NET 8 atau yang lebih baru) dan aplikasi (.NET 7 atau yang lebih lama) yang berjalan di IIS, termasuk IIS dengan Azure Virtual Machines (VM) yang menjalankan OS Windows dan Azure App Service.
• Host dan sebarkan ASP.NET Core Blazor WebAssembly dengan IIS: Aplikasi mandiri Blazor WebAssembly (semua versi .NET) dan aplikasi yang dihosting Blazor WebAssembly (.NET 7 atau versi sebelumnya).
• Hosting sub-aplikasi IIS
  • Ikuti panduan jalur dasar aplikasi sebelum menerbitkan aplikasi. Contoh menggunakan jalur /CoolApp dasar aplikasi dan menunjukkan cara mendapatkan jalur dasar dari pengaturan aplikasi atau penyedia konfigurasi lainnya.
  • Ikuti panduan konfigurasi sub-aplikasi dalam Konfigurasi tingkat lanjut. Jalur folder sub-aplikasi di bawah situs akar menjadi jalur virtual sub-aplikasi. Untuk jalur /CoolAppdasar aplikasi , Blazor aplikasi ditempatkan di folder bernama CoolApp di bawah situs akar dan sub-aplikasi mengambil jalur virtual ./CoolApp

Berbagi kelompok aplikasi di antara aplikasi ASP.NET Core tidak didukung, termasuk untuk aplikasi Blazor. Gunakan satu kelompok aplikasi per aplikasi saat menghosting dengan IIS, dan hindari penggunaan direktori virtual IIS untuk menghosting beberapa aplikasi.

Dukungan penggabung JavaScript

Blazor Runtime bergantung pada file JavaScript (JS), runtime .NET yang dikompilasi ke dalam kode WebAssembly, dan rakitan terkelola yang dikemas sebagai file WebAssembly. Blazor Saat aplikasi dibangun, Blazor runtime bergantung pada file-file ini yang berasal dari lokasi build yang berbeda. Karena kendala ini, output build Blazor tidak kompatibel dengan bundler JS, seperti Gulp, Webpack, dan Rollup.

Untuk menghasilkan output build yang kompatibel dengan JS bunder selama penerbitan, atur WasmBundlerFriendlyBootConfig properti MSBuild ke true dalam file proyek aplikasi:

<WasmBundlerFriendlyBootConfig>true</WasmBundlerFriendlyBootConfig>

Penting

Fitur ini hanya menghasilkan output ramah bundler saat menerbitkan aplikasi.

Output tidak dapat dijalankan secara langsung di browser, tetapi dapat digunakan oleh JS alat untuk memaketkan JS file dengan skrip lainnya yang disediakan pengembang.

Ketika WasmBundlerFriendlyBootConfig diaktifkan, yang dihasilkan oleh JS berisi import arahan untuk semua aset di aplikasi, yang membuat dependensi terlihat untuk bundler. Banyak aset tidak dapat dimuat oleh browser, tetapi bunder biasanya dapat dikonfigurasi untuk mengenali aset berdasarkan jenis file mereka untuk menangani pemuatan. Untuk informasi lebih lanjut tentang cara mengonfigurasi bundler Anda, lihat dokumentasi bundler.

Catatan

Pembuatan bundel output harus dimungkinkan dengan memetakan impor ke lokasi file individual menggunakan plugin kustom bundler JS. Kami tidak menyediakan plugin seperti itu saat ini.

Catatan

files Mengganti plugin dengan url, semua file aplikasiJS, termasuk Blazorruntime -WebAssembly (base64 dikodekan dalam JS), dibundel ke dalam output. Ukuran file secara signifikan lebih besar (misalnya, 300% lebih besar) daripada ketika file dikumpulkan dengan files plugin, jadi kami tidak merekomendasikan penggunaan url plugin sebagai praktik umum saat menghasilkan output yang ramah bundler untuk JS pemrosesan bunder.

Contoh aplikasi berikut didasarkan pada Rollup. Konsep serupa berlaku saat menggunakan bundler lain JS.

Aplikasi sampel demonstrasi untuk Blazor WebAssembly di aplikasi React (BlazorWebAssemblyReact) dan .NET di WebAssembly di aplikasi React (DotNetWebAssemblyReact) untuk .NET 10 atau yang lebih baru tersedia di Blazor repositori GitHub sampel (dotnet/blazor-samples).

Aspek Blazor WebAssembly caching berlaku untuk Blazor Web Apps

Blazor panduan penyimpanan sementara bundel dan penyimpanan sementara HTTP dalam Blazor WebAssembly node berfokus pada aplikasi standalone Blazor WebAssembly, tetapi beberapa aspek penyimpanan sementara sisi klien dalam artikel ini juga berlaku untuk Blazor Web App yang mengadopsi mode render Interactive WebAssembly atau Interactive Auto. Jika Blazor Web App yang merender konten sisi klien mengalami masalah aset statis atau caching bundel, lihat panduan dalam artikel ini untuk memecahkan masalah:

• ASP.NET Core Blazor WebAssembly kegagalan caching dan pemeriksaan integritas
• Hindari masalah penembolokan HTTP saat memutakhirkan aplikasi ASP.NET Core Blazor

Blazor Server MapFallbackToPage konfigurasi

Bagian ini hanya berlaku untuk Blazor Server aplikasi. MapFallbackToPage tidak didukung di Blazor Web Apps dan Blazor WebAssembly aplikasi.

Dalam skenario di mana aplikasi memerlukan area terpisah dengan sumber daya kustom dan komponen Razor:

• Buat folder di dalam folder Pages aplikasi untuk menyimpan sumber daya. Misalnya, bagian administrator aplikasi dibuat di folder baru bernama Admin (Pages/Admin).

• Buat halaman akar (_Host.cshtml) untuk area tersebut. Misalnya, buat file Pages/Admin/_Host.cshtml dari halaman akar utama aplikasi (Pages/_Host.cshtml). Jangan berikan arahan @page di halaman Admin _Host.

• Tambahkan tata letak ke folder area (misalnya, Pages/Admin/_Layout.razor). Di tata letak untuk area terpisah, atur tag <base>href agar sesuai dengan folder area (misalnya, <base href="/Admin/" />). Untuk tujuan demonstrasi, tambahkan ~/ ke sumber daya statis di halaman. Contohnya:

  • ~/css/bootstrap/bootstrap.min.css
  • ~/css/site.css
  • ~/BlazorSample.styles.css (namespace aplikasi contoh adalah BlazorSample)
  • ~/_framework/blazor.server.js (skrip Blazor)

• Jika area tersebut harus memiliki folder aset statisnya sendiri, tambahkan folder tersebut dan tentukan lokasinya ke Middleware File Statis di Program.cs (misalnya, app.UseStaticFiles("/Admin/wwwroot")).

• Komponen Razor ditambahkan ke folder area. Minimal, tambahkan komponen Index ke folder area dengan arahan @page yang benar untuk area tersebut. Misalnya, tambahkan file Pages/Admin/Index.razor berdasarkan file Pages/Index.razor default aplikasi. Tunjukkan area Admin sebagai template rute di bagian atas file (@page "/admin"). Tambahkan komponen tambahan sesuai kebutuhan. Misalnya, Pages/Admin/Component1.razor dengan @page direktif dan template rute @page "/admin/component1.

• Di Program.cs, panggil MapFallbackToPage untuk jalur permintaan area tepat sebelum jalur halaman akar cadangan ke halaman _Host:

  ...
  app.UseRouting();
  
  app.MapBlazorHub();
  app.MapFallbackToPage("~/Admin/{*clientroutes:nonfile}", "/Admin/_Host");
  app.MapFallbackToPage("/_Host");
  
  app.Run();