انتشار اپ Vue + Vuetify با Nginx و اتصال به API Node/Express روی یک سرور

در این مقاله قدم‌به‌قدم ساخت یک اپ To‑Do با Vue.js و Vuetify، تهیه خروجی production و پیکربندی Nginx به عنوان reverse proxy را توضیح می‌دهیم. سپس تمرکز می‌کنیم روی پرسش مهم: اگر API (مثلاً Node.js/Express) روی همان سرور میزبانی شود، چطور frontend و API را به هم متصل کنیم و چه تنظیماتی لازم است.

1. مروری سریع: چرا Vuetify و اجزای آماده

کامپوننت‌ها در توسعه فرانت‌اند مدرن بسیار مهم‌اند. Vuetify یک کتابخانه UI مبتنی بر Material Design برای Vue است که با ارائه کامپوننت‌های آماده (v-btn، v-text-field، v-card و …) توسعه سریع‌تر، یکپارچگی ظاهری و قابلیت تنظیم بالا را فراهم می‌کند. در این راهنما از Vuetify برای ساخت سریع یک اپ To‑Do استفاده شده است.

2. آماده‌سازی اپ برای Production

پس از توسعه محلی، باید اپ را با دستور build تبدیل به فایل‌های استاتیک (HTML، JS، CSS) کنیم تا Nginx بتواند آن‌ها را سرو کند. نتیجهٔ build در پوشهٔ dist قرار می‌گیرد مگر اینکه مسیر خروجی را در package.json تغییر دهید.

برای تولید خروجی مستقیم به مسیر مناسب سرور، می‌توانید در package.json دستور build را تغییر دهید. مثال:

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --dest /var/www/vuetify-meets-nginx-app"
  }
}

3. پیکربندی Nginx برای سرو اپ Vue

معمول‌ترین روش این است که Nginx روی پورت 80/443 گوش دهد و فایل‌های استاتیک اپ را از دایرکتوری ای مثل /var/www/vuetify-meets-nginx-app سرو کند. اگر از Vue Router در حالت history استفاده می‌کنید، باید درخواست‌های نامشخص را به /index.html بازگردانید.

نمونهٔ پیکربندی Nginx برای فقط سرو frontend:

server {
    listen 80;
    server_name your_domain_or_IP;

    root /var/www/vuetify-meets-nginx-app;
    index index.html;

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

4. اتصال Vue (فرانت‌اند) به API Node/Express روی همان سرور

وقتی API و frontend هر دو روی یک سرور قرار دارند، بهترین روش این است که:

1. API را روی یک پورت جدا (مثلاً 3000) اجرا کنید.
2. Nginx را طوری پیکربندی کنید که همهٔ درخواست‌هایی که به مسیر مشخصی مثل /api/ می‌آیند به API فوروارد شوند (proxy_pass).
3. اپ Vue هنگام فراخوانی API از آدرس نسبی مانند /api/ استفاده کند تا در محیط‌های مختلف (محلی، staging، production) نیازی به تغییر نداشته باشد.
4. مطمئن شوید تنظیمات CORS مناسب است یا از طریق Nginx نیازی به CORS نباشد چون مرورگر درخواست‌ها را به همان domain ارسال می‌کند.

4.1 نمونه: Express API ساده

const express = require('express');
const app = express();
app.use(express.json());

app.get('/api/tasks', (req, res) => {
  res.json([{ id: 1, text: 'Task 1' }, { id: 2, text: 'Task 2' }]);
});

app.post('/api/tasks', (req, res) => {
  // handle creating a task
  res.status(201).json(req.body);
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`API listening on port ${PORT}`);
});

توجه: مسیرهای API با پیشوند /api تعریف شده‌اند.

4.2 پیکربندی Nginx برای هدایت درخواست‌های /api/ به Express و سرو فرانت‌اند

