Egzersiz - Başlayın

Tamamlandı

Bu alıştırmada, web sitenizi otomatik olarak derleyen ve yayımlayan github eylemi de dahil olmak üzere bir Azure Statik Web Uygulaması örneği oluşturacaksınız.

Bu modülde, bir Azure aboneliğine ücretsiz ve geçici erişim sağlayan korumalı alan aracılığıyla kullanımınıza sunulan kaynakların yanı sıra alıştırmaları tamamlamak için ihtiyacınız olan kaynaklar kullanılır. Bu sayfanın en üstündeki sandbox'ı etkinleştirdiğinizden emin olun. Bu modüldeki alıştırmalarda çalışırken, her birim önceki alıştırmada oluşturduğunuz içeriğe bağımlıdır. Bu nedenle bir JavaScript çerçevesi seçin ve bunu sonraki tüm alıştırmalar için kullanın.

Depo oluşturma

Başlamak için GitHub şablonu kullanarak bir depo oluşturun. Çeşitli ön uç çerçevelerinde uygulanan bir başlangıç uygulaması içeren bir dizi depo şablonu mevcuttur.

1. Şablondan GitHub oluşturma sayfasına gidin.

2. Sahipistenirse GitHub hesaplarınızdan birini seçin.

3. Depo adı için my-static-web-app-and-api girin.

4. Create repository (Depo oluştur) öğesine tıklayın.

   Projeyi bir şablondan oluştururken GitHub, deponuzu arka planda oluşturur.

Uygulamanızı yerel olarak çalıştırma

Artık GitHub hesabınızda my-static-web-app-and-api adlı bir GitHub deponuz var. Ardından GitHub deposunu kopyalayıp kodu bilgisayarınızda yerel olarak çalıştıracaksınız.

1. Bilgisayarınızda bir terminal penceresi açın.

   Windows kullanıyorsanız sistem tepsisi arama kutusuna cmd girebilirsiniz.

2. Depoyu makinenize kopyalamak için aşağıdaki kodu komut istemi penceresine yapıştırın.

   GitHub kullanıcı adınızı <YOUR_GITHUB_USERNAME> ile değiştirdiğinizden emin olun.

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

   Not

   Komut istemi terminaline kopyalamada sorun yaşıyorsanız, başlık çubuğundaki simgeye sağ tıklayın ve Özellikler sekmesinde Kopyala/Yapıştır olarak Ctrl+Shift+C/V kullan seçeneğinin işaretli olduğundan emin olun.

3. Kopyaladığınız kaynak kodun dizinine geçin.

   cd my-static-web-app-and-api
   

4. Tercih ettiğiniz ön uç çerçeve için dizine gidin.

   cd angular-app
   

   cd react-app
   

   cd svelte-app
   

   cd vue-app
   

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

   npm install
   

6. Aşağıdaki komutla her bağımlılığın en son sürümünün yüklendiğinden emin olun.

   npm audit fix
   

7. Ön uç istemci uygulamasını çalıştırın.

   npm start
   

   npm start
   

   npm run dev
   

   npm run serve
   

Uygulamanıza göz atın

Uygulama paketi oluşturulduğunda ve derlendiğinde, uygulamanızın yerel olarak çalışmasını görüntülemek için otomatik olarak bir tarayıcı sekmesi açılır.

Angular için yerel sunucu http://localhost:4200.

React için yerel sunucu http://localhost:3000.

svelte için yerel sunucu http://localhost:5000.

Vue için localhost http://localhost:8080.

Henüz veri veya API olmadığından uygulamanız Veri yükleniyor ... demelidir. Bu dersin ilerleyen bölümlerinde web uygulamanızın API'sini ekleyebilirsiniz.

Terminalde, toplu işlerinizi durdurmak için Ctrl+C basın.

Tebrikler! Uygulamanızı oluşturup tarayıcınızda yerel olarak çalıştığını gördünüz. Ardından uygulamanızı Azure Static Web Apps'te yayımlayabilirsiniz.

Statik web uygulaması oluşturma

Kendi GitHub deponuzu oluşturdunuz. Artık Visual Studio Code için Azure Static Web Apps uzantısını kullanarak kendi statik web uygulamanızı oluşturabilirsiniz.

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

1. Visual Studio Code'yu açın.

2. Üstteki menüden Görünüm>Uzantılarıöğesini seçin ve arama kutusuna Azure Static Web Apps girin.

3. Visual Studio Code'da uzantı sekmesi yüklendiğinde Yükleseçeneğini seçin.

Uygulama klasörünü açma

1. Visual Studio Code komut paletini açmak için F1 seçin.

2. Dosya: Klasör Aç...girin.

3. my-static-web-app-and-api klasörünü seçin.

4. Klasörü Visual Studio Code'da açmak için Aç'ı seçin.

Visual Studio Code'da Azure'da oturum açma

1. Visual Studio Code komut paletini açmak için F1 seçin.

2. Azuregirin: oturum açın ve kimlik doğrulaması yapmak için istemleri izleyin.

   Önemli

   Tarayıcı içi korumalı alanı etkinleştirmek için kullandığınız hesapla Azure'da oturum açtığınızdan emin olun. Aynı hesabın kullanılması Concierge Aboneliği'nin kullanılabilir olmasını sağlar ve bu da bu öğretici sırasında ücretsiz Azure kaynaklarına erişmenizi sağlar.

