Integracja innych platform z Express.js

Dzięki dodatkowej konfiguracji możesz rozbudować podstawową funkcję wiersza poleceń obsługującą frameworki, aby rozszerzyć obsługę integracji na frameworki inne niż Angular i Next.js.

Zanim zaczniesz

Zanim zaczniesz wdrażać aplikację w Firebase, zapoznaj się z tymi wymaganiami i opcjami:

• Firebase Interfejs wiersza poleceń w wersji 12.1.0 lub nowszej. Pamiętaj, aby zainstalować interfejs wiersza poleceń wybraną metodą.
• Opcjonalnie: włączone płatności w projekcie Firebase (wymagane, jeśli planujesz używać renderowania po stronie serwera)

Inicjowanie Firebase

Aby rozpocząć, zainicjuj Firebase w projekcie platformy. Użyj interfejsu wiersza poleceń Firebase w przypadku nowego projektu lub zmodyfikuj firebase.json w przypadku istniejącego projektu.

Inicjowanie nowego projektu

1. W interfejsie Firebase włącz podgląd platform internetowych:

   firebase experiments:enable webframeworks

2. Uruchom polecenie inicjowania w interfejsie wiersza poleceń, a potem postępuj zgodnie z wyświetlanymi instrukcjami:

   firebase init hosting

3. Odpowiedz „Tak” na pytanie „Czy chcesz używać platformy internetowej?”. (eksperymentalna)”.

4. Wybierz katalog źródłowy hostingu. Może to być istniejąca aplikacja internetowa.

5. Jeśli pojawi się prośba, wybierz Express.js / custom.

Inicjowanie istniejącego projektu

Zmień konfigurację hostingu w firebase.json, aby mieć opcję source zamiast opcji public. Przykład:

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

Udostępnianie treści statycznych

Zanim wdrożysz treści statyczne, musisz skonfigurować aplikację.

Skonfiguruj

Aby wiedzieć, jak wdrożyć aplikację, interfejs wiersza poleceń Firebase musi mieć możliwość zarówno jej skompilowania, jak i określenia, gdzie narzędzia umieszczają zasoby przeznaczone dla Hosting. Można to zrobić za pomocą skryptu kompilacji npm i dyrektywy katalogów CJS w package.json.

Biorąc pod uwagę ten plik package.json:

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

Interfejs wiersza poleceń Firebase wywołuje tylko skrypt kompilacji, więc musisz się upewnić, że jest on wyczerpujący.

{
    "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"
    },
    …
}

Jeśli Twój framework nie obsługuje wstępnego renderowania od razu po wyjęciu z pudełka, rozważ użycie narzędzia takiego jak Rendertron. Rendertron umożliwia wysyłanie żądań do Chrome bez interfejsu w lokalnej instancji aplikacji, dzięki czemu możesz zapisywać wynikowy kod HTML, który będzie wyświetlany w Hosting.

Różne platformy i narzędzia do kompilacji przechowują artefakty w różnych miejscach. Użyj directories.serve, aby poinformować interfejs wiersza poleceń, gdzie skrypt kompilacji zapisuje artefakty wynikowe:

{
    "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"
    },
    …
}

Wdróż

Po skonfigurowaniu aplikacji możesz wyświetlać treści statyczne za pomocą standardowego polecenia wdrażania:

firebase deploy

Wyświetlanie treści dynamicznych

Aby udostępnić aplikację Express na Cloud Functions for Firebase, upewnij się, że aplikacja Express (lub moduł obsługi adresów URL w stylu Express) jest wyeksportowana w taki sposób, aby Firebase mogło ją znaleźć po spakowaniu biblioteki za pomocą npm.

Aby to zrobić, upewnij się, że dyrektywa files zawiera wszystko, co jest potrzebne serwerowi, a główny punkt wejścia jest prawidłowo skonfigurowany w 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",
    ...
}

Wyeksportuj aplikację Express z funkcji o nazwie app:

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

Jeśli wolisz wyeksportować moduł obsługi adresów URL w stylu Express, nadaj mu nazwę handle:

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

Wdróż

firebase deploy

Spowoduje to wdrożenie treści statycznych w usłudze Firebase Hosting i umożliwi Firebase powrót do aplikacji Express hostowanej w usłudze Cloud Functions for Firebase.

Opcjonalnie: integracja z Uwierzytelnianiem Firebase

Narzędzia do wdrażania Firebase, które rozpoznają platformy internetowe, automatycznie synchronizują stan klienta i serwera za pomocą plików cookie. Aby uzyskać dostęp do kontekstu uwierzytelniania, obiekt Express res.locals może opcjonalnie zawierać uwierzytelnioną instancję aplikacji Firebase (firebaseApp) i aktualnie zalogowanego użytkownika (currentUser).