Docker ile Astro Sitesini Kolayca Yayınlama: Adım Adım Rehber

Statik siteler, performans, güvenlik ve maliyet açısından modern web geliştirmenin önemli bir parçası haline geldi. Astro framework, bu alanda oldukça popüler bir seçimdir. Peki, oluşturduğunuz Astro sitesini nasıl yayınlayabilir ve ölçeklenebilir bir altyapıyla yönetebilirsiniz? Bu rehberde, Docker konteynerleri kullanarak Astro sitelerini nasıl yayınlayabileceğinizi adım adım öğreneceksiniz.

Neden Docker?

Docker, uygulamalarınızı izole edilmiş ortamlarda çalıştırmayı sağlayan bir konteyner platformudur. Astro sitelerini Docker ile yayınlamanın birkaç önemli avantajı vardır:

Tutarlılık: Geliştirme, test ve üretim ortamları arasındaki farkları ortadan kaldırır.
Kolay Dağıtım: Uygulamanızı herhangi bir Docker destekleyen sunucuya kolayca taşıyabilirsiniz.
Kaynak Verimliliği: Konteynerler, sanal makinelere göre daha hafif ve hızlıdır.
Güvenlik: Uygulamanızı izole bir ortamda çalıştırarak güvenlik risklerini minimize edersiniz.

Ön Gereksinimler

Bu rehberi takip etmek için aşağıdaki araçlara ihtiyacınız olacak:

Docker: Docker Desktop (Windows/macOS) veya Docker Engine (Linux)
Node.js: Astro projesi oluşturmak için gerekli
Astro CLI: npm install -g astro komutuyla kurabilirsiniz
Bir metin editörü: VS Code, Sublime Text vb.
Bir terminal: Windows için PowerShell, macOS/Linux için Terminal

Adım 1: Astro Projesi Oluşturma

İlk olarak, yeni bir Astro projesi oluşturalım. Terminalinizi açın ve aşağıdaki komutları çalıştırın:

# Yeni bir Astro projesi oluştur
npm create astro@latest my-astro-site
cd my-astro-site

# Geliştirme sunucusunu başlat
npm run dev

Proje oluşturulduktan sonra, varsayılan olarak http://localhost:3000 adresinde çalışan bir geliştirme sunucusu başlatılacaktır. Tarayıcınızda bu adresi açarak projenizin çalıştığını doğrulayabilirsiniz.

Adım 2: Dockerfile Oluşturma

Docker konteynerinde çalıştırmak için bir Dockerfile oluşturmalıyız. Proje dizininde yeni bir dosya oluşturun ve aşağıdaki içeriği ekleyin:

# Stage 1: Build the Astro site
FROM node:18-alpine AS builder
WORKDIR /app

# Bağımlılıkları yükle
COPY package*.json ./
RUN npm install

# Kaynak kodunu kopyala
COPY . .

# Astro sitesini oluştur
RUN npm run build

# Stage 2: Serve the built site with a lightweight web server
FROM node:18-alpine AS runner
WORKDIR /app

# Gerekli bağımlılıkları yükle
RUN npm install -g serve

# Oluşturulan dosyaları kopyala
COPY --from=builder /app/dist ./dist

# Portu açıklama
EXPOSE 3000

# Web sunucusunu başlat
CMD ["serve", "-s", "dist", "-l", "3000"]

Dockerfile Açıklaması

Stage 1 (builder):
- Node.js 18 Alpine tabanlı bir imaj kullanıyoruz. Alpine, Docker imajlarının boyutunu minimize etmek için hafif bir Linux dağıtımıdır.
- WORKDIR /app komutu, konteyner içinde /app dizinini çalışma dizini olarak ayarlar.
- COPY package*.json ./ komutu, package.json ve package-lock.json dosyalarını kopyalar. Bu, bağımlılıkları yüklemek için gereklidir.
- RUN npm install komutu, bağımlılıkları yükler.
- COPY . . komutu, tüm kaynak kodunu konteyner içine kopyalar.
- RUN npm run build komutu, Astro sitesini oluşturur.
Stage 2 (runner):
- Yeniden Node.js 18 Alpine imajını kullanıyoruz, ancak bu kez sadece üretim için gerekli olanları yüklüyoruz.
- serve paketini global olarak yükleyerek, oluşturulan statik dosyaları sunmak için kullanıyoruz.
- --from=builder komutu, Stage 1’de oluşturulan dosyaları Stage 2’ye kopyalar.
- EXPOSE 3000 komutu, konteynerin 3000 numaralı portunu açıklamasını sağlar.
- CMD ["serve", "-s", "dist", "-l", "3000"] komutu, serve paketini başlatarak statik dosyaları sunar.

