>웹 프론트엔드 >JS 튜토리얼 >Vercel 및 Supabase를 사용하여 NestJS 애플리케이션 배포

Vercel 및 Supabase를 사용하여 NestJS 애플리케이션 배포

DDD
DDD원래의
2024-10-26 05:37:02769검색

Vercel에 배포하는 것은 매우 쉽지만 배포 중에 고려해야 할 몇 가지 설정이 있다는 점을 이해하세요.

전제조건

  • NestJS 프로젝트가 PostgreSQL을 사용하여 개발 환경에서 로컬로 연결되어 제대로 작동하는 모습
  • 배포용 Vercel 계정
  • Supabase 계정(여기에서 PostgreSQL 데이터베이스를 설정합니다)

NestJS 앱을 배포할 준비가 되었다는 점을 고려하여 Supabase 설정부터 시작하겠습니다.

하위베이스 계정

Supabase는 PostgreSQL 데이터베이스를 완벽하게 지원하고 원활하게 구성하는 오픈소스 Firebase 대안이며 인증, 저장 등과 같은 추가 기능도 제공합니다.

Supabase에서 새 계정을 설정하고 해당 계정에서 새 프로젝트를 만듭니다.

Deploying NestJS Application using Vercel and Supabase

설정이 완료되면 페이지에서 연결 버튼을 클릭하세요. 그러면 DB를 프로젝트에 연결하기 위한 다양한 옵션이 표시됩니다

Deploying NestJS Application using Vercel and Supabase

제공된 자격 증명으로 현지 연결을 테스트하여 모든 것이 완벽하게 작동하는지 확인하세요.

참고: 자격 증명이 노출되지 않고 .env 파일에 저장되지 않았는지 확인하세요. (이미 알고 계시겠죠?)

다음으로 Vercel 계정을 설정하고 프로젝트를 배포해 보겠습니다

베르셀

일반적으로 Vercel은 주로 프런트엔드 앱 배포에 사용되는 것으로 알려져 있지만 백엔드 프로젝트 배포에도 사용할 수 있습니다.

PS: 백엔드 배포를 위한 중대형 프로젝트를 진행하는 경우 대신 적합한 서비스 제공업체를 이용하세요.

Vercel 계정에서 새 프로젝트를 생성하고 Git 저장소에 연결하세요. .env 파일을 가져오고 배포 버튼을 클릭하세요.

Deploying NestJS Application using Vercel and Supabase

짜잔, 바로 그거예요???.
...

발생할 수 있는 일반적인 문제

# 오류: "public"이라는 이름의 출력 디렉터리가 없습니다.

Deploying NestJS Application using Vercel and Supabase

Vercel이 빌드 프로세스 중에 출력 디렉터리를 알아야 하기 때문에 이는 일반적인 오류입니다. 이 문제를 해결하려면,versel.json 파일을 추가하고 다음을 복사하세요:

{
  "version": 2,

  "builds": [
    {
      "src": "src/main.ts",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "src/main.ts",
      "methods": ["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"]
    }
  ]
} 

배포를 다시 실행하면 끝입니다

...

# 오류: 이 서버리스 기능이 충돌했습니다.

Deploying NestJS Application using Vercel and Supabase

저의 경우 모듈을 찾을 수 없다는 오류 때문에 발생했습니다

Deploying NestJS Application using Vercel and Supabase

...
이 문제를 해결하는 방법에는 여러 가지가 있습니다.

방법 1(모든 가져오기를 상대 경로로 바꾸기)

에서

{
  "version": 2,

  "builds": [
    {
      "src": "src/main.ts",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "src/main.ts",
      "methods": ["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"]
    }
  ]
} 


import { UsersService } from 'src/users/users.service';

...

방법 2(vercel.json 파일 및 .gitignore 파일 수정)

앱을 상대 경로 가져오기만 사용하도록 제한할 필요가 없었기 때문에 결국 이 방법을 선택했습니다.

그래서 vercel.json을 이렇게 수정하세요

import { UsersService } from '../users/users.service';

.gitignore 파일로 이동하여 /dist를 제거하세요.

새 배포를 실행하면 그게 전부입니다.

즐거운 코딩하세요! ?

위 내용은 Vercel 및 Supabase를 사용하여 NestJS 애플리케이션 배포의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.