Giriş

  • 2 dakika

Şirketiniz bir alışveriş listesi web uygulaması başlatıyor. Site aracılığıyla, müşteriler listelerindeki öğeleri ekleyebilir, düzenleyebilir, görüntüleyebilir ve kaldırabilir.

Uygulamayı oluştururken ilk endişeleriniz uygulamanızın ve API'nizin güvenli bir şekilde barındırılıyor olması, genel olarak kullanılabilir olması ve otomatik olarak yayımlanması. Tüm bu endişeleri işlemek için bir web sunucusu oluşturmak yerine, varlıklarınıza ve API'nize çok fazla kurulum veya yapılandırma olmadan kolayca hizmet veren bir barındırma çözümü kullanmaya karar verirsiniz.

Azure Static Web Apps nedir?

Azure Static Web Apps, kaynak kodunuzdan genel kullanılabilirliğe kadar tüm zor sorunları çözer.

Uygulamanızı geliştirmeye odaklanmaya devam ederken, Azure Static Web Apps bunu GitHub veya Azure DevOps'tan otomatik olarak derler ve barındırır.

Statik web uygulamaları genellikle Angular, React, Svelte veya Vue gibi kitaplıklar ve çerçeveler kullanılarak oluşturulur. Bu uygulamalar HTML, CSS, JavaScript ve uygulamayı oluşturan görüntü varlıklarını içerir. Geleneksel bir web sunucusu mimarisinde, bu dosyalar gerekli API uç noktalarının yanı sıra tek bir sunucudan sunulur.

Azure Static Web Apps ile statik varlıklar geleneksel bir web sunucusundan ayrılır ve bunun yerine dünya çapında dağıtılan noktalardan sunulur. Bu dağıtım, dosyalar son kullanıcılara fiziksel olarak daha yakın olduğundan dosyaların daha hızlı sunulmasını sağlar. İsteğe bağlı API uç noktaları sunucusuz bir mimari kullanılarak barındırılır ve bu da tam arka uç sunucusu gereksinimini hep birlikte önler.

Azure Static Web Apps modeli, tam olarak ihtiyacınız olanı almanıza, ne daha fazlasını ne de daha azını sağlama esasına dayanır.

Statik Uygulamalara genel bakış modelini gösteren diyagram.

Azure Static Web Apps kaynağı oluşturduğunuzda Azure, uygulamanın kaynak kodu deposunda bir GitHub Actions veya Azure DevOps iş akışı ayarlar. İş akışı, seçtiğiniz bir dalı izler. Commit'leri izlenen dala gönderdiğinizde veya pull request'ler oluşturduğunuzda, iş akışı uygulamanızı ve API'sini otomatik olarak derleyip Azure'a dağıtır.

Azure, web uygulamanızı barındırıp hizmet verir. Azure Functions, talebe bağlı olarak otomatik olarak genişleyen ve daralan arka uç API işlevselliğini destekler.

İsteğe bağlı API'ler

Azure Static Web Apps tamamen statik içerik sunma için idealdir, ancak bunların arkasında API'lere ihtiyaç duyan statik web uygulamaları için de harika bir desteğe sahiptir. Statik web uygulamanızı API ile veya API olmadan barındırabilirsiniz.

Azure, web uygulamanızı barındırıp sunarken Azure İşlevleri, API'ye yönelik isteğe bağlı olarak ölçeği otomatik olarak genişletme ve ölçeklendirme sağlayan arka uç API işlevselliğini destekler.

Temel özellikler

  • Genel olarak dağıtılmış web barındırma , HTML, CSS, JavaScript ve görüntüler gibi statik içerikleri kullanıcılarınıza yaklaştırır.
  • Azure İşlevleri tarafından sağlanan tümleşik API desteği.
  • Birinci sınıf GitHub ve Azure DevOps tümleştirme değişiklikleri, deposunuza tetikleme yaparak derlemeleri ve dağıtımları başlatır.
  • otomatik olarak yenilenen ücretsiz SSL sertifikaları .
  • Çekme isteklerini önizlemeniz için benzersiz önizleme URL'leri.

Öğrenme hedefleri

Bu modülde bir web uygulaması ve API'yi oluşturacak, değiştirecek ve Azure Static Web Apps'e dağıtacaksınız.

Kendi yolunuzu seçin

Bu modül, örnek uygulamanın aralarından seçim yapabileceğiniz dört çeşitlemesi sağlar: Angular, React, Svelte ve Vue. Azure Static Web Apps'in gücü, tüm bu tatların sorunsuz çalışmasıdır.

Başlangıç kodu dört uygulamayı ve daha sonra kullanacağınız bir API'nin başlangıç noktasını içerir.

├ angular-app  👈 The Angular client app
├ api-starter  👈 The API starter app. You use this later.
├ react-app    👈 The React client app
├ svelte-app   👈 The Svelte client app
└ vue-app      👈 The Vue client app

Ne yapacaksınız?

İstemci uygulamanızı seçtikten sonra şunları yapacaksınız:

  1. GitHub Actions ile web uygulamanızı otomatik olarak derleyin ve GitHub deposundan Azure'a dağıtın.
  2. Azure İşlevleri ile API'nizi oluşturun.
  3. API'nize HTTP istekleri göndermek için web uygulamanızı değiştirin.
  4. GitHub Actions ile web uygulamanızı otomatik olarak derleyin ve GitHub deposundan Azure'a dağıtın.
  5. Son olarak, aşağıdaki görüntüde gösterildiği gibi uygulamanızı keşfedip başlatabilirsiniz.

Açısal örnek uygulamayı gösteren ekran görüntüsü.

React örnek uygulamasını gösteren ekran görüntüsü.

Svelte örnek uygulamasını gösteren ekran görüntüsü.

Vue örnek uygulamasını gösteren ekran görüntüsü.

Sonraki adımlar

Şu anda önce Azure kaynaklarını oluşturmanız gerektiğini düşünüyor olabilirsiniz, ancak Azure Static Web Apps günlük iş akışınızı göz önünde bulundurmaktadır. Daha doğal bir yaklaşım, Azure'da kaynak oluşturmadan önce GitHub'daki kodla başlamaktır.