Flutter Web ve Azure Deployment

Ah flutter, benim üzümlü kekim. Her şey Bulut Bilişim dersimizin final projesi ile başladı. “Online Examination System” konulu web sitesi yapmamız ve azure ortamında deploy etmemiz istemişti. Elinizin altında Flutter gibi güçlü bir geliştirme ortamı varken gidip bu ödev için .Net, React, Django veya Flask vs. geliştirmek istemezsiniz. Ben de bu motto ile yola çıktım.

Flutter ile geliştirdiğim kodu Azure ortamında nasıl deploy edebileceğimi gösteren herhangi bir doküman veya video bulamadım. O yüzden bu yazıyı yazmaya karar verdim.

Öncelikle kullandığınız paketlerin web için kurulumları varsa yapmaya dikkat edin. Örneğin flutter sevenlerin en çok kullandığı firebase için index dosyasına eklemeniz gereken bazı script tagleri bulunmaktadır.

Kodu yazdık, testimizi yaptık. Sıra geldi deploy etmeye. Web için build alarak başlayalım. Terminali açıp projemizin kök dizinine gidelim. Sonrasında,

flutter web build

Eğer bir sıkıntı ile karşılaşırsak önce mevcut kanalımızı kontrol etmekte fayda var. Şu an için flutter web stable değil. O yüzden beta kanalına geçiş yapmamız gerekiyor. Kanalımızı kontrol edelim.

flutter channel

Eğer beta’da değilsek geçiş yapalım.

flutter channel beta
flutter upgrade
flutter config --enable-web
flutter web build

Build işlemini tamamladıktan sonra github’a projemizi pushlayalım. Fakat öncesinde projemizdeki build klasörünün adını değiştirelim. Çünkü github’a bu halde pushlayınca build klasörünü pushlayamıyoruz. Adını “build2” olarak değiştirmemiz bile yeterli olacaktır.

Github ortamına build alınmış haldeki projemizi aktardıktan sonra Azure tarafına geçebiliriz. Portaldaki terminali açalım.

https://portal.azure.com/#home

Github’a attığımız projemizi Azure ortamına klonlayalım.

git clone <your repository>

Şimdi projemizin build/web dizine gidelim ve deploy işlemimizi yapalım.

az webapp up -g <Your Group Name> --sku F1 --name "<Project Name>" --location westeurope --html

Örneğin;

az webapp up -g WebAppResourceGroup --sku F1 --name "awesomeapp" --location westeurope --html

Başka kaynaklarda sondaki “--html” kısmını göremeyebilirsiniz fakat bizim mutlaka bunu yazmamız gerekiyor. Yoksa deploy ederken hata almamız kaçınılmaz.

Artık Flutter ile yazdığınız proje web ortamında deploy edildi. Deploy edildikten sonra terminalde yazan link ile geliştirdiğiniz web sitesine ulaşabilirsiniz. Bol kodlu günler dileğiyle ❤