首页 > web前端 > js教程 > Vercel 上快速、简单的 NestJS 应用程序部署

Vercel 上快速、简单的 NestJS 应用程序部署

Mary-Kate Olsen
发布: 2024-11-29 06:23:10
原创
238 人浏览过

这篇文章也可以在我的博客上找到:https://hamidreza.tech/nestjs-on-vercel

如果您使用 Express 适配器,本指南会很有帮助。对于使用 Fastify 适配器的 NestJS 应用程序,这些链接可能会有所帮助:

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

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

?您可以在此 GitHub 存储库中访问本文中讨论的完整源代码:https://github.com/mahdavipanah/nestjs-on-vercel

Vercel 对 Express 应用程序的支持

Vercel 提供了一项便捷的功能,用于通过以下方式部署 Express 应用程序:

  1. 在 API 中公开 Express 应用对象。

  2. 定义一个重写规则,将所有传入流量定向到此单个 API。

我按照 Vercel 的官方 Express 部署指南来部署 NestJS,方法类似地公开 NestJS 的底层 Express 应用对象。

第 1 步 - 创建一个 NestJS 应用程序

如果您已经设置了 NestJS 应用,请跳过此步骤。

安装 NestJS 并创建一个新应用程序:

nest new my-app
登录后复制
登录后复制

第 2 步 - 安装必要的 NPM 软件包

npm install express @nestjs/platform-express
npm install -D @types/express
登录后复制

步骤 3 - 创建 src/AppFactory.ts 文件

此文件用作管理所有必要的 NestJS 应用程序引导的单个模块,并导出 NestJS 应用程序及其底层 Express 应用程序对象。

在项目根目录的 src 目录中创建一个名为 AppFactory.ts 的文件:

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 };
  }
}
登录后复制

第 4 步 - 修改 src/main.ts 文件

默认情况下,NestJS 有一个 src/main.ts 文件作为应用程序的入口点,包括所有配置和引导。修改此文件以将所有内容移动到 AppFactory.ts 文件中,仅保留监听方法的调用:

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

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

  await app.listen(process.env.PORT ?? 3000);
}
bootstrap();
登录后复制

第 5 步 - 添加 api/index.ts 文件

默认情况下,Vercel 运行时会构建项目的 /api 目录中创建的任何函数并将其提供给 Vercel (doc)。由于 Vercel 理解并处理 Express 应用程序对象,因此在此目录中创建一个导出 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;
登录后复制

第 6 步 - 添加 vercel.json 文件

在项目根目录下创建一个名为 vercel.json 的文件来配置 Vercel。在这里,为 Vercel 定义一个重写规则,以使用 Express 应用来服务所有传入流量 (doc)。

您还可以使用 api 目录中的 tsconfig.json 文件来配置 Vercel 的 TypeScript 编译器。除了 “路径映射”“Pr对象参考s” 之外,大多数选项均受支持。

nest new my-app
登录后复制
登录后复制

第 7 步 - 在 Vercel 上创建项目

恭喜?!我们快完成了。现在,创建一个 git 存储库并将源代码推送到其中。然后,转到您的 Vercel 帐户,创建一个新项目,并导入 git 存储库。您还可以使用本文的示例 GitHub 存储库。

Fast and Simple NestJS App Deployment on Vercel

以上是Vercel 上快速、简单的 NestJS 应用程序部署的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板