Vue Academy · Ders

Tam Yığın Vue'yu Üretime Dağıtma

Vue + Fastify için Docker Compose, nginx ters vekil sunucusu, Let's Encrypt ile SSL ve CI/CD.

4. ders / 413 adım

Tam Yığın Vue'yu Üretime Dağıtma, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Üretim Topolojisi

Üretimde tam yığın bir Vue + Fastify app'i genellikle iki kapsayıcı olarak çalışır: derlenmiş Vue statik dosyalarını sunan bir nginx kapsayıcısı ve bir Fastify API kapsayıcısı. nginx ayrıca /api isteklerini API'ye ters vekil sunucusu olarak yönlendirir.

Vue App'i Derleme

SPA'yı Vite ile derleyerek dist içinde eniyileştirilmiş statik varlıklar oluşturun. nginx'in sunacağı içerik budur.

# package.json script
npm run build
# produces dist/ with hashed JS/CSS and index.html

Vue Dockerfile'ı (çok aşamalı)

Çok aşamalı bir Docker derlemesi kullanın: Node ile derleyin, ardından statik çıktıyı küçük bir nginx imajına kopyalayın. Son imaj yalnızca statik dosyaları ve nginx'i içerir.

FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

nginx.conf: SPA + API Vekil Sunucusu

nginx yapılandırması SPA'yı sunar (try_files ile istemci yönlendirmesi için index.html'e geri dönüş sağlar) ve /api isteklerini hizmet adı üzerinden Fastify kapsayıcısına yönlendirir.

server {
  listen 80;
  root /usr/share/nginx/html;

  location / {
    try_files $uri $uri/ /index.html;
  }

  location /api/ {
    proxy_pass http://fastify-api:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

Fastify Dockerfile'ı

API imajı üretim bağımlılıklarını kurar ve sunucuyu çalıştırır. Diğer kapsayıcılardan erişilebilmesi için 0.0.0.0'a bağlayın.

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --omit=dev
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

docker-compose.yml

docker-compose iki hizmeti paylaşılan bir ağ üzerinde birbirine bağlar. nginx.conf içindeki fastify-api vekil hedefi, burada belirtilen hizmet adıyla eşleşir.

services:
  vue-nginx:
    build: ./frontend
    ports:
      - '80:80'
      - '443:443'
    depends_on:
      - fastify-api
  fastify-api:
    build: ./backend
    environment:
      - JWT_SECRET=${JWT_SECRET}
    expose:
      - '3000'

Ada Göre Hizmet Keşfi

Compose ağı içinde kapsayıcılar birbirlerine hizmet adlarıyla ulaşır. nginx, http://fastify-api:3000 adresine vekil sunucusu olarak yönlendirir; IP adreslerine gerek yoktur ve API bağlantı noktası herkese açılmaz.

# only nginx is published to the host (80/443)
# fastify-api uses 'expose', reachable only internally

Certbot ile SSL

Certbot aracılığıyla Let's Encrypt kullanarak HTTPS ekleyin. Sertifikaları nginx'e bağlayın ve HTTP'yi HTTPS'ye yönlendiren bir 443 sunucu bloğu yapılandırın.

server {
  listen 443 ssl;
  ssl_certificate /etc/letsencrypt/live/app.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/app.com/privkey.pem;
  # ... same location blocks as before
}
server {
  listen 80;
  return 301 https://$host$request_uri;
}

Certbot Sertifikalarını Yenileme

Certbot sertifikaları 90 gün geçerlidir. Bir zamanlama üzerinden (cron veya yan hizmet kapsayıcısı kullanarak) yenileme komutunu çalıştırın ve yenilenen sertifikaların etkili olması için nginx'i yeniden yükleyin.

# cron entry, twice daily
certbot renew --quiet && nginx -s reload

GitHub Actions ile CI/CD

GitHub Actions ile derleme ve dağıtımı otomatikleştirin: main dalına yapılan push sonrasında derleyip sınayın, ardından imajları derleyip gönderin veya SSH ile sunucuya bağlanarak imajları çekin ve compose ile yeniden başlatın.

name: deploy
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm test
      - name: Deploy over SSH
        run: ssh $HOST 'cd /app && git pull && docker compose up -d --build'

Gizli Anahtarlar ve Ortam

Gizli anahtarları asla imajların içine gömmeyin. Bunları GitHub Actions gizli anahtarlarından alınan ortam değişkenleriyle (compose environment / env_file) aktarın. JWT_SECRET, veritabanı URL'leri ve benzeri değerleri depodan uzak tutun.

Hızlı Kontrol

Tam yığın dağıtımla ilgili anlayışınızı sınayın.

İnteraktif derste cevapla

Özet

Üretim dağıtımını öğrendiniz:

İki hizmet: vue-nginx (statik içerik) ve fastify-api
nginx.conf SPA'yı sunar ve /api isteklerini API hizmet adına yönlendirir
docker-compose bu hizmetleri birbirine bağlar; ana makineye yalnızca nginx yayımlanır
Zamanlanmış yenilemeyle Certbot üzerinden HTTPS
GitHub Actions derler, sınar ve dağıtır; gizli anahtarlar ortam değişkenlerinde kalır

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 42
Dersler: 156

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Tam Yığın Vue'yu Üretime Dağıtma” dersi ücretsiz mi?

Evet — “Tam Yığın Vue'yu Üretime Dağıtma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Tam Yığın Vue'yu Üretime Dağıtma” dersinde ne öğreneceğim?

Vue + Fastify için Docker Compose, nginx ters vekil sunucusu, Let's Encrypt ile SSL ve CI/CD. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Tam Yığın Vue'yu Üretime Dağıtma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Vue SPA'leri için Fastify Arka Ucu
JWT Kimlik Doğrulaması: Oturum Açma ve Yenileme
Axios Arakatmanlarıyla Kimliği Doğrulanmış API Çağrıları
Tam Yığın Vue'yu Üretime Dağıtma

← Vue Academy Sayfasına Dön