Integracja innych platform z Express.js

Po wykonaniu kilku dodatkowych konfiguracji możesz korzystać z podstawowej funkcji wiersza poleceń zorientowanej na framework, aby rozszerzyć obsługę integracji na inne frameworki 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ń, korzystając z preferowanej metody.
• Opcjonalnie: płatności włączone w projekcie Firebase (wymagane, jeśli planujesz używać SSR)

Inicjowanie 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 używać sieciowej platformy programistycznej? (eksperymentalnie)”.

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

5. Jeśli pojawi się taka prośba, wybierz Express.js lub niestandardowy.

Inicjowanie istniejącego projektu

Zmień konfigurację hostingu w sekcji 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 i 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.

Oto 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 Twoja platforma nie obsługuje wstępnego renderowania, zastanów się nad użyciem narzędzia takiego jak Rendertron. Rendertron pozwoli Ci wysyłać żądania do przeglądarki Chrome pozbawionej interfejsu do lokalnego wystąpienia aplikacji, aby zapisać wynikowy kod HTML, który będzie wyświetlany na stronie 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ć szybki moduł obsługi adresu URL, 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 synchronizuje 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 obecnie zalogowanego użytkownika (currentUser).