Öğretici: Bir VuePress sitesini Azure Static Web Apps

Bu makalede, Bir VuePress web uygulaması oluşturma ve Azure'a dağıtmaAzure Static Web Apps. Son olarak, uygulamanın Azure Static Web Apps ve yayımlan GitHub Actions denetimine sahip yeni bir uygulamadır.

Bu öğreticide şunların nasıl yapıldığını öğreneceksiniz:

Önkoşullar

• Etkin aboneliği olan bir Azure hesabı. Hesabınız yoksa ücretsiz bir hesap oluşturabilirsiniz.
• GitHub hesabı. Hesabınız yoksa ücretsiz bir hesap oluşturabilirsiniz.
• Node.js yüklü.

VuePress Uygulaması oluşturma

Komut Satırı Arabiriminden (CLI) vuePress uygulaması oluşturun:

1. VuePress uygulaması için yeni bir klasör oluşturun.

   mkdir static-site
   

2. Klasöre README.md bir dosya ekleyin.

   echo '# Hello From VuePress' > README.md
   

3. Dosyada package.jsdosyasını başlatma.

   npm init -y
   

4. VuePress'i olarak devDependency ekleyin.

   npm install --save-dev vuepress
   

5. Dosya package.jsbir metin düzenleyicisinde açın ve bölümüne bir derleme komutu scripts ekleyin.

   ...
   "scripts": {
       "build": "vuepress build"
   }
   ...
   

6. Node _ modules klasörünü dışlamak için bir .gitignore dosyası oluşturun.

   echo 'node_modules' > .gitignore
   

7. Git deposu başlatın.

    git init
    git add -A
    git commit -m "initial commit"
   

Uygulamanızı GitHub 'a gönderme

Azure statik Web Apps bağlanmak için GitHub 'da bir depoya ihtiyacınız vardır. Aşağıdaki adımlarda siteniz için nasıl bir depo oluşturacağınız gösterilmektedir.

1. Boş bir GitHub deposu (BENIOKU oluşturma) https://github.com/new adlı vuepress-static-App öğesinden oluşturun.

2. GitHub deposunu yerel depoya uzak olarak ekleyin. Aşağıdaki komutta yer tutucu yerine GitHub Kullanıcı adınızı eklediğinizden emin olun <YOUR_USER_NAME> .

   git remote add origin https://github.com/<YOUR_USER_NAME>/vuepress-static-app
   

3. Yerel depoyu GitHub 'a iletin.

   git push --set-upstream origin main
   

Web uygulamanızı dağıtın

Aşağıdaki adımlarda, yeni bir statik site uygulamasının nasıl oluşturulacağı ve bir üretim ortamına nasıl dağıtılacağı gösterilmektedir.

Uygulama oluşturma

1. Azure portalına gidin

2. Kaynak oluştur ' u seçin

3. Statik Web Uygulamaları için arama yapın

4. Statik Web Apps seçin

5. Oluştur’u seçin

6. Temel bilgiler sekmesinde, aşağıdaki değerleri girin.

   Özellik	Değer
   Abonelik	Azure abonelik adınız.
   Kaynak grubu	My-vuepress-Group
   Ad	vuepress-statik-uygulama
   Plan türü	Ücretsiz
   Azure Işlevleri API 'SI ve hazırlama ortamları için bölge	Size en yakın bölgeyi seçin.
   Kaynak	GitHub

7. GitHub Ile oturum açma ve GitHub ile kimlik doğrulama ' yı seçin.

8. Aşağıdaki GitHub değerlerini girin.

   Özellik	Değer
   Kuruluş	İstediğiniz GitHub kuruluşuna gidin.
   Depo	vuepress-static-app öğesini seçin.
   Dal	main öğesini seçin.

9. Derleme Ayrıntıları bölümünde Derleme Ön Ayarları açılan menüsünden VuePress'i seçin ve varsayılan değerleri bırakın.

Gözden geçir ve oluştur

1. Ayrıntıların doğru olduğunu doğrulamak için Gözden Geçir + Oluştur düğmesini seçin.

2. App Service Statik Web Uygulaması'nın oluşturulmasını başlatmak ve dağıtım için bir GitHub Eylemi sağlamayı başlatmak için Oluştur'a seçin.

3. Dağıtım tamamlandıktan sonra Kaynağına git'e tıklayın.

4. Kaynak ekranında, dağıtılan uygulamanızı açmak için URL bağlantısına tıklayın. GitHub Eyleminin tamamlanması için bir veya iki dakika beklemesi gerekir.

   

Kaynakları temizleme

Bu uygulamayı kullanmaya devam edemeyecekecekseniz, Azure statik Web uygulaması kaynağını aşağıdaki adımlarla silebilirsiniz:

1. Azure portalı açın
2. En üstteki arama çubuğunda, daha önce verdiğiniz adı izleyerek uygulamanızı arayın
3. Uygulamaya tıklayın
4. Sil düğmesine tıklayın
5. Silme eylemini onaylamak için Evet ' e tıklayın

Sonraki adımlar