Adım 3: Dockerignore Dosyası Oluşturma

Docker imajını oluştururken, gereksiz dosyaların kopyalanmasını önlemek için .dockerignore dosyası oluşturmalısınız. Proje dizininde yeni bir dosya oluşturun ve aşağıdaki içeriği ekleyin:

node_modules
npm-debug.log
.git
.gitignore
.DS_Store
.env

Bu dosya, Docker’ın node_modules dizini, .git klasörü ve diğer gereksiz dosyaları kopyalamasını engeller.

Adım 4: Docker İmajını Oluşturma ve Çalıştırma

Artık Docker imajını oluşturabilir ve çalıştırabiliriz. Terminalde aşağıdaki komutları çalıştırın:

# Docker imajını oluştur
docker build -t my-astro-site .

# Docker konteynerini çalıştır
docker run -p 3000:3000 my-astro-site

Bu komutlar:

-t my-astro-site bayrağı, oluşturulan imaja my-astro-site adını verir.
-p 3000:3000 bayrağı, konteynerin 3000 numaralı portunu yerel makinenizin 3000 numaralı portuna bağlar.

Docker konteyneri başarıyla çalıştırıldıktan sonra, tarayıcınızda http://localhost:3000 adresini açarak Astro sitenizin yayınlandığını görebilirsiniz.

Adım 5: Docker Compose ile Yönetim Kolaylığı

Docker Compose, birden fazla konteynerin yönetimini kolaylaştıran bir araçtır. Proje dizininde docker-compose.yml adında yeni bir dosya oluşturun ve aşağıdaki içeriği ekleyin:

version: '3.8'

services:
  astro:
    build: .
    ports:
      - "3000:3000"
    restart: unless-stopped
    container_name: my-astro-site

Bu dosya, Docker Compose’un bir astro servisi oluşturmasını ve 3000 numaralı portu yerel makinenize bağlamasını sağlar. Konteynerin otomatik olarak yeniden başlatılmasını (restart: unless-stopped) ve belirli bir isimle adlandırılmasını (container_name) da ayarlıyoruz.

Docker Compose kullanarak konteyneri başlatmak için aşağıdaki komutu çalıştırın:

docker compose up -d

Konteyneri durdurmak için:

docker compose down

Adım 6: CI/CD Entegrasyonu (GitHub Actions)

Geliştirme sürecinizi otomatikleştirmek için CI/CD (Sürekli Entegrasyon/Sürekli Dağıtım) araçlarını kullanabilirsiniz. Bu bölümde, GitHub Actions kullanarak Docker imajını otomatik olarak oluşturup yayınlamayı öğreneceksiniz.

GitHub Repository Oluşturma

GitHub’da yeni bir repository oluşturun.
Yerel projenizi bu repository’ye bağlayın:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/kullanici-adiniz/my-astro-site.git
git push -u origin main

GitHub Actions Workflow Dosyası Oluşturma

Proje dizininde .github/workflows adında yeni bir dizin oluşturun. İçinde docker-build-push.yml adında yeni bir dosya oluşturun ve aşağıdaki içeriği ekleyin:

name: Docker Build and Push

on:
  push:
    branches: [ "main" ]

jobs:
  build-and-push:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Login to Docker Hub
        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKER_HUB_USERNAME }}
          password: ${{ secrets.DOCKER_HUB_TOKEN }}

      - name: Build and push Docker image
        uses: docker/build-push-action@v5
        with:
          context: .
          push: true
          tags: kullanici-adiniz/my-astro-site:latest

Workflow Dosyası Açıklaması

