فصل دهم: استقرار (Deployment)

در این فصل، به فرآیند استقرار اپلیکیشن مرکز اجاره کشتی‌های کروز با استفاده از Nuxt 3 می‌پردازیم. استقرار شامل ساخت اپلیکیشن، انتخاب پلتفرم مناسب برای میزبانی، مدیریت متغیرهای محیطی، و تنظیم یکپارچگی و تحویل مداوم (CI/CD) است. این مراحل تضمین می‌کنند که اپلیکیشن به‌صورت ایمن، مقیاس‌پذیر و با عملکرد بالا در دسترس کاربران قرار گیرد. در ادامه، هر بخش به‌طور کامل توضیح داده شده و دستورات و نکات مربوطه شرح داده می‌شوند.

ساخت اپلیکیشن (Build)

برای آماده‌سازی اپلیکیشن برای استقرار، باید آن را به یکی از دو حالت رندر سمت سرور (SSR) یا تولید سایت استاتیک (SSG) بسازیم. Nuxt 3 از هر دو حالت پشتیبانی می‌کند و انتخاب بین آن‌ها به نیازهای پروژه بستگی دارد.

دستورات:

  • برای SSR:
  npm run build
  • برای SSG:
  npm run generate

توضیحات:

  1. ساخت SSR (npm run build):

  2. این دستور اپلیکیشن را برای رندر سمت سرور آماده می‌کند.

  3. خروجی در پوشه .output/ قرار می‌گیرد و شامل فایل‌های سرور و کلاینت است.
  4. کاربرد: مناسب برای اپلیکیشن‌هایی که محتوای پویا دارند (مانند داشبورد رزروها که به داده‌های کاربر وابسته است).
  5. مزایا:
    • پشتیبانی از محتوای پویا و به‌روزرسانی‌های بلادرنگ.
    • مناسب برای صفحاتی که نیاز به رندر در زمان درخواست دارند.

  6. نیازمندی‌ها: نیاز به یک سرور Node.js یا پلتفرمی مانند Vercel برای اجرای اپلیکیشن.

  7. ساخت SSG (npm run generate):

  8. این دستور تمام صفحات را به‌صورت فایل‌های HTML استاتیک تولید می‌کند.

  9. خروجی در پوشه dist/ قرار می‌گیرد.
  10. کاربرد: مناسب برای صفحاتی با محتوای ثابت یا نیمه‌ثابت (مانند صفحه اصلی یا صفحه جزئیات کشتی‌ها).
  11. مزایا:
    • سرعت بسیار بالا به دلیل ارائه فایل‌های استاتیک.
    • هزینه میزبانی کمتر (مناسب برای CDNها یا پلتفرم‌های استاتیک).
    • بهینه برای سئو، زیرا HTML از قبل تولید شده است.

  12. یادداشت: برای صفحات پویا (مانند داشبورد رزروها)، باید از APIهای سمت کلاینت یا Incremental Static Regeneration (ISR) استفاده شود.

  13. انتخاب بین SSR و SSG:

  14. در این پروژه، از رندر ترکیبی (Hybrid Rendering) استفاده شده است (همان‌طور که در فصل اول توضیح داده شد). می‌توان صفحات ثابت مانند صفحه اصلی و لیست کشتی‌ها را با SSG و صفحات پویا مانند داشبورد رزروها را با SSR رندر کرد.

  15. برای فعال کردن رندر ترکیبی، از تنظیمات routeRules در nuxt.config.ts استفاده کنید:
     export default defineNuxtConfig({
       routeRules: {
         '/': { prerender: true }, // SSG برای صفحه اصلی
         '/ships': { prerender: true }, // SSG برای لیست کشتی‌ها
         '/ships/**': { prerender: true }, // SSG برای جزئیات کشتی‌ها
         '/bookings': { ssr: true }, // SSR برای داشبورد رزروها
       },
     });

  1. اجرای محلی خروجی:

  2. برای تست خروجی SSR:

    npm run start
  • برای پیش‌نمایش خروجی SSG:
    npm run preview

استقرار (Deploy)

برای میزبانی اپلیکیشن، می‌توان از پلتفرم‌های محبوبی مانند Vercel، Netlify یا Cloudflare Pages استفاده کرد. این پلتفرم‌ها با Nuxt 3 سازگار هستند و فرآیند استقرار را ساده می‌کنند.

