Not
Bu sayfaya erişim yetkilendirme gerektiriyor. Oturum açmayı veya dizinleri değiştirmeyi deneyebilirsiniz.
Bu sayfaya erişim yetkilendirme gerektiriyor. Dizinleri değiştirmeyi deneyebilirsiniz.
Bu makalede, Azure portalını kullanarak Angular uygulamasını Azure Static Web Apps'e dağıtmayı öğreneceksiniz.
Önkoşullar
| Kaynak | Notlar |
|---|---|
| Azure aboneliği | Azure aboneliğiniz yoksa ücretsiz bir deneme hesabı oluşturun. |
| GitHub hesabı | GitHub hesabınız yoksa ücretsiz bir hesap oluşturabilirsiniz. |
| Kaynak | Notlar |
|---|---|
| Azure aboneliği | Azure aboneliğiniz yoksa ücretsiz bir deneme hesabı oluşturun. |
| Azure DevOps hesabı | GitHub hesabınız yoksa bir hesap oluşturabilirsiniz. |
Depo oluşturma
Bu makalede, kullanmaya başlamanızı kolaylaştırmak için bir GitHub şablon deposu kullanılmaktadır. Şablonda Azure Static Web Apps'e dağıtılacak bir başlangıç uygulaması bulunur.
Yeni bir depo oluşturmak için aşağıdaki konuma gidin:
Deponuzu my-first-static-web-app olarak adlandır
Şablondan depo oluştur’u seçin.
Bu makalede, kullanmaya başlamanızı kolaylaştırmak için bir Azure DevOps deposu kullanılır. Depoda Azure Static Web Apps kullanarak dağıtmak için kullanılan bir başlangıç uygulaması bulunur.
Azure DevOps'te oturum açın.
Yeni depo'yu seçin.
Yeni proje oluştur penceresinde Gelişmiş menüsünü genişletin ve aşağıdaki seçimleri yapın:
Ayar Değer Proje my-first-web-static-app girin. Görünürlük Özel’i seçin. Sürüm denetimi Git'i seçin. İş öğesi süreci Geliştirme yöntemlerinize en uygun seçeneği belirleyin. Oluştur'u belirleyin.
Repos menü öğesini seçin.
Dosyalar menü öğesini seçin.
Depoyu içeri aktar kartının altında İçeri Aktar'ı seçin.
Seçtiğiniz çerçeve için bir depo URL'sini kopyalayın ve URL'yi Kopyala kutusuna yapıştırın.
İçeri Aktar'ı seçin ve içeri aktarma işleminin tamamlanmasını bekleyin.
Statik web uygulaması oluşturma
Artık depo oluşturulduğuna göre, Azure portalından statik bir web uygulaması oluşturabilirsiniz.
- Azure portala gidin.
- Kaynak Oluştur’u seçin.
- Static Web App'i arayın.
- Statik Web Uygulaması'ı seçin.
- Oluştur'u belirleyin.
Temel Bilgiler bölümünde, yeni uygulamanızı yapılandırarak ve bir GitHub deposuna bağlayarak başlayın.
| Ayar | Değer |
|---|---|
| Abonelik | Azure aboneliği seçin. |
| Kaynak Grubu | Yeni oluştur bağlantısını seçin ve metin kutusuna static-web-apps-test yazın. |
| Veri Akışı Adı | Metin kutusuna my-first-static-web-app girin. |
| Plan türü | Ücretsiz'i seçin. |
| Kaynak | GitHub'ı seçin ve gerekirse GitHub'da oturum açın. |
GitHub ile oturum açtıktan sonra depo bilgilerini girin.
| Ayar | Değer |
|---|---|
| Kuruluş | Kuruluşunuzu seçin. |
| Depo | my-first-web-static-app öğesini seçin. |
| Şube | Ana'yı seçin. |
Not
Herhangi bir depo görmüyorsanız:
- GitHub'da Azure Static Web Apps'i yetkilendirmeniz gerekebilir. GitHub deponuza gidin ve Ayarlar > Uygulamalar > Yetkili OAuth Uygulamaları’na gidin, Azure Statik Web Uygulamaları'nı seçin, ardından Yetki Ver’i seçin.
- Azure DevOps kuruluşunuzda Azure Static Web Apps'i yetkilendirmeniz gerekebilir. İzinleri vermek için kuruluşun sahibi olmanız gerekir. OAuth aracılığıyla üçüncü taraf uygulama erişimi isteyin. Daha fazla bilgi için bkz . OAuth 2.0 ile REST API'lerine erişimi yetkilendirme.
Temel Bilgiler bölümünde, yeni uygulamanızı yapılandırarak ve bir Azure DevOps deposuna bağlayarak başlayın.
| Ayar | Değer |
|---|---|
| Abonelik | Azure aboneliği seçin. |
| Kaynak Grubu | Yeni oluştur bağlantısını seçin ve metin kutusuna static-web-apps-test yazın. |
| Veri Akışı Adı | Metin kutusuna my-first-static-web-app girin. |
| Plan türü | Ücretsiz'i seçin. |
| Kaynak | DevOps'yi seçin. |
| Kuruluş | Kuruluşunuzu seçin. |
| Proje | Projenizi seçin. |
| Depo | my-first-web-static-app öğesini seçin. |
| Şube | Ana'yı seçin. |
Not
Kullandığınız dalın korunmamış olduğundan ve bir push komutu vermek için yeterli izinlere sahip olduğunuzdan emin olun. Doğrulamak için DevOps deponuza gidin ve Depolar - > bölümüne gidip Diğer seçenekler'i seçin. Ardından dalınızı seçin ve gerekli ilkelerin etkinleştirilmediğinden emin olmak için Dal ilkeleri'ne tıklayın.
Derleme Ayrıntıları bölümünde, tercih ettiğiniz ön uç çerçevesine özgü yapılandırma ayrıntılarını ekleyin.
Derleme Ön Ayarları açılan listesinden Angular'ı seçin.
Uygulama konumu kutusunda varsayılan değeri tutun.
Api konum kutusunu boş bırakın.
Çıkış konumu kutusuna dist/angular-basic yazın.
Not
Bu yönergeleri kendi kodunuz ve Angular 17 veya üzeri ile kullanıyorsanız çıkış konumu değerinin /browser ile bitmesi gerekir.
Gözden geçir ve oluştur’u seçin.
Not
Uygulamayı oluşturduktan sonra bu değerleri değiştirmek için iş akışı dosyasını düzenleyebilirsiniz.
Oluştur'u belirleyin.
Kaynağa git’i seçin.
Web sitesini görüntüleme
Statik uygulama dağıtmanın iki yönü vardır. İlki, uygulamanızı oluşturan temel Azure kaynaklarını oluşturur. İkincisi, uygulamanızı derleyen ve yayımlayan bir iş akışıdır.
Yeni statik sitenize gidebilmeniz için önce dağıtım derlemesinin çalıştırılmasını tamamlamanız gerekir.
Statik Web Uygulamalarına Genel Bakış penceresinde, web uygulamanızla etkileşim kurmanıza yardımcı olacak bir dizi bağlantı görüntülenir.
Genel Bakış'ta GitHub Action çalıştırmalarını seçmek sizi deponuz üzerinde çalışan GitHub Actions'a götürür. Devam etmeden önce dağıtım eyleminin tamamlandığını doğrulayın.
GitHub Actions iş akışı tamamlandıktan sonra URL bağlantısını seçerek web sitesini yeni sekmede açabilirsiniz.
İş akışı tamamlandıktan sonra URL bağlantısını seçerek web sitesini yeni sekmede açabilirsiniz.
Kaynakları temizleme
Bu uygulamayı kullanmaya devam etmeyecekseniz, aşağıdaki adımları izleyerek Azure Static Web Apps örneğini silebilirsiniz:
- Azure portalını açın.
- Üst arama çubuğundan my-first-web-static-app araması yapın.
- Uygulama adını seçin.
- Sil'i seçin.
- Silme eylemini onaylamak için Evet'i seçin (bu eylemin tamamlanması birkaç dakika sürebilir).