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ı

Not

Genellikle ön uç çerçevesiyle oluşturulan siteler, yol altındaki api istekleri doğru şekilde işlemek için bir ara sunucu yapılandırma ayarı gerektirir. Azure Statik Web Uygulamaları CLI'sini kullanırken ara sunucu konum değeri şeklindedir /apive CLI olmadan değeri şeklindedir http://localhost:7071/api.

Nasıl çalışır?

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

Diagram showing the Azure Static Web App CLI request and response flow.

Önemli

http://localhost:4280 CLI tarafından sunulan uygulamaya erişmek için adresine gidin.

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.

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.
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.
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.
CLI'yi başlatın.
```
swa start
```
http://localhost:4280 Uygulamayı tarayıcıda görüntülemek için adresine gidin.

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

Açıklama	Komut	Açıklamalar
Belirli bir klasöre hizmet sunma	`swa start ./<OUTPUT_FOLDER_NAME>`	değerini çıkış klasörünüzün adıyla değiştirin `<OUTPUT_FOLDER_NAME>` .
Çalışan bir çerçeve geliştirme sunucusu kullanma	`swa start http://localhost:3000`	Bu komut, bağlantı noktası `3000`altında çalışan bir uygulamanızın örneği olduğunda çalışır. Yapılandırmanız farklıysa bağlantı noktası numarasını güncelleştirin.
Bir klasörde İşlevler uygulaması başlatma	`swa start ./<OUTPUT_FOLDER_NAME> --api-location ./api`	değerini çıkış klasörünüzün adıyla değiştirin `<OUTPUT_FOLDER_NAME>` . Bu komut, uygulamanızın API'sinin klasörde dosyaları `api` olmasını bekler. Yapılandırmanız farklıysa bu değeri güncelleştirin.
Çalışan bir İşlevler uygulaması kullanma	`swa start ./<OUTPUT_FOLDER_NAME> --api-location http://localhost:7071`	değerini çıkış klasörünüzün adıyla değiştirin `<OUTPUT_FOLDER_NAME>` . Bu komut, Azure İşlevleri uygulamanızın bağlantı noktası `7071`üzerinden kullanılabilir olmasını bekler. Yapılandırmanız farklıysa bağlantı noktası numarasını güncelleştirin.

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.

Not

Öykünücü, yalnızca GitHub ile değil tüm güvenlik sağlayıcılarıyla çalışır.

Local authentication and authorization emulator

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

Value	Açıklama
Kullanıcı adı	Güvenlik sağlayıcısıyla ilişkilendirilmiş hesap adı. Bu değer, istemci sorumlusunda özelliği olarak `userDetails` görünür ve bir değer sağlamazsanız otomatik olarak oluşturulur.
Kullanıcı Kimliği	CLI tarafından otomatik olarak oluşturulan değer.
Roller	Her adın yeni bir satırda yer aldığı rol adlarının listesi.
Talepler	Her adın yeni bir satırda yer aldığı kullanıcı taleplerinin listesi.

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.

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.
Visual Studio Code'da API uygulama klasörünü açın ve bir hata ayıklama oturumu başlatın.
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.

Static site development server

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

Visual Studio Code API debugging

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

Azure Static Web Apps CLI terminal

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

Uygulamanızı yapılandırma

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2024-02-05