Bir Angular Projesini Azure’a Otomatik Deploy Etme
Selamlar,
Bu makalede bana bolca sorulan bir Angular projesini deploy etme yöntemlerinden birini hep beraber tartışacağız.
1-) Öncelikle gelin bir Angular projesini aşağıdaki komut satırları ile yaratalım:
2-) Projenin ana root’una alttaki web.config dosyası oluşturulur.
Web.config:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<configuration> <system.webServer> <rewrite> <rules> <rule name="redirect all requests" stopProcessing="true"> <match url="^(.*)$" ignoreCase="false" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" /> </conditions> <action type="Rewrite" url="index.html" appendQueryString="true" /> </rule> </rules> </rewrite> </system.webServer> </configuration> |
3-) Aşağıdaki komut ile ilgili proje derlenir. Böylece otomatik olarak bir “dist” folderı oluşur. Ve tüm derlenmiş dosyalar bu klasör içinde yaratılır. Daha sonra github’a için bir “publish” folder’ı oluşturulur. Oluşturulan bu “publish” folder’ı içine yukarıda yaratılan “web.config” dosyası taşınır. Son olarak “dist” folder’ı içindeki tüm dosyalar, bu publish folder’ına kopyalanır.
|
1 |
ng build |
4-) Github’da ilgili proje için “RealtimeDeployment” adında bir repostory oluşturulur.
|
1 |
https://github.com/borakasmer/RealtimeDeployment.git |
5-) Projenin “publish” folder’ı GitHub’a bağlanır. Bu projede Source Tree kullanıomıştır. İstenir ise Visual Studio Code üzerinde de proje Github’a atılabilir.
- Aşağıdaki gibi önce “New” daha sonrada çıkan seçeneklerden “Clone from URL” seçilir.
- Aşağıda görülen yerlere Github’daki ilgili proje url’i Source URL’e, projenin dist folder’ı Destination Path’e ve Adı “RealtimeDeployment” Name alanına yazılır.
6-) Azure tarafında, aşağıda görüldüğü gibi bir Web App oluşturulur.
- Web application için gerekli tanımlamalar aşağıdaki gibi yapılır.
- Yaratılma işleminden sonra Detay’a, ordan da Deployment options’a gidilir.
- Karşımıza çıkan birçok deployment seçeceğinden alttaki gibi GitHub olan seçilir. Diğerleri üzerine de, bu makalede olmasa da ileride bolca konuşacağız.
- Aşağıda görüldüğü gibi Github’dan ilgili “RealtimeDeployment” projesi seçilir. Ve böylece ilgili Github’a Azure tarafından bir kanca yani Webhook atılmış olunur.
7-) Source Tree ile belirtilmiş “publish” folder Github’a Pushlanır. İlgili GitHub şifresi girildikten sonra tüm “publish” folder’ı Github’a atılır. Webhook sayesinde Azure, Github’daki dinlenen reponun değişikliğini algılayıp, yeni oluşan publish folder’ını kendisine çeker ve bu repoya tanımlı Web Application’ı, otomatik olarak güncelleyip yayımlanmaya başlar.
Bu makalede bana çokça sorulan bir Angular projesinin nasıl yayımlanacağını, biraz da arasına webhook koyup Github’dan Azure’a doğru otomati deployment’ı hep beraber inceledik. Bunun yerine “ng build” komutu ile oluşan “dist” folder’ının içindeki dosyalara, manuel oluşturacağımız “web.config” dosyasını da ekleyip Azure yerine, bir IIS sunucusunda da yayımlayabilirdik. TDD anlamında asla unutmayacağımız bir diğer konu ise test test test.
Geldik bir makalenin daha sonuna. Yeni bir makalede görüşmek üzere hoşçakalın.
Source:
- https://stackoverflow.com/questions/300416/iis-redirect-all-requests-to-one-page/2659831
- https://docs.microsoft.com/en-us/azure-stack/operator/azure-stack-app-service-configure-deployment-sources?view=azs-2002
Hocam elinize sağlık çok güzel bir yazı olmuş. Bir sorum var. web.config dosyası anladığım kadarıyla gelen istekleri yönlendirmek için oluşturuldu. Fakat içeriği tam olarak anlamadım. Web.config yönlendirmeyi nasıl yapıyor? Ve ayrıca neden böyle bir yönlendirmeye ihtiyaç var?