Önceki

Sonraki

Alıştırma - Kullanmaya başlama

Tamamlandı

Azure Statik Web Uygulamaları, uygulamaları bir GitHub deposundan derleyerek web sitelerini bir üretim ortamında yayımlar. Bu alıştırmada, bir GitHub deposunda bulunan tercih ettiğiniz ön uç çerçevesini kullanarak bir web uygulaması derlemeyi öğreneceksiniz.

Depo oluşturma

Bu modül, GitHub şablon deposunu kullanarak yeni bir depo oluşturmanızı kolaylaştırır. Her biri farklı bir ön uç çerçevesiyle oluşturulmuş bir başlangıç uygulaması içeren bir şablon dizisi sunulur.

1. Şablon deposu için şablondan oluştur sayfasına gidin. 404: Sayfa Bulunamadı hatası alırsanız GitHub'da oturum açın ve yeniden deneyin.

2. Sahip açılan listesinde GitHub hesaplarınızdan birini seçin.

3. Deponuzu my-static-web-app olarak adlandırın.

4. Şablondan depo oluştur düğmesini seçin.

Uygulamanızı çalıştırma

GitHub hesabınızda my-static-web-app 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. Başlangıç olarak GitHub deposunu bilgisayarınızdaki istenen dizine kopyalayın.

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

3. Kaynak kodunuzun klasörüne gidin.

   cd my-static-web-app
   

4. Ardından, aşağıda gösterildiği gibi tercih ettiğiniz ön uç çerçevesinin klasörüne gidin.

   cd angular-app
   

   cd react-app
   

   cd svelte-app
   

   cd vue-app
   

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

   npm install
   

   Dekont

   PATH bulunamıyor hatası alırsanız node.js dosyasını dosyasından yüklediğinizden https://nodejs.orgemin olun. PATH'e Ekle seçeneğini yüklemeyi içeren özel bir kurulum yapmanız gerekebilir.

   

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

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

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

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

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

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

Dekont

Bu modülün alıştırmalarında API olmadan bir uygulama dağıtacaksınız. Uygulamanızın yanı sıra bir API dağıtabileceğiniz sonraki modül hakkında bilgi için bu modülün sonundaki Sonraki adımlar bölümüne bakın.

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

Sonraki adımlar

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

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

Devam et