プロジェクトの開発ワークフローを最適化することは、より速く、より良いものをリリースするために重要です。この記事では、   Postgres を使用して Next.js プロジェクトに最適なローカル開発環境を設定し、それを にデプロイする方法について説明します。 Neon Vercel 。 ベスト プラクティスと独自の見解に重点が置かれています。そのため、この記事では、データベースからユーザーの詳細リストを表示する CRUD アプリケーションを調べながら、ローカル開発とデプロイメント、ブランチング、環境について説明します 詳細については、以下を取り上げます。 ローカル開発用の Neon Postgres プロジェクトの設定 Vercel CLI を使用して Next.js プロジェクトを Vercel にデプロイする方法 Vercel エッジ関数を使用してランタイム操作を改善し、リクエストへの応答を高速化する方法 Neon データベースを SQL インジェクション攻撃から保護する方法。  Neon でのデータベースの分岐。 前提条件 このガイドに従うための要件は次のとおりです。   の熟練度。 Next.js ネオンアカウント アカウント Vercel これで準備は整いましたので、Neon と Vercel のプロジェクト設定に取り掛かりましょう。  Neon Postgres プロジェクトの設定方法 、コンピューティングとストレージを分離したサーバーレス Postgres です。自動スケーリング、ブランチ、ポイントインタイム リストアなどの最新の開発者機能を提供し、スケーラブルで高速な開発を可能にします。 Neon は まだ必要な場合は、無料の Neon アカウントを作成してください。完了すると、Neon はプロジェクト設定ページにリダイレクトします。ここで、プロジェクトとデータベース名、Postgres のバージョン、およびプロジェクトで使用するリージョン (お住まいの地域に近いものを選択することをお勧めします) を指定する必要があります。   Neon はローカル環境との統合のための CLI ツールを提供していますが、この記事では特定の操作に Web インターフェースを介して Neon を使用します。 プロジェクトを作成したら、Neon Dashboard インターフェースからプールされた接続文字列をコピーし、Next.js プロジェクト内の ファイルに貼り付けます。  .env.production  Next.js プロジェクトといえば、この記事では のデータ テーブルを含む現在動作している Next.js プロジェクトを使用します。 ShadcnUI このプロジェクトを取得するには、コマンドを使用してこの ローカル マシンにクローンします。 リポジトリを   git clone https://github.com/muyiwexy/dev_env_hackmamba.git リポジトリのクローンを作成したら、プロジェクトのメイン ディレクトリに環境変数を格納する ファイルを作成し、接続文字列を貼り付けます。次のようになります。 .env.production   DATABASE_URL = 'postgresql://neondb_owner:**************-withered-sea-a5nyklf9.us-east-2.aws.neon.tech/neondb?sslmode=require' 次に、Neon ダッシュボードの Neon SQL エディターに進みます。ここで、SQL コマンドを貼り付けて、プロジェクトに必要な特定のアクションを実行できます。以下のコマンドをコピーしてエディターに貼り付け、いくつかの必須フィールドを含む SQL テーブルを作成します。   CREATE TABLE user_details ( member_number VARCHAR(10) PRIMARY KEY, created_at VARCHAR, name VARCHAR(100), email VARCHAR(255), phone_number VARCHAR(15), gender VARCHAR(10), zone VARCHAR(50), service_unit VARCHAR(100), conference_shirt VARCHAR(5), fee_payment VARCHAR(20), paid BOOLEAN ); 注: このコマンドは、前に提供された Next.js テンプレート内の ファイルにあります。  /sql/user_data.sql 新しく作成されたテーブルが使用可能かどうかは、いつでも セクションで確認できます。これで情報が得られたので、アプリケーションを Vercet にデプロイします。これは Vercel の Web ユーザー インターフェースから実行できますが、このチュートリアルでは Vercel CLI を使用します。 テーブル  Next.js アプリを Vercel にデプロイする 時間を無駄にせずに、ターミナルに移動して以下のコマンドを貼り付けます。   npm i -g vercel 注: Mac ユーザーの場合、アクセス拒否エラーが発生することがあります。そのため、コマンドの前に キーワードを付けてください。 sudo このコマンドは CLI をグローバルにインストールし、ローカル マシンのどこからでも CLI に簡単にアクセスできるようにします。 次に、CLI を使用して Vercel アカウントにログインします。そのためには、以下のコマンドをターミナルに貼り付けます。   vercel login 次に、リストから Vercel サインアップ プロバイダーを選択し、認証して、確認ページで成功メッセージを確認します。  次に、以下のコマンドを使用してプログラムを Vercel にデプロイします。   vercel このプロセスには、デプロイメントをセットアップするためのいくつかの手順が含まれます。一貫性を保つために、以下の画像の選択に従ってください。  注: ビルド後、デプロイメントをチェックして、アプリが期待どおりに動作しているかどうかを確認できます。 次に、この記事では、Vercel Edge 関数を使用して Neon データベースからユーザー情報を取得する方法を説明します。  Vercelエッジ関数の作成 パフォーマンス強化機能です。ランタイム操作が簡素化されているため、従来のサーバーレス コンピューティングよりも効率的で高速な JavaScript または TypeScript 関数です。 Vercel Edge Functions は クローンしたプロジェクトに戻り、  ディレクトリ内に ファイルを作成します。この関数をエッジで実行するには、次のようにコード ベースでランタイムを指定します。 /app /api/route.ts   import { NextRequest, NextResponse } from "next/server"; export const runtime = "edge"; export async function GET(req: NextRequest, res: NextResponse) { return NextResponse.json({ message: "Hello from the Edge!" }); } 続行する前に、次のコマンドを使用して、  、   、および パッケージをインストールします。 Neon サーバーレス ドライバー Zod sqlstring   npm install @neondatabase/serverless zod sqlstring また、以下のコマンドを使用して、  タイプを開発依存関係としてインストールする必要があります。 sqlstring   npm i --save-dev @types/sqlstring -D   ファイル内のコードを以下のコードに置き換えることで、データベースへの接続が成功したかどうかをテストできます。 /api/route.ts   import { NextRequest, NextResponse } from "next/server"; import { Pool } from "@neondatabase/serverless"; export const runtime = "edge"; export async function GET(req: NextRequest) { const pool = new Pool({ connectionString: process.env.DATABASE_URL, }); const sql = ` SELECT NOW(); `; const { rows } = await pool.query(sql); const now = rows[0]; await pool.end(); return NextResponse.json( { now }, { status: 200, } ); } ブラウザで ルートにアクセスすると、下の画像のような応答が返されます。  /api 次に、データベース接続文字列を Vercel の環境変数に追加します。Vercel CLI を使用して、次のコマンドでこの文字列を追加します。   vercel env add プロンプトに従って、変数名 (  内の名前を使用することをお勧めします) と値 (値は文字列自体である必要があります) を追加します。次に、変数を利用する環境を、production、preview、development の中から選択します。 .env.production 注: 分岐については後で説明するので、複数の接続文字列を作成する必要はありません。 データベース URL をプロジェクトに追加したので、次のコマンドを使用して再デプロイします。   Vercel 次のセクションでは、関数 API ルートからの POST リクエストを使用して、Neon にデータを送信します。  Neonにデータを送信 データを操作せずにこれらの概念を理解するのは困難です。そこで、ダミー データを Neon データベースに送信してみましょう。このセクションでは、  を使用したデータベースでの SQL インジェクションと攻撃防止について説明します。また、柔軟性を高め、実稼働ブランチの信頼性を保護するデータベース ブランチについても説明します。 Zod 以下のコードを に貼り付けて、HTTP POST リクエストを処理するためのこの 関数を調べてみましょう /api/route.ts API ルート ハンドラー 。   export async function POST(req: any) { try { const data = await req.json(); const { member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid, } = schema.parse(data); const sql = sqlstring.format( ` INSERT INTO user_details ( member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid ) VALUES (?,?,?,?,?,?,?,?,?,?,?) `, [ member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid, ] ); console.log("sql", sql); await pool.query(sql); await pool.end(); return NextResponse.json(data); } catch (error) { console.error("Error processing request:", error); return NextResponse.json( { message: "Failed to save user details" }, { status: 500 } ); } } この Edge 関数は、リクエスト JSON から、  詳細情報を使用してフォーム値を分解します。次に、  を使用してフォーム データを検証します。これを行うには、以下のコードを に貼り付けます。 member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid Zod /api/route.ts   const schema = zod.object({ member_number: zod.string().min(5).max(12), created_at: zod.string(), name: zod.string().min(1, "Name is required").max(100, "Name is too long"), email: zod .string() .email("Invalid email format") .min(5, "Email is too short") .max(100, "Email is too long"), phone_number: zod .string() .min(7, "Phone number is too short") .max(15, "Phone number is too long"), gender: zod .string() .min(1, "Gender is required") .max(6, "Gender is too long"), zone: zod.string().min(1, "Zone is required").max(50, "Zone is too long"), service_unit: zod .string() .min(1, "Service Unit is required") .max(50, "Service Unit is too long"), conference_shirt: zod .string() .min(1, "Conference shirt size is required") .max(5, "Conference shirt size is too long"), fee_payment: zod .string() .min(1, "Fee Payment info is required") .max(50, "Fee Payment info is too long"), paid: zod.boolean(), }); 上記のコードは、フォーム データを表すオブジェクトの構造と検証ルールを記述するスキーマを定義します。これで、データベースへの クエリを正常に実行できるようになります。 INSERT データベースを確認すると、下の画像のようになります。  スムーズかつ迅速に、これで Neon データベースにデータを入力できます。ここで問題となるのは、これが本番データベースの場合はどうなるかということです。本番環境でテスト データを使用することは賢明ではありません。Neon は進化し、データベースの できるようになりました。これで、欠点や本番データベースの汚染を心配することなく、アプリをすばやくテストおよび開発できます。 ブランチ (GitHub ブランチの動作に似ています) を作成 次のセクションでは、この記事では について説明します。 Neon を使用したデータベースの分岐  Neon でのデータベース分岐 Neon コンソールの セクションに移動し、  を選択します。ブランチを作成するときは、メイン ブランチを親としてブランチに名前を付ける必要があります。注目した点の 1 つは、期間ごとに必要なデータをブランチに配置できるため、柔軟性が増したことです。  [ブランチ] [ブランチの作成] ブランチを作成すると、プロジェクトの作成時と同様に接続文字列が送信されます。必ず安全な場所に保管してください。  このブランチは、メイン ブランチとして実際のデータを持つ別のデータベースであることに注意してください。 この新しいデータベース接続文字列を使用するには、作成した   を作成し、接続文字列を値として 資格情報を設定します。 .env.production .env.local DATABASE_URL  Next.js は、開発中または本番中に使用する環境ファイルを自動的に検出します。 新しいデータを使用してデータベース ブランチ テーブルをテストすると、それを本番ブランチと比較できます。  テーブル スキーマの変更やデータの削除など、ブランチには必要なだけ変更を加えることができます。 結論 開発は複雑になることがあります。しかし、Neon Postgres が提供するツールを使用すると、スケーラブルで信頼性の高いアプリケーションをより速く構築できます。この記事では、Neon を使用してローカル開発環境を設定し、それを Vercel にデプロイする詳細なガイドを提供しました。ローカル開発のセットアップ、デプロイ プロセス、ブランチ、さまざまな環境の管理などの重要な側面について説明しました。このセットアップでアプリケーション開発を続けてください。その進捗状況をぜひお聞かせください。 プロジェクト全体は で確認できます。 GitHub

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Read My Stories

このオーディオは、ストーリーの元の言語で制作されています。

Web アプリを構築していますか? この方法ならより速く、より安全に、よりスマートにできます

About Author

コメント

ラベル

この記事は

Related Stories

Claude Sonnet 3.5 システムプロンプトの漏洩: 法医学的分析

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

ワークフローを10倍に向上させる方法: 必須アプリ17選

Telegram: クリプト島と本土を結ぶ橋

Claude Sonnet 3.5 システムプロンプトの漏洩: 法医学的分析

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

ワークフローを10倍に向上させる方法: 必須アプリ17選

Telegram: クリプト島と本土を結ぶ橋

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps