Pola Hosting Konten Statik

Menyebarkan konten statik ke layanan penyimpanan berbasis cloud yang dapat mengirimkannya langsung ke klien. Ini dapat mengurangi kebutuhan akan instans komputasi yang mungkin mahal harganya.

Konteks dan masalah

Aplikasi web umumnya mencakup beberapa elemen konten statis. Konten statis ini mungkin mencakup halaman HTML dan sumber daya lain seperti gambar dan dokumen yang tersedia untuk klien, baik sebagai bagian dari halaman HTML (seperti gambar sebaris, lembar gaya, dan file JavaScript sisi klien) atau sebagai unduhan terpisah (seperti dokumen PDF).

Meskipun server web dioptimalkan untuk perenderan dinamis dan penembolokan output, mereka masih harus menangani permintaan untuk mengunduh konten statis. Ini mengonsumsi siklus pemrosesan yang sering kali dapat digunakan dengan lebih baik.

Solusi

Di sebagian besar lingkungan hosting cloud, Anda dapat menempatkan beberapa sumber daya aplikasi dan halaman statis dalam layanan penyimpanan. Layanan penyimpanan dapat melayani permintaan untuk sumber daya tersebut, mengurangi beban pada sumber daya komputasi yang menangani permintaan web lainnya. Biaya untuk penyimpanan yang di-host cloud biasanya jauh lebih sedikit daripada untuk instans komputasi.

Saat menghosting beberapa bagian aplikasi dalam layanan penyimpanan, pertimbangan utama yang ada terkait dengan penyebaran aplikasi dan untuk mengamankan sumber daya yang tidak dimaksudkan untuk tersedia bagi pengguna anonim.

Masalah dan pertimbangan

Pertimbangkan poin-poin berikut saat memutuskan cara menerapkan pola ini:

• Layanan penyimpanan yang dihosting harus mengekspos titik akhir HTTP yang dapat diakses pengguna untuk mengunduh sumber daya statis. Beberapa layanan penyimpanan juga mendukung HTTPS, sehingga Anda dapat meng-host sumber daya dalam layanan penyimpanan yang memerlukan SSL.

• Untuk performa dan ketersediaan maksimum, pertimbangkan untuk menggunakan jaringan pengiriman konten (CDN) untuk menyimpan konten kontainer penyimpanan di beberapa pusat data di seluruh dunia. Namun, Anda mungkin harus membayar biaya untuk menggunakan CDN.

• Akun penyimpanan sering direplikasi secara geografis secara default untuk memberikan ketahanan terhadap peristiwa yang mungkin memengaruhi pusat data. Ini berarti bahwa alamat IP mungkin berubah, tetapi URL akan tetap sama.

• Ketika beberapa konten terletak di akun penyimpanan dan konten lainnya berada dalam instans komputasi yang dihosting, penyebaran dan pembaruan aplikasi menjadi lebih menantang. Anda mungkin harus melakukan penyebaran terpisah, dan versi aplikasi serta konten untuk mengelolanya dengan lebih mudah—terutama ketika konten statis menyertakan file skrip atau komponen UI. Namun, jika hanya sumber daya statis yang perlu diperbarui, mereka dapat dengan mudah diunggah ke akun penyimpanan tanpa perlu memindahkan paket aplikasi.

• Layanan penyimpanan mungkin tidak mendukung penggunaan nama domain kustom. Dalam hal ini perlu untuk menentukan URL lengkap sumber daya dalam tautan karena sumber daya tersebut akan berada di domain yang berbeda dari konten yang dihasilkan secara dinamis yang berisi tautan.

• Kontainer penyimpanan harus dikonfigurasi untuk akses baca publik, tetapi penting untuk memastikan bahwa kontainer tersebut tidak dikonfigurasi untuk akses tulis publik guna mencegah pengguna dapat mengunggah konten.

• Pertimbangkan untuk menggunakan kunci valet atau token untuk mengontrol akses ke sumber daya yang seharusnya tidak tersedia secara anonim. Lihat pola Kunci Valet untuk informasi lebih lanjut.

Kapan menggunakan pola ini

Pola ini berguna untuk:

• Meminimalkan biaya hosting untuk situs web dan aplikasi yang berisi beberapa sumber daya statis.

• Meminimalkan biaya hosting untuk situs web yang hanya terdiri dari konten statis dan sumber daya. Tergantung pada kemampuan sistem penyimpanan penyedia hosting, meng-host situs web yang sepenuhnya statis di akun penyimpanan mungkin bisa dilakukan.

• Mengekspos sumber daya statik dan konten untuk aplikasi yang berjalan di lingkungan hosting lain atau server lokal.

• Menemukan konten di lebih dari satu wilayah geografis menggunakan jaringan pengiriman konten yang membuat cache konten akun penyimpanan di beberapa pusat data di seluruh dunia.

