ホームページ >ウェブフロントエンド >jsチュートリアル >Vercel と Supabase を使用した NestJS アプリケーションのデプロイ

Vercel と Supabase を使用した NestJS アプリケーションのデプロイ

DDD
DDDオリジナル
2024-10-26 05:37:02771ブラウズ

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 は主にフロントエンド アプリのデプロイメントに使用されることが知られていますが、バックエンド プロジェクトのデプロイメントにも使用できます。

追記: バックエンド展開の中規模から大規模なプロジェクトに取り組んでいる場合は、代わりに適切なサービス プロバイダーを使用してください。

Vercel アカウントで、新しいプロジェクトを作成し、Git リポジトリに接続します。 .env ファイルをインポートし、Deploy ボタンをクリックします。

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 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。