Vue Academy · درس

نشر Vue كامل المكدس في الإنتاج

‏Docker Compose لـ Vue وFastify، وnginx كوكيل عكسي، وSSL باستخدام Let's Encrypt، وCI/CD

نشر Vue كامل المكدس في الإنتاج درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

بنية الإنتاج

يعمل تطبيق Vue + Fastify متكامل في بيئة الإنتاج عادةً ضمن حاويتين: حاوية nginx تقدّم الملفات الثابتة المبنية لتطبيق Vue، وحاوية Fastify API. كما يعمل nginx وكيلًا عكسيًا يمرر /api إلى API.

بناء تطبيق Vue

ابنِ تطبيق SPA باستخدام Vite لإنتاج أصول ثابتة محسّنة في dist. وهذه هي الملفات التي سيقدّمها nginx.

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

Dockerfile لتطبيق Vue (متعدد المراحل)

استخدم عملية بناء Docker متعددة المراحل: ابنِ التطبيق باستخدام Node، ثم انسخ الناتج الثابت إلى صورة nginx صغيرة. ولا تحتوي الصورة النهائية إلا على الملفات الثابتة و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 وAPI

يقدّم إعداد nginx تطبيق SPA (مع fallback في try_files إلى index.html لتوجيه العميل) ويمرر /api إلى حاوية 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;
  }
}

Dockerfile لـ Fastify

تثبّت صورة API تبعيات الإنتاج وتشغّل الخادم. اربطه بالعنوان 0.0.0.0 حتى يمكن الوصول إليه من الحاويات الأخرى.

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 الخدمتين عبر شبكة مشتركة. ويتطابق هدف الوكيل fastify-api في nginx.conf مع اسم الخدمة هنا.

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، تصل الحاويات إلى بعضها باستخدام اسم الخدمة. يمرر nginx الطلبات إلى http://fastify-api:3000، من دون عناوين IP أو كشف عام لمنفذ API.

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

SSL باستخدام Certbot

أضف HTTPS باستخدام Let's Encrypt عبر Certbot. اربط الشهادات داخل nginx واضبط كتلة خادم على المنفذ 443، مع إعادة توجيه 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 يومًا. شغّل أمر التجديد وفق جدول زمني (باستخدام cron أو حاوية جانبية)، ثم أعد تحميل nginx حتى تُطبَّق الشهادات المجددة.

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

CI/CD باستخدام GitHub Actions

أتمت البناء والنشر باستخدام GitHub Actions: عند الدفع إلى main، ابنِ التطبيق واختبره، ثم ابنِ الصور وادفعها، أو اتصل عبر SSH بالخادم لسحبها وإعادة التشغيل باستخدام 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'

الأسرار والبيئة

لا تضع الأسرار داخل الصور مطلقًا. مرّرها عبر متغيرات البيئة (باستخدام environment / env_file في compose) المأخوذة من أسرار GitHub Actions. أبقِ JWT_SECRET وعناوين قواعد البيانات وغيرهما خارج المستودع.

اختبار سريع

اختبر مدى فهمك لنشر التطبيقات المتكاملة.

مراجعة

لقد تعلمت النشر في بيئة الإنتاج:

خدمتان: vue-nginx (للملفات الثابتة) وfastify-api
يقدّم nginx.conf تطبيق SPA ويمرر /api إلى اسم خدمة API
يربط docker-compose الخدمتين، ولا يُنشر إلى المضيف سوى nginx
استخدام HTTPS عبر Certbot مع التجديد المجدول
يبني GitHub Actions التطبيق ويختبره وينشره، بينما تبقى الأسرار في متغيرات البيئة

الأسئلة الشائعة

هل درس «نشر Vue كامل المكدس في الإنتاج» مجاني؟

نعم — نص درس «نشر Vue كامل المكدس في الإنتاج» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «نشر Vue كامل المكدس في الإنتاج»؟

‏Docker Compose لـ Vue وFastify، وnginx كوكيل عكسي، وSSL باستخدام Let's Encrypt، وCI/CD تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «نشر Vue كامل المكدس في الإنتاج»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

‏Fastify Backend لتطبيقات Vue SPA
مصادقة JWT: تسجيل الدخول والتحديث
استدعاءات API الموثّقة باستخدام Axios Interceptors
نشر Vue كامل المكدس في الإنتاج

← العودة إلى Vue Academy