• Biaya pemantauan dan penggunaan bandwidth. Menggunakan akun penyimpanan terpisah untuk beberapa atau semua konten statik memungkinkan biaya lebih mudah dipisahkan dari biaya hosting dan runtime.

Pola ini mungkin tidak berguna dalam situasi berikut:

• Aplikasi perlu melakukan beberapa pemrosesan pada konten statik sebelum mengirimkannya ke klien. Misalnya, mungkin perlu menambahkan stempel waktu ke dokumen.

• Volume konten statik sangat kecil. Overhead pengambilan konten ini dari penyimpanan terpisah dapat lebih besar daripada manfaat biaya memisahkannya dari sumber daya komputasi.

Desain beban kerja

Arsitek harus mengevaluasi bagaimana pola Hosting Konten Statis dapat digunakan dalam desain beban kerja mereka untuk mengatasi tujuan dan prinsip yang tercakup dalam pilar Azure Well-Architected Framework. Contohnya:

Seperti halnya keputusan desain apa pun, pertimbangkan tradeoff terhadap tujuan pilar lain yang mungkin diperkenalkan dengan pola ini.

Contoh

Azure Storage mendukung penyajian konten statik langsung dari kontainer penyimpanan. File dilayani melalui permintaan akses anonim. Secara default, file memiliki URL dalam subdomain core.windows.net, seperti https://contoso.z4.web.core.windows.net/image.png. Anda dapat mengonfigurasi nama domain kustom, dan menggunakan Azure CDN untuk mengakses file melalui HTTPS. Untuk informasi selengkapnya, lihat Hosting situs web statik di Azure Storage.

Hosting situs web statik membuat file tersedia untuk akses anonim. Jika perlu mengontrol siapa yang dapat mengakses file, Anda dapat menyimpan file di penyimpanan blob Azure dan kemudian menghasilkan tanda tangan akses bersama untuk membatasi akses.

Tautan di halaman yang dikirimkan ke klien harus menentukan URL lengkap sumber daya. Jika sumber daya dilindungi dengan kunci valet, seperti tanda tangan akses bersama, tanda tangan ini harus disertakan dalam URL.

Aplikasi contoh yang menunjukkan penggunaan penyimpanan eksternal untuk sumber daya statik tersedia di GitHub. Sampel ini menggunakan file konfigurasi untuk menentukan akun penyimpanan dan kontainer yang menyimpan konten statik.

<Setting name="StaticContent.StorageConnectionString"
         value="UseDevelopmentStorage=true" />
<Setting name="StaticContent.Container" value="static-content" />

Kelas Settings dalam Settings.cs file proyek StaticContentHosting.Web berisi metode untuk mengekstrak nilai-nilai ini dan membangun nilai untai (karakter) yang berisi URL kontainer akun penyimpanan cloud.

public class Settings
{
  public static string StaticContentStorageConnectionString {
    get
    {
      return RoleEnvironment.GetConfigurationSettingValue(
                              "StaticContent.StorageConnectionString");
    }
  }

  public static string StaticContentContainer
  {
    get
    {
      return RoleEnvironment.GetConfigurationSettingValue("StaticContent.Container");
    }
  }

  public static string StaticContentBaseUrl
  {
    get
    {
        var blobServiceClient = new BlobServiceClient(StaticContentStorageConnectionString);

        return string.Format("{0}/{1}", blobServiceClient.Uri.ToString().TrimEnd('/'), StaticContentContainer.TrimStart('/'));
    }
  }
}

Kelas StaticContentUrlHtmlHelper dalam file StaticContentUrlHtmlHelper.cs mengekspos metode bernama StaticContentUrl yang menghasilkan URL yang berisi jalur ke akun penyimpanan cloud jika URL diteruskan dimulai dengan karakter jalur root ASP.NET (~).

public static class StaticContentUrlHtmlHelper
{
  public static string StaticContentUrl(this HtmlHelper helper, string contentPath)
  {
    if (contentPath.StartsWith("~"))
    {
      contentPath = contentPath.Substring(1);
    }

    contentPath = string.Format("{0}/{1}", Settings.StaticContentBaseUrl.TrimEnd('/'),
                                contentPath.TrimStart('/'));

    var url = new UrlHelper(helper.ViewContext.RequestContext);

    return url.Content(contentPath);
  }
}

File Index.cshtml di folder Views\Home berisi elemen gambar yang menggunakan metode StaticContentUrl untuk membuat URL untuk atribut src.

<img src="@Html.StaticContentUrl("~/media/orderedList1.png")" alt="Test Image" />

Langkah berikutnya

• Sampel Hosting Konten Statik. Aplikasi contoh yang menunjukkan pola ini.

Sumber daya terkait

• Pola Kunci Valet. Jika sumber daya target tidak seharusnya tersedia untuk pengguna anonim, gunakan pola ini untuk membatasi akses langsung.
• Aplikasi web tanpa server di Azure. Arsitektur referensi yang menggunakan hosting situs web statik dengan Azure Functions untuk mengimplementasikan aplikasi web tanpa server.