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.

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 Görüntüle>Komut Paleti'ni seçip Azure: Oturum Aç yazarak Azure'da oturum açın.

  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 Subscriptionstercih ettiğiniz Azure aboneliğinde oturum açtığınızı doğrulayın ve Enter tuşuna basın.

  3. Aboneliğinizi seçin (yanında bir onay işareti görünmelidir) ve Tamam'a tıklayın.

Statik web uygulaması oluşturma

  1. Visual Studio Code'ı açın ve dosya aç'ı> 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.

    VS Code'da Azure Logosu'nun ekran görüntüsü.

    Not

    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.

    Web uygulaması oluşturmak için nereye gidileceği gösteren ekran görüntüsü.

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

    Statik Web Uygulamasının nasıl oluşturulacağını gösteren ekran görüntüsü.

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

    Abonelik seçmeyi gösteren ekran görüntüsü.

  1. Angular seçeneğini belirleyin ve Enter tuşuna basın.

    Açısal seçeneğin seçili olduğunu gösteren ekran görüntüsü.

  2. Uygulama kodunun konumu olarak /angular-app yazın ve Enter tuşuna basın.

    Angular uygulaması olarak girilen kod konumunu gösteren ekran görüntüsü.

  3. 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.

    Angular için derleme çıkış konumunun nasıl girilir gösteren ekran görüntüsü.

  1. React seçeneğini belirleyin ve Enter tuşuna basın.

    React seçeneğinin seçili olduğunu gösteren ekran görüntüsü.

  2. Uygulama kodunun konumu olarak /react-app yazın ve Enter tuşuna basın.

    React uygulaması olarak girilen kod konumunu gösteren ekran görüntüsü.

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

    React için derleme çıkış konumunun nasıl girilir gösteren ekran görüntüsü.

  1. Svelte seçeneğini belirleyin ve Enter tuşuna basın.

    Svelte seçeneğinin seçili olduğunu gösteren ekran görüntüsü.

  2. Uygulama kodunun konumu olarak /svelte-app yazın ve Enter tuşuna basın.

    Svelte uygulaması olarak girilen kod konumunu gösteren ekran görüntüsü.

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

    Svelte için derleme çıkış konumunun nasıl girilir gösteren ekran görüntüsü.

  1. Vue seçeneğini belirleyin ve Enter tuşuna basın.

    Seçili vue seçeneğini gösteren ekran görüntüsü.

  2. Uygulama kodunun konumu olarak /vue-app yazın ve Enter tuşuna basın.

    Vue uygulaması olarak girilen kod konumunu gösteren ekran görüntüsü.

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

    Vue için derleme çıkış konumunu girme adımlarını gösteren ekran görüntüsü

Not

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.

    Kullanıcıdan GitHub'da eylemleri açmasını veya Yapılandırmayı Görüntüle/Düzenle'yi açmasını isteyen onay kodunun ekran görüntüsü.

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

    GitHub Actions aracılığıyla ilerleme durumunu denetlemeyi gösteren ekran görüntüsü.

    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.

    Statik web uygulaması sitenize nasıl göz atabilirsiniz gösteren ekran görüntüsü.

Tebrikler! Azure Statik Web Uygulamaları’na ilk uygulamanızı 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ı 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.