Alıştırma - Kullanmaya başlama
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.
Ş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.
Sahip açılan listesinde GitHub hesaplarınızdan birini seçin.
Deponuzu my-static-web-app olarak adlandırın.
Ş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.
Bilgisayarınızda bir terminali açın.
Başlangıç olarak GitHub deposunu bilgisayarınızdaki istenen dizine kopyalayın.
git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app
Kaynak kodunuzun klasörüne gidin.
cd my-static-web-app
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
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.
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.