Öğretici: Azure Static Web Apps için VuePress sitesi yayımlama

Bu makalede, bir VuePress web uygulamasının nasıl oluşturulacağı ve Azure Static Web Apps dağıtılacağı gösterilmektedir. Nihai sonuç, uygulamanın nasıl derlendiğini ve yayımlandığını denetlemenizi sağlayan ilişkili GitHub Actions sahip yeni bir Azure Static Web Apps uygulamasıdır.

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

• VuePress uygulaması oluşturma
• Azure Static Web Apps ayarlama
• VuePress uygulamasını Azure'a dağıtma

Önkoşullar

• Etkin aboneliği olan bir Azure hesabı. Hesabınız yoksa ücretsiz olarak bir hesap oluşturabilirsiniz.
• GitHub hesabı. Hesabınız yoksa ücretsiz olarak bir hesap oluşturabilirsiniz.
• Yüklü bir Git kurulumu. Yoksa Git'i yükleyebilirsiniz.
• Node.js yüklendi.

VuePress Uygulaması Oluşturma

Komut Satırı Arabirimi'nden (CLI) bir VuePress uygulaması oluşturun:

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

   mkdir static-site
   

2. Klasöre bir README.md dosyası ekleyin.

   echo '# Hello From VuePress' > README.md
   

3. package.json dosyasını başlatın.

   npm init -y
   

4. VuePress'i olarak devDependencyekleyin.

   npm install --save-dev vuepress
   

5. Package.json dosyasını bir 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. Bir Git deposu başlatın.

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

Uygulamanızı GitHub'a gönderme

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

1. adlı vuepress-static-app uygulamasından boş bir GitHub deposu oluşturun (README oluşturmayınhttps://github.com/new).

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

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

3. Yerel deponuzu GitHub'a gönderin.

   git push --set-upstream origin main
   

Web uygulamanızı dağıtma

Aşağıdaki adımlarda yeni bir statik site uygulaması oluşturma ve bunu üretim ortamına dağıtma adımları gösterilmektedir.

Uygulama oluşturma

1. Azure portal'a gidin

2. Kaynak Oluştur'u seçin

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

4. Static 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 aboneliğinizin adı.
   Kaynak grubu	my-vuepress-group
   Ad	vuepress-static-app
   Plan türü	Ücretsiz
   Azure İşlevleri API ve hazırlama ortamları için bölge	Size en yakın bölgeyi seçin.
   Kaynak	GitHub

7. GitHub ile oturum aç'ı seçin ve GitHub ile kimlik doğrulaması yapın.

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

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

   Not

   Herhangi bir depo görmüyorsanız GitHub'da Azure Static Web Apps yetkilendirmeniz gerekebilir. GitHub deponuza göz atın ve Ayarlar > Uygulamaları > Yetkili OAuth Uygulamaları'na gidin, Azure Static Web Apps'ı seçin ve ardından Ver'i seçin. Kuruluş depoları için, izinleri vermek için kuruluşun sahibi olmanız gerekir.

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

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'u seçin.

2. App Service Statik Web Uygulaması oluşturmaya başlamak ve dağıtım için bir GitHub Actions sağlamak için Oluştur'u seçin.

3. Dağıtım tamamlandıktan sonra Kaynağa git'i seçin.

4. Kaynak ekranında, dağıtılan uygulamanızı açmak için URL bağlantısını seçin. GitHub Actions tamamlanması için bir veya iki dakika beklemeniz gerekebilir.

   

Kaynakları temizleme

Bu uygulamayı kullanmaya devam etmeyecekseniz, aşağıdaki adımları izleyerek Azure Statik Web Uygulaması kaynağını silebilirsiniz:

1. Azure portalı açın
2. Üstteki arama çubuğunda, uygulamanızı daha önce sağladığınız ada göre 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

Özel etki alanı ekleme