Azure Statik Web Uygulamanızı planlama
Son hedefiniz, uygulamanızı Azure’da barındırmaktır. Azure Static Web Apps, sizin için gerekli tüm Azure kaynaklarının sağlanmasıyla ilgilenir.
Uygulamanızın barındırılabilmesi için değişiklik yaptıkça uygulamanızı derlemek için kullanabileceğiniz bir özelliğe ihtiyaç duyacaksınız. Bu değişiklikler deponuza yapılan işlemeler veya buraya gönderilen çekme istekleri aracılığıyla yapılabilir. Uygulamanızın derlenmesi ve yayımlanması için bir GitHub Actions iş akışının ayarlanması Azure Statik Web Uygulamaları’nın önemli bir özelliğidir.
Azure Statik Web Uygulaması kaynağını oluşturduğunuzda GitHub Actions iş akışı sizin için oluşturulur. Hemen tetiklenen iş akışı uygulamanızı derleyip yayımlar. İş akışı, deponuzda bulunan izlenen dalda yaptığınız her değişiklik ile tetiklenir.
Azure Statik Web Uygulamaları
Bir web uygulamasının dağıtılırken iki otomatikleştirilmiş özellikten faydalanılır. Bunların ilki uygulamanızı oluşturan temel alınan Azure kaynaklarının sağlanmasıdır. İkincisi de, uygulamanızı derleyip yayımlayan GitHub Actions iş akışıdır.
Azure Statik Web Uygulamaları ile uygulamanızı webde yayımladığınızda web uygulamanızın ve ölçeklenebilir API’leriniz için hızlı barındırma özelliği elde edersiniz. GitHub Actions tarafından sağlanan birleşik derleme ve dağıtım iş akışını da edinirsiniz.
Statik Web Uygulamaları örneğinizi GitHub’a bağlama
Azure Statik Web Uygulamaları, uygulamaları GitHub’da kaynak kodunun bulunduğu yerde barındırmak için tasarlanmıştır. Bir Statik Web Uygulaması örneği oluşturduğunuzda GitHub’da oturum açıp uygulamanızın kodunu içeren depoyu belirtmeniz gerekir.
Uygulamanızın otomatik olarak derlenip dağıtılması için deponuzda üç klasör yolunu da belirtmeniz gerekir:
| Konum | Konum örneği | Açıklama | Gerekli |
|---|---|---|---|
| Uygulama konumu | / | Web uygulamanıza yönelik kaynak kodunun konumu | Evet |
| Uygulama derleme çıkış konumu | dist | Uygulamanızın derleme çıkışının konumu, uygulama konumunuza göre | No |
| API konumu | api | API’nize yönelik kaynak kodunun konumu | No |
Uygulama derleme çıkışı, uygulamanızın derleme çıkış dizinine göreli bir yoldur. Örneğin, my-app konumunda bulunan ve derlenen varlıklarını my-app/dist klasörüne gönderen bir uygulamanızın olduğunu varsayalım. Bu durumda, bu konum için dist değerini belirtirsiniz.
GitHub Actions ile kaynak kodundan statik varlıklara
GitHub deponuz kaynak kodunu içerir. Bu nedenle, deponun yayımlanmadan önce oluşturulması gerekir.
Bir Statik Web Uygulamaları örneği oluşturduğunuzda, GitHub Actions iş akışı deponuzda Azure tarafından oluşturulur. İş akışı, değişiklikleri her gönderişinizde veya izlemeyi seçtiğiniz dalda bir çekme isteği oluşturduğunuzda uygulamanızı oluşturur. Bu derleme işlemi, kaynak kodunuzu Azure tarafından sunulan statik varlıklara dönüştürür. Derleme işlemi tamamlandığında eylem varlıkları dağıtır.
GitHub Eylemi, .github/workflows klasöründeki deponuza eklenir. Bu dosyayı gerektiği gibi gözden geçirebilir veya değiştirebilirsiniz. Kaynağı oluştururken girdiğiniz ayarlar GitHub Action’a ilişkin dosyada depolanır.
Azure İşlevleri ile tümleşik API
API kullanmak istiyorsanız deponuzda bir Azure İşlevleri projesi olarak uygulayabilirsiniz. API'niz otomatik olarak dağıtılır ve Static Web Apps örneğinizde barındırılır. Uygulamanızı derleyip dağıtan GitHub Actions iş akışı, belirttiğiniz klasörün adına göre deponuzdaki API’yi bulur.
API uygulamaları genelde api veya işlevler adlı klasörlere koyulur ancak bunların adını istediğiniz gibi değiştirebilirsiniz.
Peki API’niz yoksa? Endişelenmeyin. Azure Statik Web Uygulamaları belirttiğiniz klasörde bir API bulamazsa API’yi yayımlamaz (ancak uygulamanız yayımlanır).
Geri dönüş yollarını ele alma
Tarayıcı, /products’ı sunmak için konak platforma bir istek gönderdiği için sayfayı yenilediğinizde bir 404 hatası görürsünüz. Bunun sebebi sunucuda products adlı bir sayfanın bulunmamasıdır. Bir geri dönüş yolu oluşturarak bunu kolayca çözebilirsiniz. Geri dönüş yolu, tüm eşlenmemiş sayfa isteklerini sunucuyla eşleştiren bir yoldur.
Azure Static Web Apps, uygulamanın derleme çıktı klasöründe bulunan isteğe bağlı staticwebapp.config.json dosyasında tanımlanan özel yönlendirme kurallarını destekler.
Uygulamanızı, aşağıdaki örnekte gösterildiği gibi dosya filtresiyle yol joker karakteri kullanan bir geri dönüş yolu uygulayan kuralları kullanacak şekilde yapılandırabilirsiniz:
{
"navigationFallback": {
"rewrite": "index.html",
"exclude": ["/images/*.{png,jpg,gif,ico}", "/*.{css,scss,js}"]
}
}
Bu kural Azure Static Web Apps'e, ifadede gösterilen görüntüler ve CSS dosyaları hariç olmak üzere bir kaynak isteği bulunamadığında hizmet index.html vermelerini exclude söyler.
Yol dosyası konumu
Azure Static Web Apps, staticwebapp.config.json dosyanızın varsayılan olarak içinde output_location olmasını bekler. Derleme işleminiz staticwebapp.config.json dosyanızı dosyasına output_locationkopyalarsa, yapmanız gereken başka bir şey yoktur. Çoğu proje için , output_location ile app_locationgörelidir.
Uygulamanızın staticwebapp.config.json dosyası angular-app/src/assets klasöründe bulunur.
staticwebapp.config.json dosyası react-app klasöründe bulunur.
staticwebapp.config.json dosyası svelte-app/public klasöründe bulunur.
staticwebapp.config.json dosyası vue-app/public klasöründe bulunur.
Sonraki adımlar
Web uygulamanızı Azure Statik Web Uygulamaları’nda yayımlamak için ne gerekir? Yalnızca GitHub deposundaki uygulamaya ihtiyaç duyarsınız.