Integracja innych platform z Express.js

Po wprowadzeniu pewnych dodatkowych ustawień możesz korzystać z podstawowej funkcji wiersza poleceń obsługującej platformę, aby rozszerzyć obsługę integracji na platformy 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ń za pomocą preferowanej metody.
  • Opcjonalnie: włączone płatności w projekcie Firebase (wymagane, jeśli planujesz używać SSR)

Zainicjuj Firebase

Aby rozpocząć, zainicjuj Firebase w projekcie frameworka. W przypadku nowego projektu użyj interfejsu wiersza poleceń Firebase, a w przypadku istniejącego projektu zmodyfikuj firebase.json.

Inicjowanie nowego projektu

  1. W interfejsie wiersza poleceń Firebase włącz podgląd frameworków internetowych: 
    firebase experiments:enable webframeworks

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

    firebase init hosting

  3. Odpowiedz „tak” na pytanie „Czy chcesz korzystać z platformy internetowej? (eksperymentalnie)”.

  4. Wybierz katalog źródłowy hostowania, który może być istniejącą aplikacją internetową.

  5. W razie potrzeby wybierz Express.js / custom.

Inicjowanie istniejącego projektu

Zmień konfigurację hostingu w firebase.json, aby użyć opcji 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ść kompilowania aplikacji oraz wiedzieć, gdzie narzędzia umieszczają zasoby przeznaczone do Hosting. Można to zrobić za pomocą skryptu kompilacji npm i dyrektywy katalogów CJS w pliku package.json.

Biorąc pod uwagę następujący 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 skrypt kompilacji jest 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 Twoja platforma nie obsługuje wstępnego renderowania, zastanów się nad użyciem narzędzia takiego jak Rendertron. Rendertron umożliwia wysyłanie żądań Chrome bez interfejsu graficznego do lokalnej instancji aplikacji. Dzięki temu możesz zapisać wynikowy kod HTML, który będzie wyświetlany w usłudze Hosting.

Na koniec różne frameworki i narzędzia do kompilacji przechowują artefakty w różnych miejscach. Użyj parametru directories.serve, aby podać interfejsowi wiersza poleceń, gdzie skrypt kompilacji ma wyprowadzać utworzone artefakty:

{
    "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ępniać aplikację Express w usłudze Cloud Functions for Firebase, upewnij się, że aplikacja Express (lub moduł obsługi adresów URL w stylu Express) jest eksportowana w taki sposób, aby Firebase mogła ją znaleźć po skompilowaniu biblioteki za pomocą npm.

Aby to zrobić, sprawdź, czy dyrektywa files zawiera wszystko, czego potrzebuje serwer, i czy główny punkt wejścia jest prawidłowo skonfigurowany w pliku 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ę ekspresową 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 ekspresowym, nadaj mu nazwę handle:

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

Wdróż

firebase deploy

Spowoduje to wdrożenie treści statycznych do Firebase Hosting i umożliwi Firebase użycie aplikacji Express hostowanej w Cloud Functions for Firebase.

Opcjonalnie: integracja z usługą Uwierzytelnianie Firebase

Narzędzie do wdrażania Firebase obsługujące framework internetowy automatycznie zsynchronizuje stan klienta i serwera za pomocą plików cookie. Aby można było uzyskać dostęp do kontekstu uwierzytelniania, obiekt Express res.locals zawiera opcjonalnie uwierzytelnioną instancję aplikacji Firebase (firebaseApp) i aktualnie zalogowanego użytkownika (currentUser).