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

  • 5 dakika

Bu alıştırmada, uygulamanızı otomatik olarak oluşturup yayımlayan GitHub Action’ı da içeren bir Azure Statik Web Uygulaması oluşturmayı öğreneceksiniz.

Statik web uygulaması oluşturma

GitHub deponuzu oluşturduğunuza göre Azure portalından bir Statik Web Uygulaması ö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 sayfanın üstündeki korumalı alanı etkinleştirdiğinizden emin olun.

Etkinleştirdiğiniz Azure korumalı alanı, Azure hizmetlerini herhangi bir ücret ödemeden kullanmanızı sağlar.

Visual Studio Code için Azure Static Web Apps uzantısını yükleme

  1. Visual Studio Market’e gidin ve Visual Studio Code için Azure Static Web Apps uzantısını yükleyin.

  2. Visual Studio Code'da uzantı sekmesi yüklendiğinde Yükle düğmesini seçin.

  3. Yükleme tamamlandıktan sonra, istenirse güncelleştirmek için Yeniden Başlat'ı seçin.

Visual Studio Code’da Azure oturumu açma

  1. Visual Studio Code'da Komut Paleti Görüntüle'yi>seçip Azure: Oturum Aç'ı girerek Azure'da oturum açın.

    Önemli

    Korumalı alanı oluştururken kullanılan hesapla Azure’da oturum açın. Korumalı alan Concierge Aboneliğine erişim sağlar.

  2. İstemleri takip ederek web tarayıcısında sağlanan ve Visual Studio Code oturumunuzun kimliğini doğrulayan kodu kopyalayıp yapıştırın.

Aboneliğinizi Seçin

  1. Visual Studio Code'ı açın, Dosya > Aç'ı seçin ve bilgisayarınıza kopyaladığınız depoyu düzenleyicide açın.

  2. Komut paletini açıp girerek Azure: Select SubscriptionsAzure aboneliklerinizi Concierge Aboneliğini içerecek şekilde filtrelediğinizden emin olun ve Enter tuşuna basın.

  3. Concierge Aboneliği'ne tıklayın ve Enter tuşuna basın.

    Screenshot of VS Code showing how to filter by subscription.

Statik web uygulaması oluşturma

  1. Visual Studio Code'ı açın ve dosya aç'ı seçerek > bilgisayarınıza kopyaladığınız depoyu düzenleyicide açın.

  2. Visual Studio Code'un etkinlik çubuğundan Azure logosunu seçerek Azure uzantıları penceresini açın.

    Screenshot of the Azure Logo in VS Code.

    Dekont

    Azure ve GitHub’da oturum açmanız gerekir. Daha önce Visual Studio Code'da Azure ve GitHub oturumu açmadıysanız oluşturma işlemi sırasında uzantı ikisinde de oturum açmanızı isteyecektir.

  3. Farenizi Statik Web Uygulamaları başlığının üzerine getirin, sağ tıklayın ve Statik Web Uygulaması Oluştur'u seçin.

    Screenshot showing where to go to create a web app.

  4. my-first-static-web-app yazıp Enter tuşuna basın.

    Screenshot showing how to create a Static Web App.

  5. Konumunuzu seçin ve Enter tuşuna basın.

    Screenshot showing how to select a subscription.

  6. Özel seçeneğini belirleyin ve Enter tuşuna basın

    Screenshot showing the custom option selected.

  1. Uygulama kodunun konumu olarak angular-app girişini seçip Enter tuşuna basın.

    Screenshot showing the code location entered as Angular app.

  2. Dosyaların uygulamanızda üretim için oluşturulduğu derleme çıkış konumu olarak dist/angular-app yazın ve Enter tuşuna basın.

    Screenshot showing how to enter the build output location for Angular.

  1. Uygulama kodunun konumu olarak react-app girişini seçip Enter tuşuna basın.

    Screenshot showing the code location entered as react app.

  2. Uygulamanızda dosyaların üretim için derlendiği derleme çıkış konumu olarak build yazın ve Enter tuşuna basın.

    Screenshot showing how to enter the build output location for React.

  1. Uygulama kodunun konumu olarak svelte-app girişini seçip Enter tuşuna basın.

    Screenshot showing the code location entered as Svelte app.

  2. Uygulamanızda dosyaların üretim için derlendiği derleme çıkış konumu olarak genel yazın ve Enter tuşuna basın.

    Screenshot showing how to enter the build output location for Svelte.

  1. Uygulama kodunun konumu olarak vue-app girişini seçip Enter tuşuna basın.

    Screenshot showing the code location entered as Vue app.

  2. Dosyaların uygulamanızda üretim için oluşturulduğu derleme çıkış konumu olarak dist yazın ve Enter tuşuna basın.

    Screenshot showing how to enter the build output location for Vue

Dekont

Deponuz, geçmişte kullanmış olabileceğiniz depolardan biraz farklı olabilir. Dört farklı klasörde bulunan dört farklı uygulamayı içerir. Her klasör, farklı bir JavaScript çerçevesinde oluşturulan bir uygulamayı içerir. Genelde, deponun kökünde bir uygulama bulunur ve uygulama yolunun konumu için / belirtilir. Bu, Azure Statik Web Uygulamalarının konumları yapılandırmanıza olanak tanımasına ilişkin en önemli örneklerden biridir. Uygulamanın nasıl derleneceğine ilişkin tam kapsamlı denetime sahip olursunuz.

  1. Uygulama oluşturulduktan sonra Visual Studio Code'da bir onay bildirimi gösterilir.

    Screenshot of the confirmation code asking the user to open actions in GitHub or View/Edit Configure.

    Dağıtım devam ederken Visual Studio Code uzantısı derleme durumunu size bildirir.

    Screenshot of the VS Code UI showing waiting for deployment.

  2. GitHub Actions'i kullanarak Eylemler menüsünü genişleterek dağıtımın ilerleme durumunu görüntüleyebilirsiniz.

    Screenshot showing how to check progress via GitHub Actions.

    Dağıtım tamamlandıktan sonra doğrudan web sitenize gidebilirsiniz.

  3. Web sitesini tarayıcıda görüntülemek için, Statik Web Apps uzantısında projeye sağ tıklayın ve Siteye Gözat'ı seçin.

    Screenshot showing how to browse to your static web app site.

Tebrikler! Azure Statik Web Uygulamaları’na ilk uygulamanızı dağıttınız!

Dekont

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ı yenileyin. 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.