چارچوب های دیگر را با Express.js ادغام کنید

با برخی پیکربندی‌های اضافی، می‌توانید بر اساس عملکرد CLI مبتنی بر چارچوب آگاه، پشتیبانی از یکپارچه‌سازی را به چارچوب‌هایی غیر از Angular و Next.js گسترش دهید.

قبل از شروع

قبل از اینکه شروع به استقرار برنامه خود در Firebase کنید، شرایط و گزینه های زیر را بررسی کنید:

Firebase را راه اندازی کنید

برای شروع، Firebase را برای پروژه چارچوب خود مقداردهی کنید. از Firebase CLI برای یک پروژه جدید استفاده کنید، یا firebase.json برای یک پروژه موجود تغییر دهید.

یک پروژه جدید را راه اندازی کنید

  1. در Firebase CLI، پیش‌نمایش چارچوب‌های وب را فعال کنید:
    firebase experiments:enable webframeworks

  2. دستور اولیه سازی را از CLI اجرا کنید و سپس دستورات را دنبال کنید:

    firebase init hosting

  3. به "آیا می خواهید از چارچوب وب استفاده کنید؟ (تجربی)" بله پاسخ دهید.

  4. دایرکتوری منبع میزبانی خود را انتخاب کنید. این می تواند یک برنامه وب موجود باشد.

  5. در صورت درخواست، Express.js / custom را انتخاب کنید

یک پروژه موجود را راه اندازی کنید

تنظیمات میزبانی خود را در firebase.json تغییر دهید تا یک گزینه source داشته باشد، نه یک گزینه public . به عنوان مثال: 

{
  "hosting": {
    "source": "./path-to-your-express-directory"
  }
}

محتوای ثابت را ارائه دهید

قبل از استقرار محتوای استاتیک، باید برنامه خود را پیکربندی کنید.

پیکربندی کنید

برای اینکه بدانید چگونه برنامه خود را اجرا کنید، Firebase CLI باید بتواند هم برنامه شما را بسازد و هم بداند ابزار شما دارایی های مقصد برای Hosting را در کجا قرار می دهد. این کار با اسکریپت ساخت npm و دستورالعمل دایرکتوری های CJS در package.json انجام می شود.

با توجه به package.json زیر:

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    …
}

Firebase CLI فقط اسکریپت ساخت شما را فراخوانی می کند، بنابراین باید مطمئن شوید که اسکریپت ساخت شما جامع است.

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack && npm run static && npm run prerender",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    …
}

اگر چارچوب شما از پیش رندر خارج از جعبه پشتیبانی نمی کند، از ابزاری مانند Rendertron استفاده کنید. Rendertron به شما این امکان را می دهد که درخواست های بدون هد کروم را در برابر یک نمونه محلی از برنامه خود ارسال کنید، بنابراین می توانید HTML حاصل را ذخیره کنید تا در Hosting ارائه شود.

در نهایت، فریم ورک های مختلف و ابزارهای ساخت، مصنوعات خود را در مکان های مختلف ذخیره می کنند. از directories.serve استفاده کنید تا به CLI بگویید که اسکریپت ساخت شما در حال خروجی آرتیفکت های به دست آمده است: 

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack && npm run static && npm run prerender",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    "directories": {
        "serve": "dist"
    },
    …
}

مستقر کنید

پس از پیکربندی برنامه خود، می توانید محتوای استاتیک را با دستور استقرار استاندارد ارائه دهید: 

firebase deploy

ارائه محتوای پویا

برای ارائه برنامه Express خود در Cloud Functions for Firebase ، مطمئن شوید که برنامه Express شما (یا کنترل‌کننده URL به سبک Express) به‌گونه‌ای صادر می‌شود که Firebase بتواند آن را پس از بسته‌بندی npm کتابخانه شما پیدا کند.

برای انجام این کار، اطمینان حاصل کنید که دستورالعمل files شما شامل همه چیزهایی است که برای سرور مورد نیاز است و نقطه ورودی اصلی شما به درستی در package.json تنظیم شده است:

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack && npm run static && npm run prerender",
        "static": "cp static/* dist",
        "prerender": "ts-node tools/prerender.ts"
    },
    "directories": {
        "serve": "dist"
    },
    "files": ["dist", "server.js"],
    "main": "server.js",
    ...
}

برنامه اکسپرس خود را از تابعی به نام app صادر کنید:

// server.js
export function app() {
  const server = express();
   …
   return server;
}

یا اگر ترجیح می‌دهید یک مدیریت URL به سبک اکسپرس صادر کنید، نام آن را handle بگذارید: 

export function handle(req, res) {
   res.send(‘hello world’);
}

مستقر کنید

firebase deploy

این کار محتوای استاتیک شما را در Firebase Hosting مستقر می‌کند و به Firebase اجازه می‌دهد تا به برنامه Express شما که در Cloud Functions for Firebase میزبانی شده است بازگردد.

اختیاری: ادغام با Firebase Authentication

ابزار استقرار Firebase آگاه از چارچوب وب، به طور خودکار وضعیت سرویس گیرنده و سرور را با استفاده از کوکی ها همگام نگه می دارد. برای دسترسی به زمینه احراز هویت، شی Express res.locals به صورت اختیاری حاوی یک نمونه برنامه Firebase احراز هویت ( firebaseApp ) و کاربر در حال حاضر وارد شده ( currentUser ) است.