Alıştırma - Kullanmaya başlama

  • 7 dakika

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

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.

Bahşiş

Düğüm bağımlılıklarınızla ilgili sorunlarla karşılaşırsanız Düğüm Sürüm Yöneticisi'nin yüklü olduğundan ve önceki bir sürüme geçebildiğinizden emin olun.

Depo oluşturma

Şimdi bir GitHub depo şablonu kullanarak yeni bir depo oluşturun. Her biri farklı bir ön uç çerçevesiyle oluşturulmuş bir başlangıç uygulaması içeren bir şablon dizisi sunulur.

  1. Şablon deposunun şablondan oluştur sayfasına gidin.

    • 404 Sayfa Bulunamadı hatası alırsanız GitHub’da oturum açıp yeniden deneyin.

  2. Bunun Sahibi olup olmadığınız istenirse GitHub hesaplarınızdan birini seçin.

  3. Deponuza my-static-web-app-authn adını verin.

  4. Şablondan depo oluştur’u seçin.

Uygulamanızı yerel olarak kopyalama

GitHub hesabınızda my-static-web-app-authn adlı bir GitHub deposu oluşturdunuz. Sonraki adımda depoyu klonlayıp kodu bilgisayarınızda yerel olarak çalıştırmayı öğreneceksiniz.

  1. Bilgisayarınızda bir terminali açın.

  2. GitHub deposunu bilgisayarınıza klonlayarak başlayın.

    git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-authn

  3. Kaynak kodunuzun klasörüne gidin.

    cd my-static-web-app-authn

CORS’yi yerel olarak yapılandırma

Azure Static Web Apps'te yayımladığınızda çıkış noktaları arası kaynak paylaşımı (CORS) konusunda endişelenmeniz gerekmez. Azure Statik Web Uygulamaları, uygulamanızı otomatik olarak yapılandırır ve bunun bir ters ara sunucuyu kullanarak API’niz ile iletişim kurmasını sağlar. Ancak, yerel olarak çalışırken web uygulamanızın ve API’nin iletişim kurmasına olanak tanımak için CORS’yi yapılandırmanız gerekir.