Aboneliğinizi seçin

1. Visual Studio Code komut paletini açmak için F1 seçin.

2. Azuregirin:Abonelikler'i seçin ve Concierge Aboneliğidışındaki tüm seçimleri temizleyin.

   

Değişiklikleri işleme

Uygulama bağımlılıklarını yüklediğinizde, projenizdeki dosyalardan bazıları işlem sırasında güncelleştirildi. Devam etmek için bu değişiklikleri depoya işlemeniz gerekir.

1. Visual Studio Code komut paletini açmak için F1 seçin.

2. girin ve Git Commit Allseçin.

3. Dosyanın en üstüne ilk taahhüt girin.

4. Git işleme dosyasını kaydedin ve kapatın.

   Bu noktada değişikliklerinizi sunucuyla eşitleme konusunda endişelenmeyin. Statik web uygulamasını yayımladığınızda güncelleştirmeler GitHub'a kopyalanır.

Statik web uygulaması oluşturma

Statik bir web uygulaması oluşturmak için geçerli Azure ve GitHub kimliği doğrulanmış oturumlar gereklidir. Her iki sağlayıcıda da oturum açmadıysanız, uzantı oluşturma işlemi sırasında oturum açmanızı ister.

1. Visual Studio Code komut paletini açmak için F1 seçin.

2. Azure Static Web Appsgirin ve seçin: Statik Web Uygulaması Oluştur....

   Komut paleti istemlerinin geri kalanı için aşağıdaki değerleri girin.

   Yönlendirme	Değer
   Abonelik	Concierge Aboneliği seçin
   Ad	my-static-web-app-and-api'yi girin
   Bölge	Size en yakın bölgeyi seçin
   Önceden ayarlanmış	Angular'ı seçin
   Uygulama kodu konumu	angular-app girin
   Çıkış konumu	dist/angular-app komutunu girin

2. Azure Static Web Appsgirin ve seçin: Statik Web Uygulaması Oluştur....

   Komut paleti istemlerinin geri kalanı için aşağıdaki değerleri girin.

   Yönlendirme	Değer
   Abonelik	Concierge Aboneliği seçin
   Ad	my-static-web-app-and-api'yi girin
   Bölge	Size en yakın bölgeyi seçin
   Önceden ayarlanmış	React seçin
   Uygulama kodu konumu	react-app girin
   Çıkış konumu	girin

2. Azure Static Web Appsgirin ve seçin: Statik Web Uygulaması Oluştur....

   Komut paleti istemlerinin geri kalanı için aşağıdaki değerleri girin.

   Yönlendirme	Değer
   Abonelik	Concierge Aboneliği seçin
   Ad	my-static-web-app-and-api'yi girin
   Bölge	Size en yakın bölgeyi seçin
   Önceden ayarlanmış	Svelte seçin
   Uygulama kodu konumu	svelte-app girin
   Çıkış konumu	Genel girin

2. Azure Static Web Appsgirin ve seçin: Statik Web Uygulaması Oluştur....

   Komut paleti istemlerinin geri kalanı için aşağıdaki değerleri girin.

   Yönlendirme	Değer
   Abonelik	Concierge Aboneliği seçin
   Ad	my-static-web-app-and-api'yi girin
   Bölge	Size en yakın bölgeyi seçin
   Önceden ayarlanmış	Vue'ı seçin
   Uygulama kodu konumu	vue-app'ye giriniz
   Çıkış konumu	girin

Not

Bu depo, alışkın olabileceğiniz diğer projelerden farklıdır. Bu proje dört farklı klasörde dört farklı uygulama içerir. Her klasör farklı bir JavaScript çerçevesinde oluşturulmuş bir uygulama içerir. Genellikle, depo kökünde yalnızca bir uygulama bulunur ve bu nedenle uygulama yolu için varsayılan / kullanılır. Bu yapı, Azure Static Web Apps'in ilk etapta konumları yapılandırmanıza nasıl olanak tanıyan harika bir örnektir. Uygulamanın nasıl oluşturulduğu üzerinde tam denetime sahip olursunuz.

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

   

   Derlemeyi yapılandırırken, Visual Studio Code derleme durumunu size bildirir.

   

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

   

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

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

   

   Henüz veri veya API olmadığından uygulamanız Veri yükleniyor ... demelidir. Bu modülün ilerleyen bölümlerinde web uygulamanızın API'sini ekleyeceksiniz.

Tebrikler! Uygulamanız Azure Static Web Apps'e dağıtıldı!

Not

Uygulamanın henüz derlenmediğini ve dağıtılmadığını belirten bir web sayfası görürseniz endişelenmeyin. Tarayıcıyı bir dakika içinde yenilemeyi deneyin. Azure Statik Web Uygulaması oluşturulduğunda GitHub Action hizmeti otomatik olarak çalışır. Bu nedenle, tanıtım sayfasını görürseniz, uygulama hala dağıtılmakta.

GitHub'dan değişiklikleri çekme

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

1. Ctrl+Shift+Ptuşlarına basarak Komut Paleti'ni açın.

2. Git: girin ve seçin.

3. tuşuna basın,girin.

Sonraki adımlar

Bir sonraki adımda Azure İşlevleri projesini kullanarak API'nizi oluşturmayı ve çalıştırmayı öğreneceksiniz.