Selamlar arkadaşlar,
Yazımızın bu bölümünde başlıktan da anlaşılabileceği üzere frontend uygulamamızı github actions ile deploy edeceğiz :)
Bu çalışmada senaryomuz boş bir vuejs app’i oluşturup oluşan bu app’i githuba yüklemek ve ardından her atılan commit için pipeline’ımızın tetiklenmesini sağlayıp uygulamamızın son halini sunucumuza deploy etmek.
Ben örnek olarak vuejs seçtim ama siz bu örneği react, angular gibi npm ile derlenebilen diğer frontend kütüphaneleri/çatıları için kullanabilirsiniz.
“vue create example” komutu ile vue cli kullanarak example isminde bir uygulama oluşturuyorum ve oluşan bu uygulamayı github’a yüklüyorum.
Şimdi ise sıra geldi Github Action‘uzumu hazırlamaya:
name: Node CI
on:
push:
branches:
- master
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/[email protected]
- name: Install Node.js
uses: actions/[email protected]
with:
node-version: '12.x'
- name: Install npm dependencies
run: npm install
- name: Run build task
run: npm run build --if-present
- name: Deploy to Server
uses: AEnterprise/[email protected]
env:
DEPLOY_KEY: ${{ secrets.SSH_KEY }}
ARGS: "-e -c -r --delete"
SERVER_PORT: ${{ secrets.SSH_PORT }}
FOLDER: "dist/"
SERVER_IP: ${{ secrets.SSH_HOST }}
USERNAME: ${{ secrets.SSH_USER }}
SERVER_DESTINATION: ${{ secrets.SSH_TARGET }}
Oluşturduğumuz bu Actionu kısaca açıklamak gerekirse; Action, önce npm ile projeyi derleyip çıktıyı rsync ile sunucuya yüklüyor. (Sunucuda nginx, apache, vb. bir web server yazılımının kurulu oldunuğunu varsayarak.)
Repository‘e değişkenleri tanımlamak için repository içerisindeki Settings menüsü altından sol taraftaki Secrets menüsünü kullanmamız gerekiyor. Bu menüye girdikten sonra tanımlamamız gereken toplam 5 adet değişken mevcut.
Sırasıyla açıklamak gerekirse;
SSH_KEY : sunucuya bağlanmak için kullanacağınız ssh private key (oluşturmak için: https://www.digitalocean.com/community/tutorials/how-to-configure-ssh-key-based-authentication-on-a-linux-server)
SSH_HOST: bağlanacağımız sunucunun ip adresi
SSH_USER : bağlanacağımız sunucudaki kullanıcı adımız
SSH_PORT: bağlanacağımız sunucunun ssh portu (default 22)
SSH_TARGET: dosyaların sunucu üzerinde nereye atılacağı
Hepsini oluşturduktan sonra yukarıdaki gibi bir tabloyla karşılaşmamız gerekiyor.
Burada dikkat etmeniz gereken diğer bir durum ise ssh ile bağlantı yapacak kullacının yetkilerinin sadece web sunucuya dosya yükleyebilecek şekilde sınırlandırılmış olması gerektiğidir.
Herşeyi tamamladıktan sonra artık pipeline‘ımızı deneyebiliriz.
Commit‘imizi attıktan sonra otomatik deployment için bekleyemeye başlıyoruz. Bu bekleme esnasında Actions tab’i altında pipeline‘ımızın ilerleme durumunu kontrol edebiliriz.
Vee.. Uygulamamız yayında!
Artık atılan her commit için uygulamamız pipeline tarafından otomatik olarak deploy ediliyor olmuş oldu. Tabi bazı durumlarda her commit yayına gitsin istemeyiz bu tür durumlarda master yerine başka bir branch‘i işaretleyerek sadece ilgili branch‘e giden kodlar için pipeline‘ımızın tetiklenmesini sağlamalıyız. Bunun için ise main.yml dosyasındaki branches:- master kısmını ilgili branch ismiye değiştirmemiz yeterlidir.
Artı olarak yine prod env için bu pipeline üzerine yazılmış olan testlerin çalıştırılıp eğer testlerin hepsi geçmezse pipeline‘ın fail etmesi durumunu eklememiz gerekir.
Çalışmanın son hali: https://github.com/ismkdc/github-actions-example2