Azure Static Web Apps için yerel geliştirmeyi ayarlama

Azure Static Web Apps sitesi, bulutta yayımlandığında, aynı uygulama gibi birlikte çalışan birçok hizmeti birbirine bağlar. Bu hizmetlerden bazıları:

• Statik web uygulaması
• Azure İşlevleri API
• Kimlik doğrulama ve yetkilendirme hizmetleri
• Yönlendirme ve yapılandırma hizmetleri

Bu hizmetlerin birbiriyle iletişim kurması gerekir ve Azure Static Web Apps bu tümleştirmeyi bulutta sizin için işler.

Ancak, uygulamanızı yerel olarak çalıştırdığınızda bu hizmetler otomatik olarak birbirine bağlı değildir.

Azure'da elde ettiğiniz deneyime benzer bir deneyim sağlamak için Azure Static Web Apps CLI aşağıdaki hizmetleri sağlar:

• Yerel statik site sunucusu
• Ön uç çerçeve geliştirme sunucusuna ara sunucu
• API uç noktalarınıza yönelik bir ara sunucu - Azure İşlevleri Temel Araçlar aracılığıyla kullanılabilir
• Sahte kimlik doğrulama ve yetkilendirme sunucusu
• Yerel yollar ve yapılandırma ayarları zorlaması

Nasıl çalışır?

Aşağıdaki grafik, isteklerin yerel olarak nasıl işleneceğini gösterir.

• Bağlantı noktasına 4280 yapılan istekler, isteğin türüne bağlı olarak uygun sunucuya iletilir.

• HTML veya CSS gibi statik içerik istekleri, iç CLI statik içerik sunucusu veya hata ayıklama için ön uç çerçeve sunucusu tarafından işlenir.

• Kimlik doğrulaması ve yetkilendirme istekleri, uygulamanıza sahte kimlik profili sağlayan bir öykünücü tarafından işlenir.

• functions Core Tools runtime¹ , sitenin API'sine yönelik istekleri işler.

• Tüm hizmetlerden gelen yanıtlar , hepsi tek bir uygulamaymış gibi tarayıcıya döndürülür.

Kullanıcı arabirimini ve Azure İşlevleri API uygulamalarını bağımsız olarak başlattıktan sonra, statik Web Apps CLI'sini başlatın ve aşağıdaki komutu kullanarak çalışan uygulamalara işaret edin:

swa start http://localhost:<DEV-SERVER-PORT-NUMBER> --api-location http://localhost:7071

İsteğe bağlı olarak, komutunu kullanırsanız swa init , Statik Web Apps CLI'sı uygulama kodunuze bakar ve CLI için bir swa-cli.config.json yapılandırma dosyası oluşturur. swa-cli.config.json dosyasını kullandığınızda, uygulamanızı yerel olarak başlatmak için komutunu çalıştırabilirsinizswa start.

¹ Azure İşlevleri Temel Araçları, sisteminizde yoksa CLI tarafından otomatik olarak yüklenir.

Aşağıdaki makalede düğüm tabanlı bir uygulamayı çalıştırma adımları ayrıntılı olarak verilmiştir, ancak işlem tüm diller veya ortamlar için aynıdır.

Önkoşullar

• Mevcut Azure Static Web Apps sitesi: Siteniz yoksa vanilla-api başlangıç uygulamasıyla başlayın.
• npm ile Node.js: npm'ye erişimi içeren Node.js LTS sürümünü çalıştırın.
• Visual Studio Code: API uygulamasında hata ayıklamak için kullanılır, ancak CLI için gerekli değildir.

Kullanmaya başlayın

Mevcut Azure Static Web Apps sitenizin kök klasörüne bir terminal açın.

1. CLI'yi yükleyin.

   npm install -D @azure/static-web-apps-cli
   

   İpucu

   SWA CLI'yı genel olarak yüklemek istiyorsanız yerine kullanın -g -D. Ancak, SWA'nın geliştirme bağımlılığı olarak yüklenmesi kesinlikle önerilir.

