نشر موقع على Vercel — نشر المواقع والدومينات

نشر موقع على Vercel

Vercel هي أفضل منصة لنشر مواقع الـ Frontend - مجانية وسريعة.

لماذا Vercel؟

✅ مجاني للمشاريع الشخصية

✅ سريع جداً (Edge Network)

✅ HTTPS تلقائي

✅ دعم ممتاز لـ Next.js, React, Vue

✅ Preview للـ Pull Requests

✅ Serverless Functions

✅ Analytics مدمج

الطريقة 1: من GitHub (الأسهل)

الخطوات:

1. ارفع مشروعك على GitHub

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/user/repo.git
git push -u origin main

2. اذهب لـ vercel.com

- سجل دخول بـ GitHub

- اضغط "New Project"

- اختر الـ Repository

- اضغط "Deploy"

3. انتظر دقيقة... موقعك جاهز! 🎉

الطريقة 2: Vercel CLI

التثبيت

npm install -g vercel

الاستخدام

# في مجلد المشروع
vercel

# سيسألك:
# ? Set up and deploy? [Y/n] y
# ? Which scope? your-username
# ? Link to existing project? [y/N] n
# ? Project name? my-project
# ? Directory? ./
# ? Override settings? [y/N] n

# 🎉 جاهز!
# https://my-project.vercel.app

أوامر مفيدة

vercel             # نشر preview
vercel --prod      # نشر production
vercel ls          # قائمة المشاريع
vercel logs        # سجلات
vercel env add     # إضافة متغيرات بيئة

ربط دومين مخصص

1. في لوحة Vercel → Settings → Domains

2. أضف الدومين: example.com

3. أضف DNS Records في مسجل الدومين:

Type: A
Name: @
Value: 76.76.21.21

Type: CNAME
Name: www
Value: cname.vercel-dns.com

4. انتظر 5-30 دقيقة

إعدادات vercel.json

{
  "version": 2,
  "name": "my-project",
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/$1"
    }
  ],
  "env": {
    "API_URL": "@api-url"
  },
  "regions": ["iad1"],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        }
      ]
    }
  ]
}

متغيرات البيئة

من الواجهة

Settings → Environment Variables

من CLI

vercel env add SECRET_KEY
# أدخل القيمة
# اختر البيئات (Production, Preview, Development)

في الكود

// متاح تلقائياً
const apiKey = process.env.API_KEY;

Serverless Functions

// api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello World!' });
}

// الوصول: /api/hello

نصائح

1. استخدم .vercelignore لتجاهل الملفات

2. فعّل Preview Comments للتعاون

3. راقب Analytics لأداء الموقع

4. استخدم Edge Functions للسرعة

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "installCommand": "npm install",
  "rewrites": [
    { "source": "/((?!api/).*)", "destination": "/index.html" }
  ],
  "redirects": [
    { "source": "/old-page", "destination": "/new-page", "permanent": true }
  ],
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }]
    }
  ]
}