Déploiement rapide et simple de l'application NestJS sur Vercel

Cet article est également disponible sur mon blog : https://hamidreza.tech/nestjs-on-vercel.

Ce guide est utile si vous utilisez un adaptateur Express. Pour les applications NestJS utilisant l'adaptateur Fastify, ces liens peuvent être utiles :

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

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

? Vous pouvez accéder au code source complet discuté dans cet article sur ce référentiel GitHub : https://github.com/mahdavipanah/nestjs-on-vercel

Prise en charge de Vercel pour les applications express

Vercel propose une fonctionnalité pratique pour déployer votre application Express en :

1. Exposition de l'objet application Express dans une API.

2. Définir une règle de réécriture qui dirige tout le trafic entrant vers cette API unique.

J'ai suivi le guide officiel de Vercel pour le déploiement d'Express pour déployer NestJS en exposant de la même manière l'objet d'application Express sous-jacent de NestJS.

Étape 1 : créer une application NestJS

Ignorez cette étape si vous avez déjà configuré une application NestJS.

Installez NestJS et créez une nouvelle application :

nest new my-app

Étape 2 - Installer les packages NPM nécessaires

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

Étape 3 - Créer le fichier src/AppFactory.ts

Ce fichier sert de module unique qui gère tout le démarrage nécessaire de l'application NestJS et exporte à la fois l'application NestJS et son objet d'application Express sous-jacent.

Créez un fichier nommé AppFactory.ts dans le répertoire src à la racine de votre projet :

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 };
  }
}

Étape 4 - Modifier Fichier src/main.ts

Par défaut, NestJS dispose d'un fichier src/main.ts qui sert de point d'entrée à l'application, y compris toute la configuration et le démarrage. Modifiez ce fichier pour tout déplacer vers le fichier AppFactory.ts, en ne gardant que l'invocation de la méthode Listen :

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

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

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

Étape 5 - Ajouter le fichier api/index.ts

Par défaut, le runtime Vercel construit et sert toute fonction créée dans le répertoire /api d'un projet sur Vercel (doc). Puisque Vercel comprend et gère l'objet application Express, créez une fonction dans ce répertoire qui exporte l'objet application Express :

/**
 * 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;

Étape 6 - Ajouter le fichier vercel.json

Créez un fichier nommé vercel.json dans le répertoire racine du projet pour configurer Vercel. Ici, définissez une règle de réécriture pour que Vercel utilise l'application Express pour desservir tout le trafic entrant (doc).

Vous pouvez également utiliser un fichier tsconfig.json dans le répertoire api pour configurer le compilateur TypeScript de Vercel. La plupart des options sont prises en charge, à l'exception des "Path Mappings" et des "Project References".

nest new my-app

Étape 7 - Créer un projet sur Vercel

Félicitations ?! Nous avons presque terminé. Maintenant, créez un référentiel git et transmettez-y votre code source. Ensuite, accédez à votre compte Vercel, créez un nouveau projet et importez le référentiel git. Vous pouvez également utiliser l’exemple de référentiel GitHub de cet article.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!