گزینه‌های استقرار:

  1. Vercel:

  2. چرا مناسب است؟:

    • ادغام بومی با Nuxt 3 و موتور Nitro.
    • پشتیبانی از SSR، SSG و رندر ترکیبی.
    • قابلیت‌هایی مانند پیش‌نمایش خودکار (Preview Deployments) و مقیاس‌پذیری خودکار.
  3. مراحل استقرار:
    1. پروژه را به یک مخزن Git (مانند GitHub) push کنید.
    2. در Vercel، یک پروژه جدید ایجاد کرده و مخزن را متصل کنید.
    3. تنظیمات پیش‌فرض Vercel معمولاً برای Nuxt مناسب هستند (دستور ساخت: npm run build یا npm run generate).
    4. متغیرهای محیطی (مانند API_BASE) را در داشبورد Vercel تنظیم کنید.

  4. مزایا:

    • استقرار سریع و خودکار.
    • پشتیبانی از دامنه‌های سفارشی و HTTPS رایگان.
    • قابلیت ISR برای به‌روزرسانی محتوای استاتیک.

  5. Netlify:

  6. چرا مناسب است؟:

    • ایده‌آل برای پروژه‌های SSG.
    • پشتیبانی از توابع سرور (Serverless Functions) برای APIهای پویا.
  7. مراحل استقرار:
    1. مخزن پروژه را به Netlify متصل کنید.
    2. تنظیمات ساخت را مشخص کنید:
      • دستور ساخت: npm run generate (برای SSG) یا npm run build (برای SSR).
      • پوشه خروجی: dist/ (برای SSG) یا .output/public/ (برای SSR).
    3. متغیرهای محیطی را در تنظیمات Netlify اضافه کنید.

  8. مزایا:

    • رابط کاربری ساده برای مدیریت استقرار.
    • پشتیبانی از Rollback و پیش‌نمایش شعبه‌ها.

  9. Cloudflare Pages:

  10. چرا مناسب است؟:

    • عملکرد بالا با شبکه CDN جهانی Cloudflare.
    • مناسب برای پروژه‌های SSG و SSR با ادغام Cloudflare Workers.
  11. مراحل استقرار:
    1. پروژه را به GitHub push کنید.
    2. در Cloudflare Pages، مخزن را متصل کنید.
    3. تنظیمات ساخت را مشابه Vercel یا Netlify وارد کنید.
    4. متغیرهای محیطی را در داشبورد Cloudflare تنظیم کنید.

  12. مزایا:

    • سرعت بالا به دلیل CDN قدرتمند.
    • هزینه کم برای پروژه‌های کوچک.

  13. انتخاب پلتفرم:

  14. برای این پروژه، Vercel به دلیل ادغام قوی با Nuxt و پشتیبانی از رندر ترکیبی توصیه می‌شود.

  15. اگر پروژه کاملاً استاتیک باشد، Netlify یا Cloudflare Pages گزینه‌های سبک‌تری هستند.

متغیرهای محیطی (Environment Variables)

متغیرهای محیطی برای ذخیره اطلاعات حساس (مانند کلیدهای API) یا تنظیمات پویا (مانند URL پایه API) استفاده می‌شوند. در این پروژه، از useRuntimeConfig برای دسترسی به این متغیرها استفاده شده است.