name: Workflow’un adı.
on: Workflow’un tetiklenme koşulları. Bu durumda, main branch’ine push yapıldığında tetiklenir.
jobs: Workflow’un yapacağı işlemler.
- build-and-push: Docker imajını oluşturup yayınlayan işlem.
  - runs-on: İşlemlerin hangi ortamda çalışacağını belirtir (bu durumda Ubuntu).
  - steps: Workflow’un adımları.
    - Checkout repository: Repository’deki kodları çeker.
    - Login to Docker Hub: Docker Hub’a giriş yapar. DOCKER_HUB_USERNAME ve DOCKER_HUB_TOKEN adında iki gizli değişken oluşturmanız gerekir.
    - Build and push Docker image: Docker imajını oluşturur ve Docker Hub’a yayınlar.

Gizli Değişkenleri Ayarlama

GitHub repository ayarlarından gizli değişkenleri ekleyin:

GitHub repository sayfasına gidin.
Settings > Secrets and variables > Actions yolunu izleyin.
New repository secret butonuna tıklayın ve aşağıdaki gizli değişkenleri ekleyin:
- DOCKER_HUB_USERNAME: Docker Hub kullanıcı adınız
- DOCKER_HUB_TOKEN: Docker Hub hesabınız için oluşturduğunuz bir access token

Access token oluşturmak için Docker Hub hesabınıza gidin ve New Access Token butonuna tıklayın.

Adım 7: Üretim Ortamında Yayınlama

Docker imajınızı Docker Hub’a yayınladıktan sonra, bu imajı üretim ortamında kullanabilirsiniz. Aşağıdaki adımları izleyerek imajı üretim sunucusunda çalıştırabilirsiniz:

Üretim Sunucusunda Docker Kurulumu

Üretim sunucusunda Docker Engine kurulu olduğundan emin olun. Kurulum için Docker Engine dokümantasyonunu takip edebilirsiniz.

Docker İmajını Çekme ve Çalıştırma

Üretim sunucusunda terminali açın ve aşağıdaki komutları çalıştırın:

# Docker Hub'dan imajı çek
docker pull kullanici-adiniz/my-astro-site:latest

# Konteyneri çalıştır
docker run -d -p 80:3000 --name my-astro-site kullanici-adiniz/my-astro-site:latest

Bu komutlar:

-d bayrağı, konteynerin arka planda çalışmasını sağlar.
-p 80:3000 bayrağı, konteynerin 3000 numaralı portunu sunucunun 80 numaralı portuna bağlar (HTTP trafiği için standart port).
--name bayrağı, konteynere bir isim verir.

Adım 8: Reverse Proxy ile Güvenlik ve Performans Optimizasyonu

Üretim ortamında, uygulamanızı doğrudan internete açmak yerine bir reverse proxy kullanmanız önerilir. Bu, güvenlik ve performans açısından birçok avantaj sağlar. Bu bölümde, Nginx kullanarak bir reverse proxy kurulumunu ele alacağız.

Nginx Kurulumu

Üretim sunucusunda Nginx kurulu olduğundan emin olun. Kurulum için aşağıdaki komutları çalıştırın:

# Ubuntu/Debian
sudo apt update
sudo apt install nginx -y

# CentOS/RHEL
sudo yum install epel-release -y
sudo yum install nginx -y

Nginx Konfigürasyon Dosyası Oluşturma

Nginx’in konfigürasyon dosyalarını /etc/nginx/sites-available/ dizininde oluşturabilirsiniz. Yeni bir dosya oluşturun:

sudo nano /etc/nginx/sites-available/my-astro-site

Aşağıdaki içeriği ekleyin:

