Kılavuz: Blob Depolama'da statik web sitesi barındırmak

Bu öğreticide, statik web sitesi oluşturmayı ve Azure Depolama'ya dağıtmayı öğreneceksiniz. İşiniz bittiğinde, kullanıcıların genel olarak erişebileceği statik bir web siteniz olur.

Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

• Statik web sitesi barındırmayı yapılandırma
• Hello World web sitesi dağıtma

Statik web sitelerinin bazı sınırlamaları vardır. Örneğin, üst bilgileri yapılandırmak istiyorsanız Azure Content Delivery Network (Azure CDN) kullanmanız gerekir. Statik web sitesi özelliğinin bir parçası olarak üst bilgileri yapılandırmanın hiçbir yolu yoktur. Ayrıca, AuthN ve AuthZ desteklenmez.

Bu özellikler senaryonuz için önemliyse Azure Static Web Apps'i kullanmayı göz önünde bulundurun. Statik web sitelerine harika bir alternatiftir ve içeriği işlemek için bir web sunucusu gerektirmediğiniz durumlarda da uygundur. Üst bilgileri yapılandırabilirsiniz ve AuthN / AuthZ tam olarak desteklenir. Azure Static Web Apps, GitHub kaynağından genel dağıtıma tam olarak yönetilen bir sürekli tümleştirme ve sürekli teslim (CI/CD) iş akışı da sağlar.

Bu videoda Blob Depolama'da statik bir web sitesini barındırma adımları gösterilmektedir.

Videodaki adımlar aşağıdaki bölümlerde de açıklanmıştır.

Önkoşullar

Azure Depolama'ya erişmek için bir Azure aboneliğiniz olmalıdır. Henüz aboneliğiniz yoksa başlamadan önce ücretsiz bir hesap oluşturun.

Azure Depolama'ya tüm erişim bir depolama hesabı üzerinden gerçekleştirilir. Bu hızlı başlangıç için Azure portalını, Azure PowerShell'i veya Azure CLI'yı kullanarak bir depolama hesabı oluşturun. Depolama hesabı oluşturma konusunda yardım için bkz . Depolama hesabı oluşturma.

Uyarı

Statik web siteleri artık genel amaçlı v2 Standart depolama hesapları ve hiyerarşik ad alanı etkin depolama hesapları için kullanılabilir.

Bu öğreticide, statik web sitesini oluşturmak ve bir Azure Depolama hesabına dağıtmak için programcılar için ücretsiz bir araç olan Visual Studio Code kullanılmaktadır.

Visual Studio Code'u yükledikten sonra Azure Depolama önizleme uzantısını yükleyin. Bu uzantı, Azure Depolama yönetimi işlevselliğini Visual Studio Code ile tümleştirir. Uzantıyı kullanarak statik web sitenizi Azure Depolama'ya dağıtacaksınız. Uzantıyı yüklemek için:

1. Visual Studio Code'ı başlatın.

2. Araç çubuğunda Uzantılar'a tıklayın. Azure Depolama'yı arayın ve listeden Azure Depolama uzantısını seçin. Ardından uzantıyı yüklemek için Yükle düğmesine tıklayın.

   

Statik web sitesi barındırmayı yapılandırma

İlk adım, depolama hesabınızı Azure portalında statik bir web sitesi barındıracak şekilde yapılandırmaktır. Hesabınızı statik web sitesi barındırma için yapılandırdığınızda, Azure Depolama otomatik olarak $webadlı bir kapsayıcı oluşturur. $web kapsayıcısı statik web sitenizin dosyalarını içerir.

1. Web tarayıcınızda Azure portalında oturum açın.

2. Depolama hesabınızı bulun ve hesaba genel bakış bilgilerini görüntüleyin.

3. Statik web sitelerinin yapılandırma sayfasını görüntülemek için Statik web sitesi'ni seçin.

4. Depolama hesabı için statik web sitesi barındırmayı etkinleştirmek için Etkin'i seçin.

5. Dizin belgesi adı alanında ,index.htmlvarsayılan dizin sayfasını belirtin. Kullanıcı statik web sitenizin köküne gittiği zaman varsayılan dizin sayfası görüntülenir.

6. Hata belgesi yolu alanında, 404.htmlvarsayılan hata sayfasını belirtin. Kullanıcı statik web sitenizde bulunmayan bir sayfaya gitmeyi denediğinde varsayılan hata sayfası görüntülenir.

7. Kaydet'e tıklayın. Azure portalı artık statik web sitesi uç noktanızı görüntüler.

   

Hello World web sitesi dağıtma

Ardından Visual Studio Code ile bir Hello World web sayfası oluşturun ve bunu Azure Depolama hesabınızda barındırılan statik web sitesine dağıtın.

1. Yerel dosya sisteminizde mywebsite adlı boş bir klasör oluşturun.

2. Visual Studio Code'ı başlatın ve Gezgin panelinden yeni oluşturduğunuz klasörü açın.

   

3. mywebsite klasöründe varsayılan dizin dosyasını oluşturun ve index.htmlolarak adlandırın.

   

4. Düzenleyicide index.html açın, dosyaya aşağıdaki metni yapıştırın ve kaydedin:

   <!DOCTYPE html>
   <html>
     <body>
       <h1>Hello World!</h1>
     </body>
   </html>
   

5. Varsayılan hata dosyasını oluşturun ve 404.htmlolarak adlandırın.

6. Düzenleyicide 404.html açın, dosyaya aşağıdaki metni yapıştırın ve kaydedin:

   <!DOCTYPE html>
   <html>
     <body>
       <h1>404</h1>
     </body>
   </html>
   

7. Explorer panelinde mywebsite klasörünün altına sağ tıklayın ve web sitenizi dağıtmak için Statik Web Sitesine Dağıt... öğesini seçin. Aboneliklerin listesini almak için Azure'da oturum açmanız istenir.

8. Statik web sitesi barındırmayı etkinleştirdiğiniz depolama hesabını içeren aboneliği seçin. Ardından, istendiğinde depolama hesabını seçin.

Visual Studio Code artık dosyalarınızı web uç noktanıza yükler ve başarı durum çubuğunu gösterir. Web sitesini Azure'da görüntülemek için başlatın.

Öğreticiyi başarıyla tamamladınız ve statik bir web sitesini Azure'a dağıttınız.

Özellik desteği

Bu özellik için destek, Data Lake Storage 2. Nesil, Ağ Dosya Sistemi (NFS) 3.0 protokolü veya SSH Dosya Aktarım Protokolü (SFTP) etkinleştirilerek etkilenebilir. Bu özelliklerden herhangi birini etkinleştirdiyseniz bu özelliğin desteğini değerlendirmek için bkz . Azure Depolama hesaplarında Blob Depolama özelliği desteği.

Sonraki adımlar

Bu öğreticide, Azure Depolama hesabınızı statik web sitesi barındırma için yapılandırmayı ve statik web sitesi oluşturmayı ve bir Azure uç noktasına dağıtmayı öğrendiniz.

Ardından, statik web sitenizle özel etki alanı yapılandırmayı öğrenin.

Özel bir etki alanını Azure Blob Depolama uç noktasına eşleştirin