مراحل:

  1. ایجاد فایل .env:

  2. فایل .env را در ریشه پروژه ایجاد کنید:

     API_BASE=https://api.example.com
  • این فایل شامل متغیرهایی مانند API_BASE است که در nuxt.config.ts استفاده شده است:
     runtimeConfig: {
       public: {
         apiBase: process.env.API_BASE || '/api',
       },
     },

  1. دسترسی به متغیرها:

  2. در کد، از useRuntimeConfig برای دسترسی به متغیرها استفاده کنید:

     const config = useRuntimeConfig();
     const apiBase = config.public.apiBase; // به '/api' یا مقدار API_BASE اشاره می‌کند

  1. تنظیم در پلتفرم میزبانی:

  2. در Vercel، Netlify یا Cloudflare Pages، متغیرهای محیطی را در داشبورد پروژه اضافه کنید.

  3. برای مثال، در Vercel:

    • به بخش Settings > Environment Variables بروید.
    • متغیر API_BASE را با مقدار مورد نظر (مانند https://api.example.com) اضافه کنید.

  4. مزایا:

  5. امنیت: متغیرهای حساس (مانند کلیدهای API) در فایل .env ذخیره می‌شوند و در مخزن Git آپلود نمی‌شوند (با افزودن .env به .gitignore).

  6. انعطاف‌پذیری: امکان تغییر تنظیمات بدون تغییر کد.

  7. سازگاری: useRuntimeConfig دسترسی یکپارچه به متغیرها در سمت سرور و کلاینت را فراهم می‌کند.

  8. یادداشت:

  9. اطمینان حاصل کنید که فایل .env در .gitignore قرار دارد تا اطلاعات حساس به مخزن عمومی آپلود نشود.

  10. برای متغیرهای عمومی (مانند apiBase)، از public در runtimeConfig استفاده کنید تا در سمت کلاینت نیز در دسترس باشند.

یکپارچگی و تحویل مداوم (CI/CD)

CI/CD (Continuous Integration/Continuous Deployment) فرآیند خودکارسازی تست و استقرار کد است. در این پروژه، از GitHub Actions برای تنظیم CI/CD استفاده می‌کنیم.

مراحل تنظیم:

  1. ایجاد فایل GitHub Actions:

  2. فایل .github/workflows/ci.yml را در ریشه پروژه ایجاد کنید:

     name: CI/CD Pipeline
     on:
       push:
         branches: [main]
       pull_request:
         branches: [main]
     jobs:
       test:
         runs-on: ubuntu-latest
         steps:
           - uses: actions/checkout@v4
           - uses: actions/setup-node@v4
             with:
               node-version: '20'
           - run: npm install
           - run: npm run test
       deploy:
         needs: test
         runs-on: ubuntu-latest
         if: github.event_name == 'push' && github.ref == 'refs/heads/main'
         steps:
           - uses: actions/checkout@v4
           - uses: actions/setup-node@v4
             with:
               node-version: '20'
           - run: npm install
           - run: npm run generate
           - name: Deploy to Vercel
             uses: amondnet/vercel-action@v25
             with:
               vercel-token: ${{ secrets.VERCEL_TOKEN }}
               vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
               vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}

  1. توضیحات فایل CI/CD:

  2. name: نام Workflow (در اینجا "CI/CD Pipeline").

  3. on: مشخص می‌کند که Workflow در چه رویدادهایی اجرا شود (push یا pull request به شاخه main).
  4. jobs:
    • test: تست‌های واحد را با استفاده از npm run test اجرا می‌کند.
    • نصب Node.js و وابستگی‌ها.
    • اجرای تست‌ها با Vitest.
    • deploy: در صورت موفقیت تست‌ها و push به شاخه main، اپلیکیشن را به Vercel مستقر می‌کند.
    • ساخت پروژه با npm run generate (برای SSG).
    • استفاده از vercel-action برای استقرار به Vercel.

  5. متغیرهای حساس:

    • VERCEL_TOKEN, VERCEL_ORG_ID, VERCEL_PROJECT_ID: این مقادیر باید در تنظیمات GitHub Secrets اضافه شوند.
    • در GitHub، به Settings > Secrets and variables > Actions بروید و این مقادیر را از داشبورد Vercel کپی کنید.

  6. مزایا:

  7. تست خودکار: تست‌های واحد قبل از هر استقرار اجرا می‌شوند تا از صحت کد اطمینان حاصل شود.

  8. استقرار خودکار: هر push به شاخه main اپلیکیشن را به‌روز می‌کند.

  9. صرفه‌جویی در زمان: فرآیندهای دستی کاهش می‌یابد.

  10. گسترش CI/CD:

  11. می‌توان مراحل اضافی مانند تست‌های End-to-End (با Playwright یا Cypress) یا بررسی‌های Lint را اضافه کرد.

  12. برای مثال، افزودن ESLint:
     - run: npm run lint

جمع‌بندی فصل دهم

در این فصل، فرآیند استقرار اپلیکیشن مرکز اجاره کشتی‌های کروز را بررسی کردیم:

  • ساخت: استفاده از npm run build برای SSR و npm run generate برای SSG، با پشتیبانی از رندر ترکیبی.
  • استقرار: استفاده از پلتفرم‌های Vercel، Netlify یا Cloudflare Pages برای میزبانی ساده و مقیاس‌پذیر.
  • متغیرهای محیطی: مدیریت تنظیمات حساس با .env و useRuntimeConfig.
  • CI/CD: تنظیم GitHub Actions برای تست و استقرار خودکار.

این مراحل اپلیکیشن را آماده بهره‌برداری در محیط واقعی می‌کنند و با استفاده از ابزارهای مدرن، فرآیند توسعه و نگهداری را ساده‌تر و ایمن‌تر می‌سازند. این فصل پایان آموزش ساخت اپلیکیشن با Nuxt 3 است، اما می‌توانید با افزودن ویژگی‌هایی مانند احراز هویت پیشرفته یا محلی‌سازی، پروژه را گسترش دهید.