by Baris Ceviz


Posted on Wednesday 26 July 2017


ReactJS App i Azure Web App e Deploy Etmek

ReactJS ile geliştirdiğimiz web uygulamasını Azure Web Apps e nasıl deploy edilebileceğini bu yazı içerisinde bulabilirsiniz

Selamlar,

Bu yazımda geliştirdiğimiz ReactJS uygulamasını Azure Web Apps e nasıl deploy edebileceğimizden bahsedeceğim. Öncelikle bir sample proje oluşturalım ve ardından bu sample projeyi Azure Web Apps e deploy edelim.

Öncelikle eğer React JS için yapılmış olan CLI i kurmadıysanız tavsiye ediyorum. React CLI içerisinde otomatik olarak gelen Webpack gibi module builder lar mevcut. Böylelikle siz bir build aldığınızda otomatik webpack ile production package çıkarabiliyorsunuz. Nasıl kuracağımıza geçerse k cmd veya terminal üzerinden npm ile ReactJS CLI ini kuralım

npm install -g create-react-app

Kurulum tamamlandıktan sonra örnek bir proje oluşturalım

create-react-app azure-deploy-test

Artık projemiz oluştu ve bir test edelim. Projemizin klasörüne gidip aşağıdaki NodeJS Dev Server ı çalıştıralım

npm start

Evet gördüğünüz gibi güzelce çalışıyor. Şimdi Azure a nasıl deploy alacağız ona bakalım.

build komutunu çalıştırarak react-scripts arka tarafta webpack i çalıştırır ve production package çıkarır. Bu çıkan package ile artık deploy alabiliriz. Aşağıdaki gibi kodu çalıştırıp package ı build edelim

npm run build

Build klasörünün içerisine package ımızı çıkardı. Burada aslında bir bundle oluşturdu. Bu bundle da kullandığımız node modules ler ve kodlarımız mevcut. Webpack içerisinde optimize edilerek bir bundle haline gelmektedir. Ardınadn index.html içerisine de eklenir.

Şimdi Azure üzerinden oluşturduğumuz Web App e deploy alma vakti. Eğer App Services deployment yazımı okumadıysanız bu yazının devamında yaptığım işlemleri Microsoft Azure App Services Deployment - Local Git Repository konulu yazımda bahsettim.

Önceki yazımda anlattığım Local Git Repository ayarlarını yaptığınızı varsayarak devam edelim Overview üzerinden aldığınız Git Repository Url i clone edelim

git clone <git-repository-url>

Gelen kullanıcı adı ve şifre bölümünde Deployment Credentials olarak belirlediğimiz kullanıcı adı ve şifreyi girelim. Projeyi clone ettikten sonra clone edilen klasöre gidelim ve içerisine build klasöründeki dosyaları atalım. Ardından klasik bir git commit ve pushlaması yapalım

git add .
git commit -m"ReactJS App Deploy to Azure Web App"
git push origin master

Ve artık deploy edildi. Şimdi sitemize gidelim ve test edelim

Evet gördüğünüz gibi bir ReactJS uygulamamızı Azure Web App e deploy aldık

Bir başka yazıda görüşmek üzere :) İyi kodlamalar