Vue Academy · पाठ

फ़ुल-स्टैक Vue को प्रोडक्शन में परिनियोजित करना

Vue + Fastify के लिए Docker Compose, nginx रिवर्स प्रॉक्सी, Let's Encrypt के साथ SSL और CI/CD

पाठ 4, कुल 4 में से13 चरण

फ़ुल-स्टैक Vue को प्रोडक्शन में परिनियोजित करना, CoddyKit पर Vue Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Vue Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

उत्पादन की संरचना

उत्पादन में एक पूर्ण-स्टैक Vue और Fastify app आम तौर पर दो कंटेनर के रूप में चलता है: एक nginx कंटेनर, जो बनाई गई Vue स्थिर फ़ाइलें प्रदान करता है, और एक Fastify API कंटेनर। nginx /api को एपीआई तक रिवर्स-प्रॉक्सी भी करता है।

Vue app बनाना

Vite से SPA बनाएँ, ताकि dist में अनुकूलित स्थिर संसाधन तैयार हों। nginx इन्हीं संसाधनों को प्रदान करेगा।

# package.json script
npm run build
# produces dist/ with hashed JS/CSS and index.html

Vue Dockerfile (बहु-चरणीय)

बहु-चरणीय Docker build का उपयोग करें: Node के साथ app बनाएँ, फिर स्थिर output को एक छोटे nginx image में कॉपी करें। अंतिम image में केवल स्थिर फ़ाइलें और nginx होते हैं।

FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

nginx.conf: SPA और एपीआई प्रॉक्सी

nginx configuration SPA प्रदान करती है और क्लाइंट रूटिंग के लिए index.html पर try_files वैकल्पिक मार्ग का उपयोग करती है। यह /api को उसके service name के माध्यम से Fastify कंटेनर तक प्रॉक्सी करती है।

server {
  listen 80;
  root /usr/share/nginx/html;

  location / {
    try_files $uri $uri/ /index.html;
  }

  location /api/ {
    proxy_pass http://fastify-api:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

Fastify Dockerfile

एपीआई image उत्पादन dependencies स्थापित करती है और सर्वर चलाती है। 0.0.0.0 पर bind करें, ताकि अन्य कंटेनर भी उस तक पहुँच सकें।

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --omit=dev
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

docker-compose.yml

docker-compose दोनों सेवाओं को साझा network पर जोड़ता है। nginx.conf में मौजूद proxy target fastify-api यहाँ दिए गए service name से मेल खाता है।

services:
  vue-nginx:
    build: ./frontend
    ports:
      - '80:80'
      - '443:443'
    depends_on:
      - fastify-api
  fastify-api:
    build: ./backend
    environment:
      - JWT_SECRET=${JWT_SECRET}
    expose:
      - '3000'

नाम के माध्यम से सेवा खोज

compose network के भीतर कंटेनर एक-दूसरे तक service name से पहुँचते हैं। nginx http://fastify-api:3000 पर प्रॉक्सी करता है—IP की आवश्यकता नहीं होती और एपीआई port को सार्वजनिक रूप से उजागर नहीं करना पड़ता।

# only nginx is published to the host (80/443)
# fastify-api uses 'expose', reachable only internally

Certbot के साथ SSL

Certbot के माध्यम से Let's Encrypt का उपयोग करके HTTPS जोड़ें। प्रमाण-पत्रों को nginx में माउंट करें और 443 server block कॉन्फ़िगर करें, जो HTTP को HTTPS पर भेजे।

server {
  listen 443 ssl;
  ssl_certificate /etc/letsencrypt/live/app.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/app.com/privkey.pem;
  # ... same location blocks as before
}
server {
  listen 80;
  return 301 https://$host$request_uri;
}

Certbot का नवीनीकरण

Certbot के प्रमाण-पत्र 90 दिनों तक मान्य रहते हैं। निर्धारित समय पर नवीनीकरण command चलाएँ, जैसे cron या सहायक कंटेनर के माध्यम से, और nginx को फिर से लोड करें, ताकि नए प्रमाण-पत्र लागू हो जाएँ।

# cron entry, twice daily
certbot renew --quiet && nginx -s reload

GitHub Actions CI/CD

GitHub Actions के साथ build और deployment स्वचालित करें: main पर push होने पर build और परीक्षण करें, फिर image बनाएँ और भेजें, या SSH के माध्यम से सर्वर पर जाकर image प्राप्त करें और compose के साथ सेवाओं को फिर से शुरू करें।

name: deploy
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm test
      - name: Deploy over SSH
        run: ssh $HOST 'cd /app && git pull && docker compose up -d --build'

गोपनीय जानकारी और वातावरण

कभी भी गोपनीय जानकारी को images में स्थायी रूप से शामिल न करें। उन्हें GitHub Actions secrets से प्राप्त environment variables के माध्यम से दें, जैसे compose का environment या env_file। JWT_SECRET, डेटाबेस URL आदि को repository से बाहर रखें।

त्वरित जाँच

पूर्ण-स्टैक deployment की अपनी समझ का परीक्षण करें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

आपने उत्पादन deployment सीखा:

दो सेवाएँ: vue-nginx (स्थिर) और fastify-api
nginx.conf SPA प्रदान करती है और /api को एपीआई service name पर प्रॉक्सी करती है
docker-compose दोनों को जोड़ता है; host पर केवल nginx प्रकाशित होता है
निर्धारित नवीनीकरण के साथ Certbot द्वारा HTTPS
GitHub Actions build, परीक्षण और deployment करता है; गोपनीय जानकारी environment variables में रहती है

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 42
पाठ: 156

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “फ़ुल-स्टैक Vue को प्रोडक्शन में परिनियोजित करना” पाठ निःशुल्क है?

हाँ — Vue Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “फ़ुल-स्टैक Vue को प्रोडक्शन में परिनियोजित करना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“फ़ुल-स्टैक Vue को प्रोडक्शन में परिनियोजित करना” में मैं क्या सीखूँगा?

Vue + Fastify के लिए Docker Compose, nginx रिवर्स प्रॉक्सी, Let's Encrypt के साथ SSL और CI/CD आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Vue Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Vue Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Vue Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“फ़ुल-स्टैक Vue को प्रोडक्शन में परिनियोजित करना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Vue Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Vue Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

Vue SPA के लिए Fastify बैकएंड
JWT प्रमाणीकरण: लॉगिन और रिफ़्रेश
Axios इंटरसेप्टर के साथ प्रमाणित API कॉल
फ़ुल-स्टैक Vue को प्रोडक्शन में परिनियोजित करना

← Vue Academy पर वापस जाएँ