Giriş
Şirketinizin bir alışveriş listesi web uygulamasını kullanıma sunmayı planladığını varsayalım. Site, müşterilere öğeleri listelerine ekleme, bunları görüntüleme ve kaldırma olanağı tanıyor.
Uygulamayı oluştururken, uygulamanın ve API’nin güvenli bir şekilde barındırılması, genel olarak kullanılabilir olması ve otomatik olarak yayımlanması gibi konulardan endişe duyuyorsunuz. Bu endişeleri gidermek amacıyla bir web sunucusu oluşturmak yerine varlıklarınızı ve API’nizi çok fazla ayarlama veya yapılandırma olmadan kolayca sunan bir barındırma çözümü kullanmaya karar veriyorsunuz.
Azure Statik Web Uygulamaları nedir?
Azure Statik Web Uygulamaları, kaynak koddan genel kullanılabilirliğe kadar tüm aşamalarda karşılaşılan zorlu 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ı, Angular, React, Svelte veya Vue gibi kitaplıklar ve çerçeveler kullanılarak ortak olarak oluşturulur. Bu uygulamalar, uygulamayı oluşturan HTML, CSS, JavaScript ve görüntü varlıklarını içerir. Geleneksel web sunucusu mimarisi kullanıldığında bu dosyalar gerekli API uç noktalarıyla birlikte tek bir sunucu aracılığıyla sunulur.
Azure Statik Web Uygulamaları ile statik varlıklar geleneksel web sunucusundan ayrılır ve dünyanın dört bir yanında bulunan noktalardan sunulur. Dosyalar kullanıcılara fiziksel olarak daha yakında bulunduğu için bu dağıtım yöntemi dosyaların daha hızlı sunulmasına olanak tanır. İ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 tamamen önler.
Azure Static Web Apps modeli, tam olarak ihtiyacınız olanı elde etmenizdir. Ne çok ne de daha az.
Azure Static Web Apps kaynağı oluşturduğunuzda Azure, uygulamanın kaynak kodu deposunda bir GitHub Actions veya Azure DevOps iş akışı ayarlar. Bu iş akışı seçtiğiniz dalı izler. İzleme dalına işlemeleri her gönderdiğinizde veya çekme istekleri 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ır ve sunar. Azure İşlevleri, ölçeği talebi temel alarak genişleten veya daraltan arka uç API işlevlerini sağlar.
İsteğe bağlı API'ler
Azure Static Web Apps, tamamen statik içerik sunmak için idealdir. Bunun dışında API'ye ihtiyaç duyan statik web uygulamaları için de gelişmiş destek sunar. Statik web uygulamanızı API kullanarak veya kullanmadan barındırabilirsiniz.
Azure, web uygulamanızı barındırır ve sunar. Azure İşlevleri, ölçeği API’ye olan talebi temel alarak genişleten veya daraltan arka uç API işlevlerini sağlar.
Önemli ö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.
- Depo değişikliklerinin derlemeleri ve dağıtımları tetiklediği birinci sınıf GitHub ve Azure DevOps tümleştirmesi .
- Otomatik olarak yenilenen ücretsiz SSL sertifikaları.
- Çekme isteklerini önizlemek için benzersiz önizleme URL'leri .
- Birden çok sağlayıcıyla yerleşik kimlik doğrulaması .
Öğrenme hedefleri
Bu modülde, Azure Static Web Apps'te kullanıcı kimlik doğrulamasıyla bir web uygulaması ve API oluşturacak, değiştirecek ve 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 "yalnızca çalışması"dır.
Başlama kodu dört uygulamayı ve kullanacağınız API’ye yönelik başlangıç noktasını içerir.
├ angular-app 👈 The Angular client app
├ api 👈 The API server app
├ react-app 👈 The React client app
├ svelte-app 👈 The Svelte client app
└ vue-app 👈 The Vue client app
Yapacaklarınız
İstemci uygulamanızı seçtikten sonra şunları yapacaksınız:
- GitHub Actions ile bir GitHub deposundan web uygulamanızı ve API'nizi otomatik olarak derleyip Azure'a dağıtın.
- Oturum açma ve oturum kapatma düğmeleri eklemek ve geçerli oturum açmış kullanıcı hakkındaki bilgileri görüntülemek için web uygulamanızı değiştirin.
- Kimliği doğrulanmamış kullanıcıları engellemek ve yalnızca belirli kimlik doğrulama sağlayıcılarına izin vermek için web uygulamanızı ve API'nizi değiştirin.
- Son olarak, aşağıda gösterildiği gibi uygulamanızı araştırıp başlatacaksınız.
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. Kaynakları Azure’da oluşturmadan önce kod GitHub’dayken başlama daha doğal bir yaklaşımdır.