Angular Projesi için GitLab CI/CD ile Otomatik Dağıtım

FrontEndLatest Software Developers 05/07/2025

Yazılım geliştirme süreçlerinde verimlilik ve otomasyon kritik öneme sahiptir. Bu yazımızda, Angular projenizi GitLab CI/CD kullanarak sunucuya nasıl otomatik olarak dağıtabileceğinizi adım adım açıklıyoruz.

Neden Otomatik Dağıtım?

Manuel dağıtımlar zaman alır ve hata riski taşır. Otomatik dağıtım sayesinde test ve yayınlama süreçleri hızlanır; böylece operasyonel yük azalır, geliştiriciler kodlamaya daha fazla vakit ayırabilir.

1. Angular Projesini Derleme

ng build --configuration production

Bu komut projenizi dist/ klasörüne üretim modunda oluşturur.

2. GitLab CI/CD Yapılandırması (.gitlab-ci.yml)


stages:
  - build
  - deploy

variables:
  PROJECT_NAME: your-angular-project-name
  BUILD_DIR: dist/$PROJECT_NAME

build_app:
  image: node:20
  stage: build
  script:
    - npm ci
    - npm run build -- --configuration production
  artifacts:
    paths:
      - $BUILD_DIR

deploy_app:
  stage: deploy
  image: alpine:latest
  before_script:
    - apk add --no-cache openssh
  script:
    - scp -r $BUILD_DIR/* user@yourserver.com:/var/www/html/

3. SSH Anahtarı ile Güvenli Bağlantı

3.1 Anahtar Oluşturma

ssh-keygen -t rsa -b 4096 -C "gitlab-ci-deploy"

3.2 Public Key’i Sunucuya Ekleme

cat ~/.ssh/id_rsa.pub | ssh youruser@yourserver 'mkdir -p ~/.ssh && cat >> ~/.ssh/authorized_keys'

3.3 Private Key’i GitLab’a Tanımlama

GitLab'da SSH_PRIVATE_KEY oluşturma ekranı

4. Pipeline Başlatma ve Takip

GitLab üzerinden Pipeline sekmesine girerek süreci başlatabilir ve logları takip edebilirsiniz.

5. Olası Hatalar ve Çözüm

Hata: rsync: command not found

Çözüm:

sudo apt update && sudo apt install -y rsync

Sonuç

Bu adımlarla Angular projelerinizi otomatik ve güvenli şekilde dağıtabilir, geliştirme sürecinizin verimliliğini artırabilirsiniz.