संपूर्ण प्रक्रिया #
- विकास के लिए आवश्यक वातावरण तैयार करें
- सोर्स कोड प्राप्त करें और निर्भर पैकेज इंस्टॉल करें
- विकास सर्वर पर कार्यशीलता की जांच करें
- प्रोडक्शन बिल्ड बनाएं
- Nginx कॉन्फ़िगरेशन सेट करें और बिल्ड की गई फ़ाइलें वितरित करें
- HTTPS सपोर्ट(आवश्यकतानुसार)
- रीस्टार्ट पर ऑटो-स्टार्ट(आवश्यकतानुसार)
निम्नलिखित प्रक्रिया में, हम विशिष्ट कार्य उदाहरण प्रस्तुत करते हैं।
STEP1. विकास वातावरण की तैयारी #
STEP1.1 Node.js और npm की स्थापना #
Ubuntu पर, निम्नलिखित कमांड से Node.js और npm इंस्टॉल करें।
sudo apt update
sudo apt install -y nodejs npm
इंस्टॉलेशन के बाद वर्जन की पुष्टि करें।
node -v
npm -v
STEP1.2 सर्वर की तैयारी #
- Ubuntu जैसे Linux सर्वर तैयार करें और SSH से लॉगइन कर सकने की स्थिति में रखें।
- (प्रोडक्शन ऑपरेशन की पूर्व शर्त के रूप में) root या sudo अनुमतियों वाला उपयोगकर्ता तैयार करें।
STEP2. सोर्स कोड प्राप्त करना #
STEP2.1 सोर्स कोड डाउनलोड/क्लोन करना #
- यदि GitHub आदि पर उपलब्ध है तो
git clone https://...से प्राप्त करें - Zip फ़ाइल के मामले में अपलोड करके अनज़िप करें
- यहां हम मानते हैं कि इसे
/home/projectमें रखा गया है।
STEP2.2 निर्भर पैकेज की स्थापना #
सोर्स कोड रखी गई डायरेक्टरी में जाएं और npm install से आवश्यक लाइब्रेरी इंस्टॉल करें।
cd /home/project
npm install
सफल होने पर node_modules डायरेक्टरी बन जाएगी।
STEP3. विकास सर्वर पर कार्यशीलता की जांच #
विकास के समय npm run dev का उपयोग करके लोकल पर सरल सर्वर शुरू करें। यहाँ एक उदाहरण है।
npm run dev
निष्पादित करने पर टर्मिनल में Local: http://localhost:5173 जैसा लॉग प्रदर्शित होगा।
ब्राउज़र में उस URL पर जाकर ऐप के चालू होने की पुष्टि कर सकते हैं।
- यदि रिमोट सर्वर पर टेस्ट करना चाहते हैं तो
vite.config.tsमेंserver.hostको0.0.0.0पर सेट करें और बाहरी पहुंच को सक्षम करें।
STEP4. प्रोडक्शन बिल्ड बनाना #
विकास पूरा होने पर, प्रोडक्शन बिल्ड बनाएं। यह ऐप को ऑप्टिमाइज़ करता है और dist डायरेक्टरी में
अंतिम स्टैटिक फ़ाइलें(HTML/JS/CSS) उत्पन्न करने की प्रक्रिया है।
cd /home/project
npm run build
- सफल होने पर, प्रोजेक्ट की रूट में
distफ़ोल्डर बन जाएगा। - इसमें
index.htmlऔरassetsफ़ोल्डर आदि शामिल होंगे।
STEP5. Nginx से बिल्ड की गई फ़ाइलें वितरित करना #
Vite के प्रीव्यू सर्वर के बजाय, Nginx जैसे Web सर्वर से स्टैटिक फ़ाइलें वितरित करना सामान्य है।
STEP5.1 Nginx की स्थापना #
Ubuntu पर Nginx इंस्टॉल करें।
sudo apt update
sudo apt install -y nginx
इंस्टॉलेशन के बाद, ब्राउज़र में http://<सर्वर का IP पता>/ पर जाएं तो
“Welcome to nginx!” पृष्ठ प्रदर्शित होगा।
STEP5.2 प्रोडक्शन फ़ाइलों का प्लेसमेंट #
- वितरण फ़ोल्डर बनाएं (उदाहरण:
/var/www/myapp)sudo mkdir -p /var/www/myapp - बिल्ड की गई फ़ाइलें(
distकी सामग्री) कॉपी करेंsudo cp -r /home/project/dist/* /var/www/myapp/ - प्लेसमेंट के बाद, सामग्री की पुष्टि करें
ls -l /var/www/myapp # index.html और assets फ़ोल्डर होने पर OK
STEP5.3 Nginx कॉन्फ़िगरेशन फ़ाइल बनाना #
Nginx कॉन्फ़िगरेशन फ़ाइल server { ... } ब्लॉक को
sites-available/ → sites-enabled/ में प्रबंधित करना मानक है।
- नई कॉन्फ़िगरेशन फ़ाइल बनाएं
sudo nano /etc/nginx/sites-available/myapp.conf - निम्नलिखित सामग्री लिखें (SPA को ध्यान में रखते हुए कॉन्फ़िगरेशन उदाहरण)
server { listen 80; server_name _; # केवल IP पहुंच के लिए। डोमेन के लिए server_name example.com; root /var/www/myapp; # dist फ़ाइलें रखने का स्थान index index.html; # SPA सपोर्ट कॉन्फ़िगरेशन: राउटर पथ /xxx होने पर भी index.html पर फॉलबैक location / { try_files $uri $uri/ /index.html; } }server_nameप्रोडक्शन डोमेन उपयोग करने पर उदाहरण:server_name example.com;root /var/www/myapp;बिल्ड की गई फ़ाइलें रखी गई डायरेक्टरी निर्दिष्ट करेंtry_files $uri $uri/ /index.html;React Router आदि का उपयोग करते समय, URL सीधे टाइप करने पर भीindex.htmlपर फॉलबैक के लिए कॉन्फ़िगरेशन है
- कॉन्फ़िगरेशन फ़ाइल सक्षम करें और डिफ़ॉल्ट कॉन्फ़िगरेशन अक्षम करें
# सिम्बोलिक लिंक से myapp.conf को sites-enabled में रखें sudo ln -s /etc/nginx/sites-available/myapp.conf /etc/nginx/sites-enabled/ # डिफ़ॉल्ट साइट होने पर अक्षम करें sudo rm /etc/nginx/sites-enabled/default - Nginx सेटिंग फ़ाइल का सिंटैक्स चेक और रीलोड
sudo nginx -t sudo systemctl reload nginx - ब्राउज़र में
http://<सर्वर का IP>/एक्सेस करें- पहले के “Welcome to nginx!” की जगह अगर बिल्ड किया हुआ ऐप दिखता है तो यह ठीक है।
STEP6. HTTPS (SSL) का प्रयोग (आवश्यकतानुसार) #
प्रोडक्शन एनवायरनमेंट में https:// का उपयोग करना सामान्य है।
मुफ़्त Let’s Encrypt (Certbot) का उपयोग करने का उदाहरण:
sudo apt update
sudo apt install -y certbot python3-certbot-nginx
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com
इंटरएक्टिव तरीके से आगे बढ़ने पर स्वचालित रूप से Nginx SSL सेटिंग को शामिल करेगा, और HTTPS से एक्सेस संभव हो जाएगा।
(DNS को yourdomain.com को इस सर्वर की ओर पॉइंट करना आवश्यक है)
STEP7. रीस्टार्ट के समय स्वचालित स्टार्टअप #
STEP7.1 केवल स्टैटिक फ़ाइलों के मामले में #
Vite से बिल्ड की गई स्टैटिक फ़ाइलों को Nginx द्वारा सर्व किया जा रहा है तो,
Nginx का स्वचालित स्टार्टअप सक्षम होना पर्याप्त है। नीचे दिए गए सक्रियण की पुष्टि करें।
sudo systemctl enable nginx
इससे सर्वर रीस्टार्ट के समय भी स्वचालित रूप से Nginx शुरू हो जाएगा।
STEP7.2 Node.js + Express / API सर्वर होने के मामले में #
यदि बैकएंड के रूप में Node.js आवश्यक है और उसी सर्वर पर चलाना है, तो PM2 या systemd से Node.js प्रोसेस को स्थायी बनाना सामान्य है।
# PM2 इंस्टॉल
sudo npm install -g pm2
# ऐप (Express आदि) स्टार्ट करें
pm2 start "npm run start" --name my-backend
# स्वचालित स्टार्टअप सक्षम करें
pm2 startup systemd
pm2 save
Nginx केवल /api/ के लिए रिक्वेस्ट को Node.js को proxy_pass करेगा,
और फ़्रंटएंड को स्टैटिक फ़ाइलों से सर्व करने जैसी संरचना बनती है।
STEP8. ट्रबलशूटिंग #
- “Welcome to nginx!” ही दिखता है
- डिफ़ॉल्ट सेटिंग को डिसेबल नहीं किया गया है
server_nameमैच नहीं हो रहा है
- 404 एरर आता है
rootकी सेटिंग पाथ गलत है- SPA में
try_filesसेट नहीं किया गया है
- ब्राउज़र से एक्सेस नहीं हो रहा है
- पोर्ट 80/443 खुले नहीं हैं (क्लाउड की सिक्योरिटी ग्रुप या UFW)
- सर्वर IP या डोमेन नाम सही तरीके से असाइन नहीं किया गया है
STEP9. सारांश #
- डेवलपमेंट:
npm run devसे कार्य की पुष्टि - बिल्ड:
npm run build→distफ़ोल्डर जेनरेट - Nginx से सर्व:
distकी सामग्री को/var/www/myappमें रखें →myapp.confको सेट करें →nginx -t→systemctl reload nginx - HTTPS सपोर्ट:
certbot --nginx -d yourdomain.comआदि से सर्टिफिकेट प्राप्त करें - स्वचालित स्टार्टअप: केवल स्टैटिक फ़ाइलें हों तो Nginx, अपना API भी आवश्यक हो तो PM2 या systemd से Node.js को स्थायी प्रबंधन
