Integracja innych platform z usługą Express.js

Dzięki dodatkowej konfiguracji możesz wzbogacić podstawowe funkcje interfejsu wiersza poleceń zależne od platformy, 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:

• Interfejs wiersza poleceń Firebase 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

Zacznij od zainicjowania Firebase dla swojego projektu 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 wiersza poleceń Firebase włącz podgląd platform internetowych:

   firebase experiments:enable webframeworks

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

   firebase init hosting

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

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

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

Inicjowanie istniejącego projektu

Zmień konfigurację hostingu w firebase.json, aby udostępniała opcję source zamiast public. Przykład:

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

Wyświetlanie treści statycznych

Przed wdrożeniem treści statycznej musisz skonfigurować aplikację.

Skonfiguruj

Aby wiedzieć, jak wdrożyć aplikację, interfejs wiersza poleceń Firebase musi być w stanie zarówno utworzyć aplikację, jak i wiedzieć, gdzie Twoje narzędzie umieszcza zasoby przeznaczone do Hostingu. Służy do tego skrypt kompilacji npm i dyrektywa katalogów CJS w 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 upewnić się, że zawiera on wszystkie niezbędne elementy.

{
    "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 od razu nie obsługuje renderowania wstępnego, rozważ użycie narzędzia takiego jak Rendertron. Rendertron umożliwia wysyłanie żądań Chrome bez interfejsu graficznego do lokalnej instancji aplikacji, dzięki czemu możesz zapisać wynikowy kod HTML i udostępnić go w Hostingu.

Na koniec 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 wysyła powstałe 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 udostępniać treści statyczne za pomocą standardowego polecenia wdrożenia:

firebase deploy

Wyświetlanie treści dynamicznych

Jeśli chcesz udostępnić aplikację Express w Cloud Functions dla Firebase, upewnij się, że aplikacja Express (lub moduł obsługi adresów URL w stylu ekspresowym) jest wyeksportowana w taki sposób, że Firebase znajdzie ją po spakowaniu biblioteki npm.

W tym celu upewnij się, że dyrektywa files zawiera wszystko, czego potrzebuje serwer, a 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ą za pomocą 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 w Hostingu Firebase i powrót Firebase do aplikacji Express hostowanej w Cloud Functions dla Firebase.

Opcjonalnie: integracja z Uwierzytelnieniem Firebase

Zoptymalizowane przez platformę internetową narzędzia Firebase do wdrażania automatycznie synchronizują 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).