نشر تطبيق TypeScript على VPS: دليل خطوة بخطوة من الألف إلى الياء

مقدمة: لماذا VPS هو المكان المثالي لمشروع TypeScript الخاص بك؟

لقد كتبت تطبيقًا رائعًا باستخدام TypeScript - سواء كان خادم Express، أو موقع Next.js، أو API NestJS. كل شيء يعمل بشكل مثالي محليًا، ولكن حان الوقت لعرض مشروعك على العالم. يخاف العديد من المبتدئين من مرحلة النشر، معتبرين أنها معقدة ومربكة. في الواقع، بمجرد فهمك لهذه العملية مرة واحدة، ستتمكن من نشر أي مشاريع TypeScript في غضون 15-20 دقيقة.

في هذا الدليل، سنشرح الدورة الكاملة لنشر تطبيق TypeScript على VPS (خادم خاص افتراضي) - من إعداد الخادم إلى تكوين النطاق و HTTPS. المقال موجه لنظام Node.js البيئي، حيث أن TypeScript يُستخدم غالبًا معه.

ما الذي ستتعلمه:

• كيفية تجهيز VPS للعمل (Ubuntu 22.04)
• كيفية إعداد Node.js و TypeScript ومدير العمليات PM2
• كيفية بناء (تجميع) TypeScript في وضع الإنتاج
• كيفية إعداد Nginx كوكيل عكسي (reverse proxy)
• كيفية ربط شهادة SSL مجانية عبر Let's Encrypt

1. تجهيز VPS وتثبيت البيئة اللازمة

1.1 الإعداد الأولي للخادم

لنفترض أنك استأجرت VPS (على سبيل المثال، من DigitalOcean أو Timeweb أو Reg.ru) مع Ubuntu 22.04. أولاً، اتصل بالخادم عبر SSH:

ssh root@your-server-ip

أنشئ مستخدمًا منفصلاً (أكثر أمانًا من العمل كـ root):

adduser deployerusermod -aG sudo deployersu - deployer

1.2 تثبيت Node.js و npm

لتطبيق TypeScript، سنحتاج إلى Node.js الإصدار 18 أو 20 (LTS). استخدم PPA الرسمي من NodeSource:

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -sudo apt-get install -y nodejs

تحقق من التثبيت:

node -vnpm -v

1.3 تثبيت TypeScript عالميًا (اختياري)

على الرغم من أن TypeScript عادةً ما يكون تابعًا محليًا للمشروع، إلا أنه للتحقق السريع من التجميع يمكنك تثبيته عالميًا:

sudo npm install -g typescript

1.4 استنساخ مشروعك

انسخ المستودع من GitHub/GitLab إلى الخادم:

git clone https://github.com/your-username/your-project.gitcd your-project

قم بتثبيت التبعيات:

npm install

2. بناء TypeScript وإعداد PM2

2.1 تجميع TypeScript إلى JavaScript

في ملف package.json الخاص بك، يجب أن يكون هناك سكريبت للبناء. عادةً ما يبدو هكذا:

{  "scripts": {    "build": "tsc",    "start": "node dist/index.js",    "dev": "ts-node-dev src/index.ts"  }}

قم بتشغيل البناء:

npm run build

بعد التنفيذ، سيظهر كود JavaScript المُجمّع في مجلد dist. إذا كان لديك Next.js، فستكون أمر البناء هو npm run build (يقوم Next.js بتجميع TypeScript بنفسه).

2.2 تثبيت وإعداد PM2

PM2 هو مدير عمليات يحافظ على تشغيل تطبيقك، ويعيد تشغيله عند تعطله، ويدير السجلات. قم بتثبيته:

sudo npm install -g pm2

قم بتشغيل التطبيق عبر PM2 (حدد المسار إلى الملف المُجمّع):

pm2 start dist/index.js --name "my-typescript-app"

إذا كان لديك Next.js، سيكون الأمر مختلفًا:

pm2 start npm --name "next-app" -- start

قم بإعداد التشغيل التلقائي لـ PM2 عند إعادة تشغيل الخادم:

pm2 startup systemdpm2 save

الآن يعمل تطبيقك على منفذ محلي (على سبيل المثال، 3000). دعنا نجعله متاحًا عبر نطاق.

3. إعداد Nginx كوكيل عكسي (reverse proxy)

3.1 تثبيت Nginx

                
                

                    

                        المدونات                    
                    

                                                    
                                

                                    

                                        
                                    
                                    
مراقبة متقدمة لتطبيقات Swift: المقاييس والتنبيهات
                                
                            
                                                    
                                

                                    

                                        
                                    
                                    
التخزين المؤقت في TypeScript: Redis وMemcached والحلول المدمجة (مستوى متقدم)
                                
                            
                                            
                

                
                

                    

                        توصيات الكتب                    
                    

                                                    
                                

                                    

                                        
                                    
                                    
DevOps لمطوري C++: CI/CD، الحاويات والبنية التحتية
                                
                            
                                                    
                                

                                    

                                        
                                    
                                    
Rust: نصائح وأفضل الممارسات
                                
                            
                                                    
                                

                                    

                                        
                                    
                                    
Head First. أنماط التصميم
                                
                            
                                                    
                                

                                    

                                        
                                    
                                    
Kotlin Programming: The Big Nerd Ranch Guide
                                
                            
                                            
                
            
    

  
اقرأ أيضًا
  

                
                  
                 خطأ TypeScript النموذجي: الخاصية 'value' غير موجودة في HTMLElement
      
                
                  
                 Clean Code في C#: المبادئ والأمثلة لمطوري .NET
      
                
                  
                 فئة البيانات (Data class) في Kotlin: لماذا لا يمكن توريثها وكيفية تجاوز ذلك
      
                
                  
                 التحكم في نوع العناصر في الكائنات المفهرسة TypeScript
      
                
                  
                 مجتمع JavaScript: أين تذهب للمعرفة والإلهام في 2024