Öğretici: VuePress sitesini Azure Static Web Apps'te yayımlama

Bu makalede , VuePress web uygulamasının nasıl oluşturulacağı ve Azure Static Web Apps'e nasıl dağıtılacağı gösterilmektedir. Sonuç olarak, uygulamanın nasıl derlendiğini ve yayımlandığını denetlemenizi sağlayan ilişkili GitHub Actions'a sahip yeni bir Azure Static Web Apps uygulaması elde edilir.

Bu eğitimde şunları öğreniyorsunuz:

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

Önkoşullar

• Aktif bir aboneliğe sahip bir Azure hesabı. Hesabınız yoksa ücretsiz bir hesap oluşturabilirsiniz.
• GitHub hesabı. Hesabınız yoksa ücretsiz 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. Git deposunu başlatın.

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

Uygulamanızı GitHub'a gönderme

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

1. adlı https://github.com/new uygulamasından boş bir GitHub deposu oluşturun (README oluşturmayın).

2. GitHub deposunu yerel deponuza uzak depo olarak ekleyin. Aşağıdaki komutta yer tutucu yerine GitHub kullanıcı adınızı eklediğinizden <YOUR_USER_NAME> 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.

Uygulamayı oluşturma

1. Azure portalına gidin

2. Kaynak Oluştur'u seçin

3. Static Web Apps'i arama

4. Statik Web Uygulamaları'nı seçin

5. Oluştur'u seçin

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

   Mülkiyet	Değer
   Subscription	Azure aboneliğinizin adı.
   Kaynak Grubu	my-vuepress-group
   İsim	vuepress-static-app
   Plan türü	Ücretsiz
   Azure İşlevleri API'leri ve hazırlama ortamları için bölge	Size en yakın bölgeyi seçin.
   Kaynak	GitHub

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

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

   Mülkiyet	Değer
   Organizasyon	İstediğiniz GitHub kuruluşunu seçin.
   Repository	vuepress-static-app öğesini seçin.
   Şube	Ana öğesini seçin.

   Uyarı

   Herhangi bir depo görmüyorsanız GitHub'da Azure Static Web Apps'i yetkilendirmeniz gerekebilir. GitHub deponuza göz atın ve Ayarlar > Uygulamaları > Yetkili OAuth Uygulamaları'na gidin, Azure Statik Web Uygulamaları'nı 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çirme ve oluşturma

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ı'nın oluşturulmasını başlatmak 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'ın tamamlanması için bir veya iki dakika beklemeniz gerekebilir.

   

Kaynakları temizle

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

1. Azure portalını açma
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