النشر والاستضافة

الدرس 18 من 18

0% مكتمل

الفصل الخامس: متقدم

النشر والاستضافة للإنتاج

تعلم كيفية نشر تطبيق Node.js على أشهر منصات الاستضافة السحابية

مقدمة في النشر

بعد تطوير تطبيقك، حان الوقت لنشره للعالم! سنتعلم كيفية نشر تطبيقات Node.js على ثلاث من أشهر المنصات السحابية المجانية.

قبل البدء

تأكد من:

  • أن لديك حساب GitHub وتطبيقك محفوظ في repository
  • وجود ملف package.json بالإعدادات الصحيحة
  • تعيين متغير البيئة PORT بشكل ديناميكي
  • وجود ملف .gitignore يتجاهل node_modules

النشر على Cloudflare Pages

Cloudflare Pages منصة رائعة للتطبيقات الأمامية والـ Full-stack مع Cloudflare Workers.

المتطلبات الأولية:

  1. حساب مجاني على Cloudflare Pages
  2. تطبيقك على GitHub أو GitLab
  3. Wrangler CLI (أداة سطر أوامر Cloudflare)

الطريقة الأولى: من خلال Dashboard

  1. اذهب إلى Cloudflare Dashboard
  2. اختر Pages من القائمة الجانبية
  3. انقر على Create a project
  4. اربط حساب GitHub/GitLab
  5. اختر repository الخاص بك
  6. حدد إعدادات البناء:
Build Settings
Framework preset: None
Build command: pnpm install && pnpm build
Build output directory: dist

الطريقة الثانية: باستخدام Wrangler CLI

الخطوة 1: تثبيت Wrangler

Terminal
# تثبيت Wrangler عالمياً
pnpm add -g wrangler

# التحقق من التثبيت
wrangler --version

الخطوة 2: تسجيل الدخول

Terminal
# تسجيل الدخول لحساب Cloudflare
wrangler login

# سيفتح المتصفح للمصادقة

الخطوة 3: إنشاء ملف wrangler.toml

wrangler.toml
name = "my-nodejs-app"
main = "src/index.js"
compatibility_date = "2024-01-01"

[build]
command = "pnpm install && pnpm build"

[env.production]
vars = { NODE_ENV = "production" }

الخطوة 4: النشر

Terminal
# نشر التطبيق
wrangler publish

# أو للبيئة الإنتاجية
wrangler publish --env production

مميزات Cloudflare Pages

  • نشر تلقائي عند كل push لـ GitHub
  • CDN عالمي سريع جداً
  • دعم مجاني للدومينات المخصصة
  • SSL/HTTPS تلقائي
  • حماية DDoS مجانية

النشر على Netlify

Netlify منصة شهيرة جداً لنشر تطبيقات الويب والـ Serverless Functions.

الطريقة الأولى: من خلال Dashboard

  1. سجل في Netlify
  2. انقر على Add new siteImport an existing project
  3. اربط GitHub/GitLab/Bitbucket
  4. اختر repository
  5. حدد إعدادات البناء
  6. انقر Deploy site

الطريقة الثانية: باستخدام Netlify CLI

الخطوة 1: تثبيت Netlify CLI

Terminal
# تثبيت Netlify CLI
pnpm add -g netlify-cli

# أو
pnpm dlx netlify-cli

# التحقق من التثبيت
netlify --version

الخطوة 2: تسجيل الدخول

Terminal
# تسجيل الدخول
netlify login

# سيفتح المتصفح للمصادقة

الخطوة 3: تهيئة المشروع

Terminal
# في مجلد المشروع
cd my-nodejs-app

# تهيئة Netlify
netlify init

# اتبع التعليمات التفاعلية:
# - Create & configure a new site
# - اختر team
# - أدخل اسم الموقع (أو اتركه فارغاً لتوليد تلقائي)
# - Build command: pnpm build
# - Publish directory: dist

الخطوة 4: إنشاء ملف netlify.toml

netlify.toml
[build]
  command = "pnpm install && pnpm build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "20"

[[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/:splat"
  status = 200

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

الخطوة 5: النشر

Terminal
# نشر للإنتاج
netlify deploy --prod

# أو نشر للمعاينة أولاً
netlify deploy

# ثم إذا كان جيداً، انشر للإنتاج
netlify deploy --prod

إنشاء Serverless Functions على Netlify

أنشئ مجلد netlify/functions في مشروعك:

netlify/functions/hello.js
// netlify/functions/hello.js
exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({
      message: 'مرحباً من Netlify Function!',
      timestamp: new Date().toISOString()
    })
  };
};

// الوصول: https://your-site.netlify.app/.netlify/functions/hello

مميزات Netlify

  • نشر تلقائي من Git
  • Serverless Functions مدمجة
  • نماذج معالجة (Form handling)
  • Split testing (A/B testing)
  • دعم رائع للـ SPA و SSR

النشر على Render

Render منصة حديثة وقوية، مثالية لتطبيقات Node.js الكاملة مع قواعد البيانات.

