Github Actions ile Ücretsiz CI/CD – 2 (Vue.js | React | Angular)

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:

Bunun için github repomuzu ziyaret edip tabler’den Actions tab’ine tıklıyoruz. Bu tab altında bizim için önceden hazırlanmış kullanabileceğimiz bir çok hazır Action bulunmakta. Biz bu Actionları pas geçip Set up a workflow yourself butonuna basarak kendi yaml dosyamızı hazırlayacağız.
Kullanacağımız Action içeriği ise şöyledir (Kopyalamak için buraya kullanın: https://github.com/ismkdc/github-actions-example2/blob/master/.github/workflows/main.yml):
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