Schnelle und einfache NestJS-App-Bereitstellung auf Vercel

Dieser Artikel ist auch auf meinem Blog verfügbar: https://hamidreza.tech/nestjs-on-vercel.

Diese Anleitung ist hilfreich, wenn Sie einen Express-Adapter verwenden. Für NestJS-Anwendungen, die den Fastify-Adapter verwenden, können diese Links hilfreich sein:

• https://fastify.dev/docs/latest/Guides/Serverless/#vercel

• https://github.com/vercel/examples/tree/main/starter/fastify

? Sie können auf den vollständigen Quellcode, der in diesem Artikel besprochen wird, in diesem GitHub-Repository zugreifen: https://github.com/mahdavipanah/nestjs-on-vercel

Vercels Unterstützung für Express-Apps

Vercel bietet eine praktische Funktion für die Bereitstellung Ihrer Express-App durch:

1. Das Express-App-Objekt in einer API verfügbar machen.

2. Definieren einer Rewrite-Regel, die den gesamten eingehenden Datenverkehr an diese einzelne API weiterleitet.

Ich habe den offiziellen Leitfaden von Vercel für die Bereitstellung von Express befolgt, um NestJS bereitzustellen, indem ich auf ähnliche Weise das zugrunde liegende Express-App-Objekt von NestJS offengelegt habe.

Schritt 1 – Erstellen Sie eine NestJS-App

Überspringen Sie diesen Schritt, wenn Sie bereits eine NestJS-App eingerichtet haben.

Installieren Sie NestJS und erstellen Sie eine neue App:

nest new my-app

Schritt 2 – Erforderliche NPM-Pakete installieren

npm install express @nestjs/platform-express
npm install -D @types/express

Schritt 3 – Erstellen Sie die Datei src/AppFactory.ts

Diese Datei dient als einzelnes Modul, das das gesamte erforderliche Bootstrapping der NestJS-App verwaltet und sowohl die NestJS-App als auch das zugrunde liegende Express-App-Objekt exportiert.

Erstellen Sie eine Datei mit dem Namen AppFactory.ts im Verzeichnis src im Stammverzeichnis Ihres Projekts:

import { ExpressAdapter } from '@nestjs/platform-express';
import { NestFactory } from '@nestjs/core';
import express, { Request, Response } from 'express';
import { Express } from 'express';
import { INestApplication } from '@nestjs/common';
import { AppModule } from './app.module.js';

export class AppFactory {
  static create(): {
    appPromise: Promise<INestApplication<any>>;
    expressApp: Express;
  } {
    const expressApp = express();
    const adapter = new ExpressAdapter(expressApp);
    const appPromise = NestFactory.create(AppModule, adapter);

    appPromise
      .then((app) => {
        // You can add all required app configurations here

        /**
         * Enable cross-origin resource sharing (CORS) to allow resources to be requested from another domain.
         * @see {@link https://docs.nestjs.com/security/cors}
         */
        app.enableCors({
          exposedHeaders: '*',
        });

        app.init();
      })
      .catch((err) => {
        throw err;
      });

    // IMPORTANT This express application-level middleware makes sure the NestJS app is fully initialized
    expressApp.use((req: Request, res: Response, next) => {
      appPromise
        .then(async (app) => {
          await app.init();
          next();
        })
        .catch((err) => next(err));
    });

    return { appPromise, expressApp };
  }
}

Schritt 4 – Ändern src/main.ts-Datei

NestJS verfügt standardmäßig über eine src/main.ts-Datei, die als Einstiegspunkt der Anwendung dient, einschließlich aller Konfigurationen und Bootstrappings. Ändern Sie diese Datei, um alles in die AppFactory.ts-Datei zu verschieben und nur den Aufruf der Listen-Methode beizubehalten:

import { AppFactory } from './AppFactory.js';

async function bootstrap() {
  const { appPromise } = AppFactory.create();
  const app = await appPromise;

  await app.listen(process.env.PORT ?? 3000);
}
bootstrap();

Schritt 5 – Hinzufügen api/index.ts-Datei

Standardmäßig erstellt die Vercel-Laufzeitumgebung alle im /api-Verzeichnis eines Projekts erstellten Funktionen und stellt sie Vercel (doc) zur Verfügung. Da Vercel das Express-App-Objekt versteht und verarbeitet, erstellen Sie in diesem Verzeichnis eine Funktion, die das Express-App-Objekt exportiert:

/**
 * This file exports Express instance for specifically for the deployment of the app on Vercel.
 */

import { AppFactory } from '../src/AppFactory.js';

export default AppFactory.create().expressApp;

Schritt 6 – Hinzufügen vercel.json-Datei

Erstellen Sie eine Datei mit dem Namen vercel.json im Stammverzeichnis des Projekts, um Vercel zu konfigurieren. Definieren Sie hier eine Umschreiberegel für Vercel, um die Express-App für die Bereitstellung des gesamten eingehenden Datenverkehrs zu verwenden (Dokument).

Sie können auch eine tsconfig.json-Datei im API-Verzeichnis verwenden, um den TypeScript-Compiler von Vercel zu konfigurieren. Abgesehen von "Pfadzuordnungen" und "PrProjektreferenzs" werden die meisten Optionen unterstützt.

nest new my-app

Schritt 7 – Erstellen Sie ein Projekt auf Vercel

Herzlichen Glückwunsch?! Wir sind fast fertig. Erstellen Sie nun ein Git-Repository und übertragen Sie Ihren Quellcode dorthin. Gehen Sie dann zu Ihrem Vercel-Konto, erstellen Sie ein neues Projekt und importieren Sie das Git-Repository. Sie können auch das Beispiel-GitHub-Repository dieses Artikels verwenden.

Das obige ist der detaillierte Inhalt vonSchnelle und einfache NestJS-App-Bereitstellung auf Vercel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!