server {
    listen 80;
    server_name your_domain_or_IP;

    root /var/www/vuetify-meets-nginx-app;
    index index.html;

    # Serve static frontend assets
    location / {
      try_files $uri $uri/ /index.html;
    }

    # Proxy API requests to Node/Express
    location /api/ {
      proxy_pass http://localhost:3000/api/;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $host;
      proxy_cache_bypass $http_upgrade;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto $scheme;
    }
}

توضیحات کلیدی:

• با این پیکربندی، تمام درخواست‌های /api/... به سرویس Node روی localhost:3000 فوروارد می‌شوند.
• از آنجا که دامنه یکسان است، مرورگر نیازی به ارسال درخواست‌های CORS نخواهد داشت. اما اگر API روی دامنه یا پورت مختلف باشد، باید CORS را فعال کنید یا از reverse proxy استفاده کنید.

4.3 مثال فراخوانی از Vue

در کد Vue بهتر است آدرس‌های API را نسبی بنویسید:

// Example using fetch
fetch('/api/tasks')
  .then(res => res.json())
  .then(tasks => { /* use tasks */ });

// Or with axios
axios.get('/api/tasks').then(response => { /* use response.data */ });

با این کار در محیط تولید (که Nginx درخواست‌ها را به API فوروارد می‌کند) و محیط توسعه (که ممکن است از proxy در webpack-dev-server استفاده کنید) رفتار یکسان خواهد بود.

4.4 حالت توسعه (dev) و proxy در Vue CLI

اگر می‌خواهید در حالت توسعه به API محلی متصل شوید، می‌توانید در vue.config.js یک proxy تعریف کنید:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
};

این کار درخواست‌های /api در توسعه را نیز به API محلی منتقل می‌کند و نیازی به CORS نیست.

5. نکات امنیتی و بهینه‌سازی برای تولید

• از SSL/TLS استفاده کنید (پیکربندی Nginx با Let’s Encrypt) تا ارتباط‌ها امن باشند.
• نسبت به headerهای امنیتی Nginx (مثل Content-Security-Policy، X-Frame-Options، X-Content-Type-Options) توجه کنید.
• در API از اعتبارسنجی و محدودیت نرخ (rate limiting) استفاده کنید.
• برای فایل‌های لاگ و مانیتورینگ از ابزارهای مناسب استفاده کنید و خطاها را لاگ کنید.
• برای deploy اتوماتیک خروجی build را مستقیم به مسیر وب سرور تولید کنید یا از CI/CD استفاده نمایید تا نیاز به کپی دستی فایل‌ها نباشد.

6. منابع و گیت‌هاب

برای نمونهٔ کامل پروژه و دیدن ساختار فایل‌ها می‌توانید مخزن گیت‌هاب پروژه را بررسی کنید:

https://github.com/do-community/vuetify-meets-nginx-app

پرسش رایج: اگر API و frontend روی همان سرور (مثلاً روی ParminCloud) باشند چه تغییراتی لازم است؟

خلاصه پاسخ:

• API را روی یک پورت جدا اجرا کنید (مثلاً 3000).
• Nginx را طوری پیکربندی کنید که مسیرهای API را به آن پورت proxy_pass کند.
• در Vue از آدرس‌های نسبی مثل /api/ استفاده کنید تا هم در dev و هم در production بدون تغییر کار کند.
• در صورت نیاز به بلوک جهت history mode router، از try_files $uri $uri/ /index.html; استفاده کنید.

کلام آخر

این روند (build کردن اپ Vue، گذاشتن خروجی در مسیر وب، اجرای API روی پورت جدا و پیکربندی Nginx به عنوان reverse proxy) یک الگوی استاندارد برای میزبانی frontend و backend روی یک سرور است. با رعایت نکات امنیتی (SSL، headers، rate limits) و خودکارسازی فرایند build/deploy با CI/CD، می‌توانید محیطی پایدار و امن در پلتفرم ابری مثل ParminCloud راه‌اندازی کنید.