Next.js: المشروع النهائي: النشر و CI/CD

# سطر واحد من GitHub Actions يشغل النشر الآلي بالكامل
name: Deploy
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm run build
      - uses: amondnet/vercel-action@v20

إعداد JSON مع المفاتيح: framework ("nextjs")، buildCommand، outputDirectory، installCommand، regions (iad1/hkg1/gru1)، env، crons، headers (رؤوس الأمان + قواعد التخزين المؤقت)، و redirects.

{
  "framework": "nextjs",
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "installCommand": "npm install",
  "regions": ["iad1", "hkg1", "gru1"],
  "env": {
    "NEXT_PUBLIC_APP_URL": "https://taskflow.vercel.app"
  },
  "crons": [
    {
      "path": "/api/cron/daily-digest",
      "schedule": "0 8 * * *"
    }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        },
        {
          "key": "Referrer-Policy",
          "value": "strict-origin-when-cross-origin"
        }
      ]
    },
    {
      "source": "/uploads/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ],
  "redirects": [
    {
      "source": "/app",
      "destination": "/dashboard",
      "permanent": true
    }
  ]
}

تم تطبيق إعداد JSON بنجاح.

اكتمل الأمر.

# 1. تثبيت Vercel CLI
npm install -g vercel

# 2. تسجيل الدخول إلى Vercel
vercel login

# 3. ربط المشروع
vercel link

# 4. تعيين environment variables
vercel env add DATABASE_URL
vercel env add AUTH_SECRET
vercel env add GOOGLE_CLIENT_ID
vercel env add GOOGLE_CLIENT_SECRET
vercel env add AUTH_URL
vercel env add NEXT_PUBLIC_POSTHOG_KEY
vercel env add SENTRY_DSN

# 5. معاينة النشر
vercel

# 6. نشر production
vercel --prod

# 7. عرض سجل النشر
vercel logs

added 127 packages in 3.2s

38 packages are looking for funding
  run `npm fund` for details
Environment variable set.
Environment variable set.
Environment variable set.
Environment variable set.
Environment variable set.
Environment variable set.
Environment variable set.

Vercel CLI 28.0.0
? Set up and deploy "C:\Users\admin\taskflow"? [Y/n] Y
? Which scope? Acme Corp
? Link to existing project? No
? What's your project's name? taskflow
? In which directory is your code? ./
Auto-detected Project Settings (Next.js):
- Build Command: npx next build
- Output Directory: .next
- Node.js Version: 20.x
✅ Production: https://taskflow.vercel.app [7s]

# 1. إنشاء قاعدة بيانات Postgres
vercel env add DATABASE_URL

# 2. تثبيت Vercel Postgres SDK
npm install @vercel/postgres

# 3. تحديث مصدر بيانات Prisma

// prisma/schema.prisma
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
  // Vercel Postgres — إدارة تلقائية لتجمع الاتصالات
  // على Vercel، قم بتمكين shadowDatabaseUrl لتجنب تعارضات الترحيل
}

Prisma schema updated. Run npx prisma generate to sync client.

// src/lib/db.ts
import { PrismaClient } from "@prisma/client"

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined
}

export const prisma = globalForPrisma.prisma ?? new PrismaClient()

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma

Sending build context to Docker daemon  4.096kB
Step 1/8 : FROM node:20-alpine AS deps
 ---> 1dd67de0f936
...
Successfully built a7b3c2d1e0f9
Successfully tagged taskflow:latest

# ============================================
# المرحلة 1: التبعيات
# ============================================
FROM node:20-alpine AS deps
RUN apk add --no-cache libc6-compat

WORKDIR /app

COPY package.json package-lock.json ./
RUN npm ci --only=production --ignore-scripts
RUN npm ci --only=development --ignore-scripts

# ============================================
# المرحلة 2: البناء
# ============================================
FROM node:20-alpine AS builder
WORKDIR /app

COPY --from=deps /app/node_modules ./node_modules
COPY . .

ENV NEXT_TELEMETRY_DISABLED=1
ENV NODE_ENV=production
ENV NEXT_OUTPUT=standalone

RUN npx prisma generate
RUN npm run build

# ============================================
# المرحلة 3: تشغيل production
# ============================================
FROM node:20-alpine AS runner
WORKDIR /app

ENV NODE_ENV=production
ENV NEXT_TELEMETRY_DISABLED=1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
COPY --from=builder /app/prisma ./prisma
COPY --from=builder /app/node_modules/.prisma ./node_modules/.prisma

USER nextjs

EXPOSE 3000

ENV PORT=3000
ENV HOSTNAME="0.0.0.0"

CMD ["node", "server.js"]

Sending build context to Docker daemon  4.096kB
Step 1/8 : FROM node:20-alpine AS deps
 ---> 1dd67de0f936
...
Successfully built a7b3c2d1e0f9
Successfully tagged taskflow:latest

احفظ إعداد YAML أعلاه في مسار الملف المحدد. ستدخل الإعدادات حيز التنفيذ عند إعادة تشغيل الخادم التالية.