Şimdi Azure İşlevleri web uygulamanızın bilgisayarınızdaki API'ye HTTP istekleri göndermesine izin vermesini isteyin.

  1. api/local.settings.json adlı bir dosya oluşturun.

  2. Dosyaya aşağıdaki içeriği ekleyin:

    {
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

Dekont

local.settings.json dosyası, bu dosyanın GitHub’a gönderilmesini engelleyen .gitignore dosyasında listelenir. Bu özellik ile GitHub’da olmasını istemediğiniz gizli dizileri depolayabilirsiniz. Şablondan depoyu oluştururken dosyayı oluşturmanızı gerektiren sebep buydu.

API’yi çalıştırma

api klasörü, web uygulamasının HTTP uç noktalarına sahip Azure İşlevleri projesini içerir. Aşağıdaki adımları izleyerek API'yi yerel olarak çalıştırarak başlayın:

Dekont

Azure İşlevleri yerel olarak çalıştırmanıza olanak tanıyan Azure İşlevleri Temel Araçları'nı yüklediğinizden emin olun.

  1. Visual Studio Code'da F1 tuşuna basarak komut paletini açın.

  2. Terminal: Yeni Tümleşik Terminal Oluştur'u girin ve seçin.

  3. API klasörüne gidin:

    cd api

  4. Azure İşlevleri uygulamasını yerel olarak çalıştırın:

    func start

Web uygulamasını çalıştırma

  1. Ardından, tercih ettiğiniz ön uç çerçevesinin klasörüne aşağıdaki gibi gidin:

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  2. Uygulama bağımlılıklarını yükleyin.

    npm install

  3. Son olarak, ön uç istemci uygulamasını çalıştırın.

    npm start

    npm start

    npm run dev

    npm run serve

Uygulamanıza gitme

Artık uygulamanızın yerel olarak çalıştığını görebilirsiniz. Her ön uç uygulaması farklı bir bağlantı noktasında çalışır.

  1. Uygulamanıza gitmek için bağlantıyı seçin.

  1. http://localhost:4200 adresine göz atın.

    Screenshot showing the UI of your Angular web app.

  1. http://localhost:3000 adresine göz atın.

    Screenshot showing the UI of your React web app.

  1. http://localhost:5000 adresine göz atın.

    Screenshot showing the UI of your Svelte web app.

  1. http://localhost:8080 adresine göz atın.

    Screenshot showing the UI of your Vue web app.

Uygulamanızın bir ürün listesi görüntülemesi gerekir.

  1. Terminalde Ctrl-C kısayolunu kullanarak çalışan uygulamanızı durdurun.

Uygulamanızı oluşturdunuz ve uygulama artık tarayıcınızda yerel olarak çalışıyor.

Sonraki bölümde uygulamanızı Azure App Service’te yayımlamayı öğreneceksiniz.

Statik web uygulaması oluşturma

GitHub deponuzu oluşturduğunuza göre Visual Studio Code için Azure Static Web Apps uzantısını kullanarak bir Static Web Apps ö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'yi seçin.

  3. Yükleme tamamlandıktan sonra Yeniden Yükle'yi 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 ve dosya aç'ı seçerek > bilgisayarınıza kopyaladığınız depoyu düzenleyicide açın.

  2. F1 komut paletini açıp girin ve Enter tuşuna basarak Azure aboneliklerinizi Concierge Aboneliğini içerecek şekilde filtrelediğinizden Azure: Select Subscriptionsemin olun.

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

    Screenshot showing how to filter by subscription.

Visual Studio Code ile 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 içinde etkinlik çubuğunda 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ı etiketinin üzerine getirin ve (artı işareti) öğesini seçin + .

    Screenshot showing the application name typed out.

  4. Düzenleyicinin üst kısmında komut paleti açıldığında Concierge Aboneliği'ni seçin ve Enter tuşuna basın.

    Screenshot showing how to select a subscription.

  5. my-static-web-app-authn yazın ve Enter tuşuna basın.

    Screenshot showing how to create Static Web Apps.

  6. Size en yakın bölgeyi seçin ve Enter tuşuna basın.

    Screenshot showing location selection.

  7. İlgili çerçeve seçeneğini belirleyin ve Enter tuşuna basın.

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

    Screenshot showing the Angular application code location.

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

    Screenshot showing the Angular app files path.

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

    Screenshot showing the React application code location.

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

    Screenshot showing the React app files path.

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

    Screenshot showing the Svelte application code location.

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

    Screenshot showing the Svelte app files path.

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

    Screenshot showing the Vue application code location.

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

    Screenshot showing the Vue app files path.

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örüntülenir.

    Screenshot showing the Open Actions in GitHub or View/Edit Config pop-up window.

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

:::image type="content" source="../media/extension-waiting-for-deployment.png" alt-text="Screenshot showing the waiting for deployment button.":::

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

    Screenshot showing the GitHub Actions menu in VS Code.

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

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

    Screenshot showing the browse site button.

Tebrikler! Uygulamanızı Azure Static Web Apps'e dağıttınız!

Dekont

Uygulamanın henüz derlenmediğini ve dağıtılmadığını belirten bir web sayfası görürseniz 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.

GitHub değişiklikleri çekme

Azure Static Web Apps tarafından oluşturulan iş akışı dosyasını aşağı çekmek için GitHub'dan en son değişiklikleri çekin:

  1. F1 tuşuna basarak komut paletini açın.

  2. Girin ve Git: Çek'i seçin ve enter tuşuna basın.

Sonraki adımlar

Ardından, kullanıcı kimlik doğrulamasını uygulamanızla tümleştirmeyi öğreneceksiniz.