2. Uygulamanızın gerektirdiği durumlarda uygulamanızı oluşturun.

   komutunu veya projeniz için eşdeğer komutu çalıştırın npm run build.

3. CLI için depoyu başlatın.

   swa init
   

   Yapılandırma ayarlarınızın doğru olduğunu doğrulamak için CLI tarafından sorulan soruları yanıtlayın.

4. CLI'yi başlatın.

   swa start
   

5. http://localhost:4280 Uygulamayı tarayıcıda görüntülemek için adresine gidin.

CLI'yi başlatmanın diğer yolları

Yetkilendirme ve kimlik doğrulama öykünmesi

Statik Web Apps CLI'sı, Azure'da uygulanan güvenlik akışına öykünmektedir. Bir kullanıcı oturum açtığında uygulamaya döndürülen sahte bir kimlik profili tanımlayabilirsiniz.

Örneğin, adresine gitmeye /.auth/login/githubçalıştığınızda, kimlik profili tanımlamanızı sağlayan bir sayfa döndürülür.

Öykünücü, aşağıdaki istemci asıl değerlerini sağlamanıza olanak sağlayan bir sayfa sağlar:

Oturum açtıktan sonra:

• Kullanıcının istemci sorumlusunu /.auth/mealmak için uç noktayı veya işlev uç noktasını kullanabilirsiniz.

• gezinmek /.auth/logout istemci sorumlusunu temizler ve sahte kullanıcının oturumunu açar.

Hata ayıklama

Statik bir web uygulamasında iki hata ayıklama bağlamı vardır. Birincisi statik içerik sitesi, ikincisi API işlevleri içindir. Statik Web Uygulamaları CLI'sının bu bağlamlardan biri veya her ikisi için geliştirme sunucularını kullanmasına izin vererek yerel hata ayıklama mümkündür.

Aşağıdaki adımlarda, her iki hata ayıklama bağlamı için de geliştirme sunucularını kullanan yaygın bir senaryo gösterilmektedir.

1. Statik site geliştirme sunucusunu başlatın. Bu komut, kullanmakta olduğunuz ön uç çerçevesine özgüdür, ancak genellikle , npm startveya npm run devgibi npm run buildkomutlar biçiminde gelir.

2. Visual Studio Code'da API uygulama klasörünü açın ve bir hata ayıklama oturumu başlatın.

3. Aşağıdaki komutu kullanarak Static Web Apps CLI'yi başlatın.

   swa start http://localhost:<DEV-SERVER-PORT-NUMBER> --appDevserverUrl http://localhost:7071
   

   değerini geliştirme sunucusunun bağlantı noktası numarasıyla değiştirin <DEV_SERVER_PORT_NUMBER> .

Aşağıdaki ekran görüntüleri tipik bir hata ayıklama senaryosu için terminalleri gösterir:

Statik içerik sitesi aracılığıyla npm run devçalışıyor.

Azure İşlevleri API uygulaması Visual Studio Code'da bir hata ayıklama oturumu çalıştırıyor.

Statik Web Uygulamaları CLI'sı her iki geliştirme sunucusu kullanılarak başlatılır.

Artık bağlantı noktasından 4280 geçen istekler statik içerik geliştirme sunucusuna veya API hata ayıklama oturumuna yönlendirilir.

Bağlantı noktalarını ve sunucu adreslerini özelleştirme yönergeleriyle birlikte farklı hata ayıklama senaryoları hakkında daha fazla bilgi için bkz . Azure Static Web Apps CLI deposu.

Örnek hata ayıklama yapılandırması

Visual Studio Code, düzenleyicide hata ayıklama oturumlarını etkinleştirmek için bir dosya kullanır. Visual Studio Code sizin için bir launch.json dosyası oluşturmazsa, aşağıdaki yapılandırmayı .vscode/launch.json'a yerleştirebilirsiniz.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Node Functions",
            "type": "node",
            "request": "attach",
            "port": 9229,
            "preLaunchTask": "func: host start"
        }
    ]
}

Sonraki adımlar