نشر تطبيق TypeScript على VPS: دليل خطوة بخطوة

مدرب بايثون أونلاين للمبتدئين

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

ابدأ الدورة

مقدمة: لماذا نشر تطبيق TypeScript على VPS هو الخيار الصحيح

أصبح التطوير باستخدام TypeScript معيارًا صناعيًا بفضل الكتابة الصارمة (strict typing) وتحسين قابلية قراءة الكود. ومع ذلك، بعد الانتهاء من التطوير، يبرز سؤال رئيسي: كيف تنشر التطبيق بشكل صحيح على خادم الإنتاج (production server)؟ نشر تطبيق TypeScript على VPS (خادم افتراضي خاص) ليس مجرد نسخ للملفات. إنها عملية تشمل ترجمة TypeScript إلى JavaScript، وإعداد البيئة، وإدارة العمليات، وضمان الأمان.

في هذه المقالة، سنشرح خوارزمية خطوة بخطوة لنشر تطبيق TypeScript على VPS. ستتعلم كيفية تجهيز الخادم، وإعداد البناء (build)، وتشغيل التطبيق باستخدام مدير العمليات PM2، وضمان توفره عبر Nginx. المادة موجهة للمطورين الذين لديهم بالفعل تطبيق أساسي على TypeScript (مثل Express.js أو NestJS) ويريدون نشره على خادم بعيد.



الخطوة 1: تجهيز VPS وتثبيت البرامج اللازمة

المرحلة الأولى لنشر تطبيق TypeScript على VPS هي إعداد الخادم نفسه. سنستخدم Ubuntu 22.04 LTS باعتبارها نظام التشغيل الأكثر استقرارًا وشعبية لخوادم الويب.

بعد الاتصال بالخادم عبر SSH، قم بتنفيذ الأوامر التالية:

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

# تثبيت Node.js (الإصدار 18 أو أحدث)curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -sudo apt install -y nodejs

# التحقق من الإصداراتnode -vnpm -v

# تثبيت Gitsudo apt install git -y

# تثبيت مدير العمليات PM2npm install -g pm2

ملاحظة: لا حاجة لتثبيت TypeScript بشكل عام (globally) على الخادم. سيتم استخدامه فقط في مرحلة بناء المشروع، والتي يمكن تنفيذها إما على الجهاز المحلي أو على الخادم عبر نصوص CI/CD.

يوصى أيضًا بإعداد جدار حماية أساسي (firewall):

sudo ufw allow OpenSSHsudo ufw allow 'Nginx Full'sudo ufw enable


الخطوة 2: استنساخ المشروع وبناء TypeScript

الآن بعد أن أصبح الخادم جاهزًا، سننقل كود تطبيق TypeScript. الطريقة الأكثر شيوعًا هي استنساخ المستودع عبر Git.

# استنساخ المستودعgit clone https://github.com/your-username/your-project.gitcd your-project

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

# ترجمة TypeScript إلى JavaScriptnpx tsc

نقطة مهمة: تأكد من أن ملف tsconfig.json يحدد بشكل صحيح مجلد الإخراج. عادةً ما يكون dist أو build:

{  "compilerOptions": {    "target": "ES2020",    "module": "commonjs",    "outDir": "./dist",    "rootDir": "./src",    "strict": true,    "esModuleInterop": true  },  "include": ["src/**/*"],  "exclude": ["node_modules", "dist"]}

بعد الترجمة الناجحة، سيظهر كود JavaScript في مجلد dist جاهزًا للتشغيل. تحقق من أن التطبيق يعمل بشكل صحيح:

node dist/index.js


الخطوة 3: التشغيل عبر PM2 وإعداد التشغيل التلقائي

التشغيل البسيط عبر node غير مناسب للإنتاج (production) — عند انقطاع اتصال SSH، ستتوقف العملية. لنشر تطبيق TypeScript على VPS، نستخدم PM2 الذي يوفر:

  • إعادة التشغيل التلقائي بعد التعطل
  • تسجيل الأخطاء (logging) و stdout
  • التجميع (clustering) — التشغيل على عدة أنوية CPU

أنشئ ملف ecosystem.config.js في جذر المشروع:

module.exports = {  apps: [{    name: 'my-ts-app',    script: './dist/index.js',    instances: 'max',    exec_mode: 'cluster',    env: {      NODE_ENV: 'production',      PORT: 3000    },    error_file: './logs/err.log',    out_file: './logs/out.log',    merge_logs: true  }]};

شغّل التطبيق عبر PM2:

pm2 start ecosystem.config.jspm2 savepm2                

المدونات

توصيات الكتب