كيفية نشر تطبيق ويب على الإنترنت

كيفية نشر تطبيق ويب على الإنترنت

نشر تطبيق الويب على الإنترنت هو الخطوة الأخيرة والأهم في رحلة تطوير الويب. من جهازك المحلي إلى خادم حي يمكن للعالم الوصول إليه. هذا الدليل الشامل سيساعدك على نشر موقعك بسهولة وأمان.

ما هو نشر التطبيق؟

نشر التطبيق (Deployment) هو عملية نقل تطبيقك من بيئة التطوير المحلية إلى خادم حي على الإنترنت، مما يجعله متاحاً للمستخدمين في جميع أنحاء العالم.

خيارات الاستضافة:

أشهر منصات النشر:

# نشر بسيط
npm run build
# ارفع مجلد dist إلى Netlify

# نشر مع Vercel CLI
npm i -g vercel
vercel --prod

# إعداد GitHub Pages
# Settings → Pages → Source: Deploy from branch

# نشر مع Heroku CLI
heroku create my-app
git push heroku main

خطوات النشر الأساسية:

# إنشاء ملف .env للبيئة الإنتاجية
NODE_ENV=production
DATABASE_URL=your_production_db_url
API_KEY=your_production_api_key

# تحديث package.json
{
  "scripts": {
    "build": "webpack --mode production",
    "start": "node server.js"
  }
}

# بناء المشروع للإنتاج
npm run build

# أو مع Webpack
webpack --mode production

# أو مع Vite
npm run build

# أو مع Create React App
npm run build

النشر باستخدام Git:

# على الخادم
mkdir /var/www/my-app
cd /var/www/my-app
git init
git remote add origin https://github.com/username/my-app.git

# سحب التحديثات
git pull origin main

# تثبيت التبعيات
npm install

# بناء المشروع
npm run build

# تشغيل التطبيق
npm start

// webhook.js
const express = require('express');
const { exec } = require('child_process');

app.post('/webhook', (req, res) => {
  exec('git pull origin main && npm install && npm run build', (error, stdout, stderr) => {
    if (error) {
      console.error('خطأ في النشر:', error);
      return res.status(500).send('خطأ في النشر');
    }
    console.log('تم النشر بنجاح');
    res.send('تم النشر بنجاح');
  });
});

النشر باستخدام Docker:

# Dockerfile
FROM node:18-alpine

# تعيين مجلد العمل
WORKDIR /app

# نسخ package.json
COPY package*.json ./

# تثبيت التبعيات
RUN npm ci --only=production

# نسخ الكود
COPY . .

# بناء التطبيق
RUN npm run build

# تعيين المنفذ
EXPOSE 3000

# تشغيل التطبيق
CMD ["npm", "start"]

version: '3.8'
services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
    depends_on:
      - db

  db:
    image: postgres:13
    environment:
      - POSTGRES_DB=myapp
      - POSTGRES_USER=user
      - POSTGRES_PASSWORD=password
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:

النشر على AWS:

# الاتصال بالخادم
ssh -i "my-key.pem" ubuntu@your-ec2-ip

# تحديث النظام
sudo apt update && sudo apt upgrade -y

# تثبيت Node.js
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

# تثبيت PM2 لإدارة العمليات
sudo npm install -g pm2

# تشغيل التطبيق
pm2 start app.js
pm2 startup
pm2 save

# تثبيت AWS CLI
pip install awscli

# إعداد AWS
aws configure

# رفع الملفات
aws s3 sync dist/ s3://my-bucket-name --delete

# تفعيل Website hosting
aws s3 website s3://my-bucket-name --index-document index.html

النشر على DigitalOcean:

# إنشاء Droplet جديد
# اختيار Ubuntu 20.04
# اختيار خطة مناسبة

# الاتصال بالخادم
ssh root@your-droplet-ip

# إعداد Nginx
sudo apt update
sudo apt install nginx -y

# إعداد SSL مع Let's Encrypt
sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d yourdomain.com

# /etc/nginx/sites-available/my-app
server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

أفضل الممارسات للنشر:

• 🔒 استخدم HTTPS دائماً
• 🔄 أعد تشغيل الخادم بعد النشر
• 📊 راقب الأداء والاستخدام
• 💾 احتفظ بنسخ احتياطية
• 🔧 استخدم متغيرات البيئة
• 📝 وثق عملية النشر
• 🧪 اختبر في بيئة مشابهة للإنتاج
• ⚡ استخدم CDN للموارد الثابتة

أدوات مفيدة للنشر:

استكشاف الأخطاء:

• تحقق من logs التطبيق
• تأكد من أن المنفذ مفتوح
• تحقق من متغيرات البيئة
• تأكد من أن قاعدة البيانات متاحة
• تحقق من إعدادات Firewall
• راجع إعدادات Nginx/Apache

النشر هو الخطوة الأخيرة لرؤية مشروعك على الإنترنت. ابدأ بنشر موقعك اليوم!