version: "3.8"

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    environment:
      - DATABASE_URL=postgresql://taskflow:password@db:5432/taskflow
      - AUTH_SECRET=${AUTH_SECRET}
      - AUTH_URL=https://taskflow.example.com
      - GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}
      - GOOGLE_CLIENT_SECRET=${GOOGLE_CLIENT_SECRET}
      - NEXTAUTH_URL=https://taskflow.example.com
      - NODE_ENV=production
    depends_on:
      db:
        condition: service_healthy
    restart: unless-stopped
    networks:
      - taskflow-network
    healthcheck:
      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:3000/api/health"]
      interval: 30s
      timeout: 10s
      retries: 3

  db:
    image: postgres:16-alpine
    volumes:
      - postgres-data:/var/lib/postgresql/data
    environment:
      - POSTGRES_DB=taskflow
      - POSTGRES_USER=taskflow
      - POSTGRES_PASSWORD=${DB_PASSWORD}
    ports:
      - "5432:5432"
    restart: unless-stopped
    networks:
      - taskflow-network
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U taskflow"]
      interval: 10s
      timeout: 5s
      retries: 5

  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf:ro
      - ./ssl:/etc/nginx/ssl:ro
    depends_on:
      - app
    restart: unless-stopped
    networks:
      - taskflow-network

volumes:
  postgres-data:

networks:
  taskflow-network:
    driver: bridge

أقسام الإعداد: version، services، volumes، networks.

الأقسام: version، services، volumes، networks.

# nginx.conf
events {
  worker_connections 1024;
}

http {
  upstream taskflow_app {
    server app:3000;
  }

  server {
    listen 80;
    server_name taskflow.example.com;
    return 301 https://$server_name$request_uri;
  }

  server {
    listen 443 ssl http2;
    server_name taskflow.example.com;

    ssl_certificate /etc/nginx/ssl/cert.pem;
    ssl_certificate_key /etc/nginx/ssl/key.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    # رؤوس الأمان
    add_header X-Frame-Options "DENY" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;

    # ضغط Gzip
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript image/svg+xml;
    gzip_min_length 1000;
    gzip_comp_level 6;

    # الموارد الثابتة (تخزين مؤقت دائم)
    location /_next/static {
      proxy_pass http://taskflow_app;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      expires 365d;
      add_header Cache-Control "public, immutable";
    }

    # المرفوعات
    location /uploads {
      proxy_pass http://taskflow_app;
      proxy_set_header Host $host;
      expires 30d;
      add_header Cache-Control "public, immutable";
    }

    # مسارات API (بدون تخزين مؤقت)
    location /api {
      proxy_pass http://taskflow_app;
      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;
      proxy_no_cache 1;
      proxy_cache_bypass 1;
    }

    # كل شيء آخر
    location / {
      proxy_pass http://taskflow_app;
      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;

      # دعم WebSocket
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
    }
  }
}

تم تطبيق إعداد Nginx. أعد التحميل للتفعيل.

# ============================================
# عملية نشر TaskFlow الكاملة في production
# ============================================

# --- الخطة أ: نشر Vercel ---

# 1. فحوصات ما قبل البناء
npm run lint && npx tsc --noEmit && npm run test -- --run

# 2. البناء والتحقق
npm run build
# المخرجات: ✓ Compiled successfully in 12.8s

# 3. معاينة النشر
vercel
# المخرجات: https://taskflow-git-feature-abc123.vercel.app

# 4. تشغيل اختبار E2E
npx playwright test --url=https://taskflow-git-feature-abc123.vercel.app

# 5. فحص Lighthouse
npx lhci autorun

# 6. نشر production
vercel --prod
# المخرجات: https://taskflow.vercel.app (Production)

# 7. إعداد نطاق مخصص
vercel domains add taskflow.example.com
# المخرجات: ✓ Domain taskflow.example.com added

# 8. التحقق
curl -I https://taskflow.example.com/api/health
# المخرجات: HTTP/2 200

# --- الخطة ب: Docker للنشر الذاتي ---

# 1. بناء صورة Docker
docker build -t taskflow:latest .

# 2. بدء الخدمة
docker compose up -d

# 3. تشغيل ترحيل قاعدة البيانات
docker compose exec app npx prisma migrate deploy

# 4. تشغيل البيانات الأولية
docker compose exec app npx prisma db seed

# 5. التحقق
curl http://localhost/api/health
# المخرجات: {"status":"healthy","timestamp":"2026-07-06T10:00:00Z"}

# 6. عرض السجلات
docker compose logs -f app

# 7. مقاييس المراقبة
# - PostHog: https://app.posthog.com/project/taskflow
# - Sentry: https://sentry.io/organizations/acme/projects/taskflow
# - Vercel Dashboard: https://vercel.com/acme/taskflow

# --- التحقق من الأداء ---

# تقرير Lighthouse
# Performance: 94/100 ✅
# Accessibility: 97/100 ✅
# Best Practices: 93/100 ✅
# SEO: 100/100 ✅

# Core Web Vitals (RUM)
# LCP: 1.2s ✅ (الهدف < 2.5s)
# FID: 12ms ✅ (الهدف < 100ms)
# CLS: 0.02 ✅ (الهدف < 0.1)