server {
    listen 80;
    server_name example.com www.example.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Bu konfigürasyon:

example.com alan adına gelen tüm HTTP trafiğini Astro uygulamasının çalıştığı localhost:3000 adresine yönlendirir.
Proxy başlıklarını ayarlayarak, Astro uygulamasının gerçek IP adresini ve protokolünü algılamasını sağlar.

Nginx’i Etkinleştirme ve Yeniden Başlatma

Konfigürasyon dosyasını oluşturduktan sonra, Nginx’i etkinleştirmek ve yeniden başlatmak için aşağıdaki komutları çalıştırın:

# Simlink oluştur
sudo ln -s /etc/nginx/sites-available/my-astro-site /etc/nginx/sites-enabled/

# Nginx'i yeniden başlat
sudo systemctl restart nginx

SSL Sertifikası Ekleme (Opsiyonel)

Güvenlik için HTTPS kullanmanız önerilir. Bu bölümde, Let’s Encrypt kullanarak ücretsiz bir SSL sertifikası oluşturmayı ve Nginx’e eklemeyi öğreneceksiniz.

Certbot Kurulumu:

# Ubuntu/Debian
sudo apt install certbot python3-certbot-nginx -y

# CentOS/RHEL
sudo yum install certbot python3-certbot-nginx -y

SSL Sertifikası Oluşturma:

sudo certbot --nginx -d example.com -d www.example.com

Bu komut, Nginx için otomatik olarak bir SSL sertifikası oluşturur ve konfigürasyon dosyasına gerekli ayarları ekler.

Nginx’i Yeniden Başlatma:

sudo systemctl restart nginx

Artık siteniz https://example.com adresinden güvenli bir şekilde erişilebilir olacaktır.

Sonuç

Bu rehberde, Docker kullanarak Astro sitelerini nasıl yayınlayabileceğinizi ve ölçeklenebilir bir altyapı kurabileceğinizi öğrendiniz. Dockerfile oluşturma, multi-stage build kullanımı, Docker Compose ile yönetim kolaylığı, CI/CD entegrasyonu ve reverse proxy kurulumu gibi konuları detaylı olarak ele aldık.

Docker kullanmanın avantajları sayesinde, uygulamalarınızı herhangi bir sunucuda kolayca yayınlayabilir ve yönetebilirsiniz. Ayrıca, CI/CD araçlarıyla geliştirme sürecinizi otomatikleştirerek daha verimli bir şekilde çalışabilirsiniz.

Artık kendi Astro projelerinizi Docker konteynerleriyle yayınlamaya hazırsınız. İyi kodlamalar!

Kaynaklar

Sıkça Sorulan Sorular (SSS)

Docker kullanmadan Astro sitesini yayınlayabilir miyim?

Evet, Astro siteleri statik dosyalardan oluştuğu için herhangi bir web sunucusunda (Nginx, Apache vb.) yayınlanabilir. Ancak Docker kullanmanın avantajları arasında tutarlılık, kolay dağıtım ve kaynak verimliliği bulunmaktadır.

Docker imajını nasıl optimize edebilirim?

Docker imajını optimize etmek için aşağıdaki yöntemleri kullanabilirsiniz:

Multi-stage build kullanarak üretim imajını küçültün.
Gereksiz dosyaları .dockerignore dosyasına ekleyin.
Hafif taban imajları (örneğin Alpine) kullanın.
Katmanları minimize edin.

CI/CD entegrasyonu için başka hangi araçları kullanabilirim?

GitHub Actions dışında, CI/CD entegrasyonu için aşağıdaki araçları da kullanabilirsiniz:

GitLab CI/CD
Jenkins
CircleCI
Travis CI

Reverse proxy kullanmanın avantajları nelerdir?

Reverse proxy kullanmanın başlıca avantajları:

Güvenlik: Uygulamanızı doğrudan internete açmak yerine proxy arkasında saklayabilirsiniz.
Performans: Önbellekleme, yük dengeleme ve sıkıştırma gibi özellikleri kullanabilirsiniz.
SSL/TLS: Tüm trafiği SSL/TLS ile şifreleyebilirsiniz.
Yük Dengeleme: Birden fazla sunucu arasında trafiği dağıtabilirsiniz.

Docker konteynerini nasıl güncelleyebilirim?

Docker konteynerini güncellemek için aşağıdaki adımları izleyebilirsiniz:

Yeni Docker imajını oluşturun ve yayınlayın.
Üretim sunucusunda eski konteyneri durdurun:
```
docker stop my-astro-site
```

Yeni imajı çekin:

docker pull kullanici-adiniz/my-astro-site:latest

Yeni konteyneri başlatın:

docker run -d -p 80:3000 --name my-astro-site kullanici-adiniz/my-astro-site:latest

Eski konteyneri kaldırın:
```
docker rm my-astro-site
```

Bu rehberin size yardımcı olduğunu umuyoruz. Docker ve Astro hakkında daha fazla bilgi edinmek için resmi dokümantasyonları inceleyebilirsiniz. İyi kodlamalar!

Bu yazı Mistral ile otomatik oluşturulmuştur.