Hızlı başlangıç: Azure statik Web Apps ilk statik sitenizi oluşturma

Azure statik Web Apps, bir kod deposundan uygulama oluşturarak bir Web sitesi yayımlar. bu hızlı başlangıçta, Visual Studio Code uzantısını kullanarak bir uygulamayı Azure statik Web uygulamalarına dağıtırsınız.

Azure aboneliğiniz yoksa ücretsiz bir deneme hesabı oluşturun.

Önkoşullar

• GitHub hesabı
• Azure hesabı
• Visual Studio Code
• Visual Studio Code için Azure Static Web Apps uzantısı
• Git'i yükleyin

Depo oluşturma

Bu makalede, başlamanızı kolaylaştırmak için bir GitHub şablon deposu kullanılmaktadır. Şablon, Azure statik Web Apps kullanarak dağıtmak için kullanılan bir başlangıç uygulaması sunar.

Şablondan depo oluştur’u seçin.

Depoyu kopyalama

GitHub hesabınızda oluşturulan depo ile, aşağıdaki komutu kullanarak projeyi yerel makinenize kopyalayın.

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

Öğesini <YOUR_GITHUB_ACCOUNT_NAME> GitHub Kullanıcı adınızla değiştirdiğinizden emin olun.

sonra, Visual Studio Code açın ve dosya > klasörü aç ' a giderek kopyalanmış depoyu düzenleyicide açın.

Statik web uygulaması oluşturma

1. Visual Studio Code'un etkinlik çubuğundan Azure logosunu seçerek Azure uzantıları penceresini açın.

   

   Not

   devam etmek için Azure 'da oturum açmanız ve Visual Studio Code GitHub gerekir. Henüz kimlik doğrulamasından açmadıysanız, uzantı oluşturma işlemi sırasında her iki hizmetinde da oturum açmanızı ister.

2. Statik Web Apps etiketi altında artı işaretini seçin.

   

   Not

   Azure statik Web Apps Visual Studio Code uzantısı, bir dizi varsayılan değeri kullanarak oluşturma işlemini kolaylaştırır. Oluşturma işleminin ayrıntılı denetimini yapmak istiyorsanız, pageç komutunu açın ve Azure statik Web Apps: statik Web uygulaması oluştur... seçeneğini belirleyin. (Gelişmiş).

3. Komut paleti düzenleyicinin en üstünde açılır ve bir abonelik adı seçmenizi ister.

   Aboneliğinizi seçin ve ENTERtuşuna basın.

   

4. Ardından, uygulamanızı adlandırın.

   my-first-static-web-app yazıp Enter tuşuna basın.

   

5. Size yakın bir bölge seçin.

   Not

   Azure statik Web Apps, statik varlıklarınızı küresel olarak dağıtır. Seçtiğiniz bölge, isteğe bağlı hazırlama ortamlarınızın ve API işlev uygulamanızın bulunacağı yeri belirler.

6. Uygulama türü ile eşleşen ön ayarları seçin.

   • Çerçeve yok
   • Angular
   • React
   • Vue

   

   Uygulama dosyalarının konumu olarak /src yazın ve ENTERtuşuna basın.

   Bu uygulama bir derleme çıkışı oluşturmuyor. Derleme çıkış konumunun boş olduğundan emin olun ve ENTERtuşuna basın.

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

   

   dağıtım devam ettiğinden Visual Studio Code uzantısı, derleme durumunu size bildirir.

   

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

8. 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özatma' yı seçin.

   

Kaynakları temizleme

Bu uygulamayı kullanmaya devam etmeyecekecekseniz, Azure statik Web Apps örneğini uzantı aracılığıyla silebilirsiniz.

Visual Studio Code gezgin penceresinde statik Web Apps bölümüne dönüp, ilk-statik-Web-uygulaması ' na sağ tıklayın ve sil' i seçin.

Sonraki adımlar