الطريقة الأولى: من خلال Dashboard

  1. سجل في Render
  2. انقر على New +Web Service
  3. اربط GitHub/GitLab
  4. اختر repository
  5. املأ البيانات:
Render Settings
Name: my-nodejs-app
Environment: Node
Build Command: pnpm install && pnpm build
Start Command: pnpm start
Plan: Free

انقر Create Web Service وانتظر النشر!

الطريقة الثانية: باستخدام render.yaml

أنشئ ملف render.yaml في جذر المشروع:

render.yaml
services:
  - type: web
    name: my-nodejs-app
    env: node
    plan: free
    buildCommand: pnpm install && pnpm build
    startCommand: pnpm start
    envVars:
      - key: NODE_ENV
        value: production
      - key: PORT
        value: 10000
    healthCheckPath: /health

databases:
  - name: mydb
    plan: free
    databaseName: myapp_db
    user: myapp_user

ثم في Dashboard، اختر New +Blueprint وسيكتشف ملف render.yaml تلقائياً!

إضافة قاعدة بيانات PostgreSQL

الخطوة 1: إنشاء قاعدة البيانات

  1. في Dashboard، انقر New +PostgreSQL
  2. اختر Free plan
  3. أدخل اسم قاعدة البيانات
  4. انقر Create Database

الخطوة 2: ربطها بتطبيقك

  1. انسخ Internal Database URL
  2. اذهب لإعدادات Web Service
  3. أضف متغير بيئة:
Environment Variable
Key: DATABASE_URL
Value: [الصق Internal Database URL]

الخطوة 3: استخدمها في الكود

server.js
const { Pool } = require('pg');

const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
  ssl: {
    rejectUnauthorized: false
  }
});

// استخدام قاعدة البيانات
app.get('/users', async (req, res) => {
  const result = await pool.query('SELECT * FROM users');
  res.json(result.rows);
});

مميزات Render

  • دعم كامل لتطبيقات Node.js
  • قواعد بيانات PostgreSQL مجانية
  • Redis مدمج
  • Cron Jobs مجانية
  • نشر تلقائي من Git
  • SSL مجاني

إعدادات مهمة للإنتاج

1. ملف package.json الصحيح

package.json
{
  "name": "my-nodejs-app",
  "version": "1.0.0",
  "engines": {
    "node": ">=20.0.0"
  },
  "scripts": {
    "start": "node src/index.js",
    "dev": "nodemon src/index.js",
    "build": "echo 'Build successful'",
    "test": "jest"
  },
  "dependencies": {
    "express": "^4.18.2",
    "dotenv": "^16.3.1"
  }
}

2. إعداد PORT الديناميكي

server.js
const express = require('express');
const app = express();

// استخدام PORT من البيئة أو 3000 كافتراضي
const PORT = process.env.PORT || 3000;

app.get('/', (req, res) => {
  res.json({ message: 'Server is running!' });
});

// مهم: استمع على 0.0.0.0
app.listen(PORT, '0.0.0.0', () => {
  console.log(`Server running on port ${PORT}`);
});

3. ملف .gitignore

.gitignore
node_modules/
.env
.env.local
.env.production
dist/
build/
.DS_Store
npm-debug.log
yarn-error.log
pnpm-debug.log

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

.env.example
# أنشئ ملف .env.example كمثال
NODE_ENV=production
PORT=3000
DATABASE_URL=your_database_url
JWT_SECRET=your_secret_key
API_KEY=your_api_key

# في المنصة، أضف القيم الحقيقية

مقارنة المنصات

الميزة Cloudflare Netlify Render
الخطة المجانية ممتازة جيدة جداً جيدة
سهولة الاستخدام متوسطة سهلة جداً سهلة
Node.js الكامل Workers فقط Functions محدودة دعم كامل ✓
قاعدة بيانات D1, KV لا PostgreSQL ✓
السرعة ممتازة جداً ممتازة جيدة
الأفضل لـ JAMstack, Edge Static Sites, SPA Full-stack Apps

نصائح إنتاجية

1. الأمان

  • استخدم HTTPS دائماً (تلقائي في هذه المنصات)
  • لا ترفع ملف .env لـ Git
  • استخدم Helmet.js لتأمين Express
  • فعّل CORS بشكل صحيح
  • حدث التبعيات بانتظام

2. الأداء

  • استخدم Compression middleware
  • فعّل الـ Caching حيثما أمكن
  • قلل حجم node_modules بإزالة التبعيات غير المستخدمة
  • استخدم CDN للملفات الثابتة

3. المراقبة

  • راقب logs التطبيق بانتظام
  • استخدم أدوات مراقبة مثل Sentry
  • فعّل التنبيهات للأخطاء
  • راقب استهلاك الموارد

الخلاصة

  • Cloudflare Pages: الأفضل للسرعة والـ Edge Computing
  • Netlify: الأسهل للمواقع الثابتة والـ JAMstack
  • Render: الأفضل لتطبيقات Node.js الكاملة مع قواعد بيانات
  • جميعها توفر خطط مجانية ممتازة للبدء
  • استخدم pnpm بدلاً من npm للسرعة والكفاءة
  • لا تنسَ إعداد متغيرات البيئة بشكل صحيح