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

プロジェクトの開発ワークフローを最適化することは、より速く、より良いものをリリースするために重要です。この記事では、 Neon Postgres を使用して Next.js プロジェクトに最適なローカル開発環境を設定し、それをVercelにデプロイする方法について説明します。

ベスト プラクティスと独自の見解に重点が置かれています。そのため、この記事では、データベースからユーザーの詳細リストを表示する CRUD アプリケーションを調べながら、ローカル開発とデプロイメント、ブランチング、環境について説明します。

詳細については、以下を取り上げます。

• ローカル開発用の Neon Postgres プロジェクトの設定
• Vercel CLI を使用して Next.js プロジェクトを Vercel にデプロイする方法
• Vercel エッジ関数を使用してランタイム操作を改善し、リクエストへの応答を高速化する方法
• Neon データベースを SQL インジェクション攻撃から保護する方法。
• Neon でのデータベースの分岐。

前提条件

このガイドに従うための要件は次のとおりです。

• Next.jsの熟練度。
• ネオンアカウント
• Vercelアカウント

これで準備は整いましたので、Neon と Vercel のプロジェクト設定に取り掛かりましょう。

Neon Postgres プロジェクトの設定方法

Neon は、コンピューティングとストレージを分離したサーバーレス Postgres です。自動スケーリング、ブランチ、ポイントインタイム リストアなどの最新の開発者機能を提供し、スケーラブルで高速な開発を可能にします。

まだ必要な場合は、無料の Neon アカウントを作成してください。完了すると、Neon はプロジェクト設定ページにリダイレクトします。ここで、プロジェクトとデータベース名、Postgres のバージョン、およびプロジェクトで使用するリージョン (お住まいの地域に近いものを選択することをお勧めします) を指定する必要があります。

Neon はローカル環境との統合のための CLI ツールを提供していますが、この記事では特定の操作に Web インターフェースを介して Neon を使用します。

プロジェクトを作成したら、Neon Dashboard インターフェースからプールされた接続文字列をコピーし、Next.js プロジェクト内の.env.productionファイルに貼り付けます。

Next.js プロジェクトといえば、この記事ではShadcnUIのデータ テーブルを含む現在動作している Next.js プロジェクトを使用します。

このプロジェクトを取得するには、コマンドを使用してこのリポジトリをローカル マシンにクローンします。

 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エッジ関数の作成

Vercel Edge Functions はパフォーマンス強化機能です。ランタイム操作が簡素化されているため、従来のサーバーレス コンピューティングよりも効率的で高速な JavaScript または TypeScript 関数です。

クローンしたプロジェクトに戻り、 /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

プロンプトに従って、変数名 ( .env.production内の名前を使用することをお勧めします) と値 (値は文字列自体である必要があります) を追加します。次に、変数を利用する環境を、production、preview、development の中から選択します。

注: 分岐については後で説明するので、複数の接続文字列を作成する必要はありません。

データベース URL をプロジェクトに追加したので、次のコマンドを使用して再デプロイします。

 Vercel

次のセクションでは、関数 API ルートからの POST リクエストを使用して、Neon にデータを送信します。

Neonにデータを送信

データを操作せずにこれらの概念を理解するのは困難です。そこで、ダミー データを Neon データベースに送信してみましょう。このセクションでは、 Zodを使用したデータベースでの SQL インジェクションと攻撃防止について説明します。また、柔軟性を高め、実稼働ブランチの信頼性を保護するデータベース ブランチについても説明します。

以下のコードを/api/route.tsに貼り付けて、HTTP POST リクエストを処理するためのこの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で確認できます。