Öğretici: Azure static Web Apps 'de Blazor ile statik bir Web uygulaması oluşturma

Azure statik Web Apps, bir GitHub deposundan uygulamalar oluşturarak bir web sitesini üretim ortamına yayımlar. Bu öğreticide, Azure statik Web uygulamalarına Azure portal kullanarak bir Web uygulaması dağıtırsınız.

Azure aboneliğiniz yoksa ücretsiz bir deneme hesabı oluşturun.

Önkoşullar

• GitHub hesabı
• Azure hesabı

Uygulamaya genel bakış

Azure statik Web Apps, sunucusuz bir arka uç tarafından desteklenen statik Web uygulamaları oluşturmanıza olanak tanır. Aşağıdaki öğreticide, sunucusuz bir API tarafından döndürülen Hava durumu verilerini görüntüleyen C# Blazor WebAssembly uygulamasının nasıl dağıtılacağı gösterilmektedir.

bu öğreticide öne çıkan uygulama üç farklı Visual Studio projeden oluşur:

• API: Blazor WebAssembly uygulamasına Hava durumu BILGILERINI sağlayan API uç noktasını uygulayan C# Azure işlevleri uygulaması. Dalgalı değer işlevi bir nesne dizisi döndürür WeatherForecast .

• İstemci: ön uç Blazor WebAssembly projesi. İstemci tarafı yönlendirmenin işlevsel olduğundan emin olmak için bir geri dönüş yolu uygulanır.

• Paylaşılan: hem API hem de istemci projeleri tarafından başvurulan ve verilerin API uç noktasından ön uç Web uygulamasına akmasını sağlayan ortak sınıfları barındırır. WeatherForecastSınıf her iki uygulama arasında paylaşılır.

Bu projeler birlikte, Azure Işlevleri API arka ucu tarafından desteklenen tarayıcıda çalışan bir Blazor WebAssembly uygulaması oluşturmak için gereken bölümleri oluşturur.

Geri dönüş yolu

Uygulama, uygulamanın belirli rotalarıyla eşlenen /Counter ve /fetchdata gibi URL 'leri kullanıma sunar. Bu uygulama tek sayfalı bir uygulama olarak uygulandığından, her yola index.html dosyası sunulur. Herhangi bir yol için isteklerin geri dönüş yolu index.html döndürülmemesini sağlamak için, istemci projesinin kök klasöründe bulunan staticwebapp.config. JSON dosyasında bulunur.

{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

Yukarıdaki yapılandırma, uygulamadaki herhangi bir yola yönelik isteklerin index.html sayfasını döndürdüğünden emin olmanızı sağlar.

Depo oluşturma

bu makalede, başlamanıza olanak sağlamak için GitHub şablon deposu kullanılmaktadır. Şablon, Azure statik Web Apps dağıtılabilecek bir başlangıç uygulaması sunar.

1. GitHub oturum açtığınızdan emin olun ve yeni bir depo oluşturmak için aşağıdaki konuma gidin:
   • https://github.com/staticwebdev/blazor-starter/generate
2. Deponuzu -First-static-blazor-App olarak adlandırın.

Statik web uygulaması oluşturma

Artık depo oluşturulduğuna göre Azure portal bir statik Web uygulaması oluşturun.

1. Azure Portalgidin.

2. Kaynak Oluştur’u seçin.

3. Statik Web Apps arayın.

4. Static Web Apps’ı seçin.

5. Oluştur’u seçin.

6. Temel bilgiler sekmesinde, aşağıdaki değerleri girin.

   Özellik	Değer
   Abonelik	Azure abonelik adınız.
   Kaynak grubu	My-blazor-Group
   Ad	My-First-static-blazor-App
   Plan türü	Ücretsiz
   Azure Işlevleri API 'SI ve hazırlama ortamları için bölge	Size en yakın bölgeyi seçin.
   Kaynak	GitHub

7. GitHub oturum aç ' ı seçin ve GitHub kimlik doğrulaması yapın.

8. aşağıdaki GitHub değerlerini girin.

   Özellik	Değer
   Kuruluş	istediğiniz GitHub kuruluşunuzu seçin.
   Depo	My-First-static-blazor-App' i seçin.
   Dal	Ana öğesini seçin.

9. Yapı ayrıntıları bölümünde, derleme ön ayarları açılır listesinden Blazor öğesini seçin ve aşağıdaki değerler doldurulur.

   Özellik	Değer	Açıklama
   Uygulama konumu	İstemcilerinin	Blazor WebAssembly uygulamasını içeren klasör
   API konumu	'Sindeki	Azure Işlevleri uygulamasını içeren klasör
   Çıkış konumu	wwwroot	Yayımlanmış Blazor WebAssembly uygulamasını içeren derleme çıkışında bulunan klasör

Gözden geçir ve oluştur

1. Ayrıntıların tümünün doğru olduğunu doğrulamak için gözden geçir + oluştur düğmesini seçin.

2. App Service statik Web uygulamasının oluşturulmasını başlatmak ve dağıtım için bir GitHub eylemi sağlamak için oluştur ' u seçin.

3. Dağıtım tamamlandıktan sonra, kaynak ' a gidin.

4. Kaynağa git’i seçin.

   

Web sitesini görüntüleme

Statik uygulama dağıtmanın iki yönü vardır. Bunların ilki uygulamanızı oluşturan temel alınan Azure kaynaklarının sağlanmasıdır. İkincisi de, uygulamanızı derleyip yayımlayan GitHub Actions iş akışıdır.

Yeni statik Web uygulamanıza gidebilmeniz için önce dağıtım derlemesinin çalışmayı tamamlaması gerekir.

Statik Web Apps genel bakış penceresinde web uygulamanızla etkileşime başlamanıza yardımcı olacak bir dizi bağlantı görüntülenir.

1. görüntülenen başlığa tıkladığınızda, GitHub eylemlerinin durumunu denetlemek için buraya tıklayın . bu işlem sizi, deponuza karşı çalışan GitHub eylemlere götürür. Dağıtım işinin tamamlandığını doğruladıktan sonra, oluşturulan URL aracılığıyla Web sitenize gidebilirsiniz.

2. GitHub eylemler iş akışı tamamlandıktan sonra, web sitesini yeni sekmede açmak için URL bağlantısını seçebilirsiniz.

Kaynakları temizleme

Bu uygulamayı kullanmaya devam edemeyecekinizde, Azure statik Web Apps örneğini aşağıdaki adımlarla silebilirsiniz:

1. Azure portalını açın.
2. Üst arama çubuğundan My-blazor-Group öğesini arayın.
3. Grup adı ' nı seçin.
4. Sil düğmesini seçin.
5. Silme eylemini onaylamak için Evet ' i seçin.

Sonraki adımlar