Alıştırma - Azure Statik Web Uygulaması oluşturma

Tamamlandı

Bu alıştırmada, uygulamanızı otomatik olarak derleyen ve yayımlayan bir GitHub Eylemi içeren bir Azure Static Web Apps örneği oluşturacaksınız.

Statik Web Uygulaması oluşturma

GitHub deponuzu oluşturduğunuza göre Artık Azure portalından bir Statik Web Apps örneği oluşturabilirsiniz.

Bu modül, alıştırmayı tamamlamak için kullanabileceğiniz ücretsiz, geçici bir Azure aboneliği sağlamak için Azure korumalı alanını kullanır. Devam etmeden önce, bu sayfanın üst kısmındaki korumalı alanı etkinleştirdiğinizden emin olun.

1. Azure portalında oturum açın ve korumalı alanı etkinleştirmek için kullandığınız hesabın aynısını kullandığınızdan emin olun.

2. Azure giriş sayfasındaki Azure hizmetleri'nin altında Kaynak oluştur'u seçin. Kaynak oluştur bölmesi görüntülenir.

3. Market arama kutusunda Statik Web Uygulaması'nı arayın ve seçin. Statik Web Uygulaması bölmesi görüntülenir.

4. Oluştur'u seçin. Statik Web Uygulaması Oluştur bölmesi görüntülenir. Yeni uygulamanızı yapılandırın ve GitHub deponuza bağlayın.

5. Temel Bilgiler sekmesinde, her ayar için aşağıdaki değerleri girin.

   Ayar	Değer
   Proje Ayrıntıları
   Abonelik	Concierge Aboneliği
   Kaynak Grubu	[Sandbox kaynak grubu adı]
   Statik Web Uygulaması ayrıntıları
   Veri Akışı Adı	Uygulamanızı adlandırma. Geçerli karakterler şunlardır: a-z (büyük/küçük harf duyarsız), 0-9 ve -.
   Barındırma planı
   Uygulamanız için fiyatlandırma katmanı	Ücretsiz'i seçin
   Azure İşlevleri ve hazırlama ayrıntıları
   Azure İşlevleri API ve hazırlama ortamları için bölge	Size en yakın bölgeyi seçin
   Dağıtım ayrıntıları
   Kaynak	GitHub'ı seçin
   GitHub hesabı	GitHub ile oturum aç'ı seçin. Azure Statik Web Uygulamalarını Yetkile bölmesi görüntülenir. Azure-App-Service-Static-Web-Apps'i Yetkile'yi seçin. Parolanızı girin.
   Kuruluş	Depoyu oluşturduğunuz kuruluşu seçin
   Depo	my-static-blazor-app
   Şube	ana
   Derleme Ayrıntıları
   Derleme Ön Ayarları	Blazor
   Uygulama konumu	İstemci
   API konumu	API
   Çıkış konumu	wwwroot

6. Gözden Geçir ve Oluştur'u> seçin.

7. Dağıtım tamamlandıktan sonra Kaynağa git'i seçin. Statik Web Uygulaması bölmeniz görüntülenir.

GitHub Eylemini Gözden Geçirme

Bu aşamada, Statik Web Uygulamaları örneğiniz Azure’da oluşturulur ancak uygulamanız dağıtılmaz. Azure'ın deponuzda oluşturduğu GitHub Eylemi, uygulamanızın ilk derlemesini ve dağıtımını tetikleme amacıyla otomatik olarak çalışır, ancak tamamlanması birkaç dakika sürer.

GitHub deponuzun Eylemler sayfasına gitmek için aşağıdaki bağlantıyı seçerek derleme ve dağıtma eyleminizin durumunu denetleyebilirsiniz:

Oraya gittikten sonra:

1. Azure Static Web Apps CI/CD'yi seçin.

2. Ci: Add Azure Static Web Apps iş akışı dosyası başlıklı işlemeyi seçin.

3. İş Oluştur ve Dağıt bağlantısını seçin

Burada, derlenen uygulamanızın ilerleme durumunu gözlemleyebilirsiniz.

Web sitesini görüntüleme

GitHub Eylemi web uygulamanızı derlemeyi ve yayımlamayı tamamladıktan sonra çalışan uygulamanızı görmek için uygulamaya gidebilirsiniz.

Uygulamanızı tarayıcıda ziyaret etmek için Azure portalında URL bağlantısını seçin.

Uygulamanız artık genel kullanıma sunuldu ancak henüz veri veya API olmadığı için veri yükleniyor ifadesini kullanmaya devam ediyor. Sonraki bölümde web uygulamanıza API eklemeyi öğreneceksiniz.

Tebrikler! İlk uygulamanızı Azure Static Web Apps'e dağıttınız!

Not

Uygulamanın henüz derlenmediğini ve dağıtılmadığını belirten bir web sayfasıyla karşılaşırsanız endişelenmeyin. Bir dakika içinde tarayıcıyı yenilemeyi deneyin. Azure Statik Web Uygulamaları oluşturulduğunda GitHub Action otomatik olarak çalıştırılır. Giriş sayfasını görüyorsanız, uygulamanız hala dağıtım aşamasındadır.

Sonraki adımlar

Uygulamanızın alışveriş listesine yönelik API’si eksik. Ardından, statik varlıkların yanı sıra Azure'da yayımlayan bir Azure İşlevleri API'sini uygulamanıza nasıl ekleyebileceğinizi keşfedersiniz.