Optimalizácia vývojového pracovného toku projektu je dôležitá pre rýchlejšie a lepšie dodanie. V tomto článku sa dozviete, ako nastaviť optimálne miestne vývojové prostredie pre projekt Next.js pomocou Neon Postgres a nasadiť ho do Vercelu .
Dôraz je kladený na osvedčené postupy a názor – preto sa článok bude zaoberať miestnym vývojom a nasadením, vetvením a prostrediami preskúmaním aplikácie CRUD, ktorá zobrazuje zoznam podrobností o používateľoch z databázy.
Podrobnejšie sa budeme venovať:
Požiadavky na dodržiavanie tohto návodu sú nasledovné:
S tým preč, poďme pracovať na nastaveniach projektu pre Neon a Vercel.
Neon je Postgres bez servera, ktorý oddeľuje výpočtovú techniku a úložisko. Ponúka moderné vývojárske funkcie, ako je automatické škálovanie, vetvenie a obnovenie v určitom čase, čo umožňuje škálovateľný a rýchlejší vývoj.
Ak to stále potrebujete, vytvorte si bezplatný účet Neon. Po dokončení vás Neon presmeruje na stránku nastavenia projektu, kde musíte zadať názov projektu a databázy, verziu Postgres a oblasť (odporúčame vybrať oblasť blízko vašej lokality) určenú pre projekt.
Neon poskytuje nástroj CLI na integráciu s vaším lokálnym prostredím, ale tento článok bude používať Neon prostredníctvom svojho webového rozhrania na určité operácie.
Po vytvorení projektu skopírujte združený reťazec pripojenia z rozhrania Neon Dashboard a vložte ho do súboru .env.production
v rámci projektu Next.js.
Keď už hovoríme o projekte Next.js, v tomto článku bude použitý aktuálny pracovný projekt Next.js obsahujúci tabuľku údajov zo ShadcnUI .
Ak chcete získať tento projekt, naklonujte toto úložisko na svoj lokálny počítač pomocou príkazu.
git clone https://github.com/muyiwexy/dev_env_hackmamba.git
Po naklonovaní úložiska vytvorte súbor .env.production
na umiestnenie premenných prostredia v hlavnom adresári projektu a vložte reťazec pripojenia. Malo by to vyzerať takto:
DATABASE_URL = 'postgresql://neondb_owner:**************-withered-sea-a5nyklf9.us-east-2.aws.neon.tech/neondb?sslmode=require'
Ďalej prejdite do editora Neon SQL na paneli Neon. Tu môžete prilepiť príkazy SQL na vykonanie konkrétnych akcií potrebných pre váš projekt. Skopírujte a prilepte príkaz uvedený nižšie do editora, aby ste vytvorili tabuľku SQL s niektorými povinnými poľami:
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 );
Poznámka: Tento príkaz nájdete v súbore
/sql/user_data.sql
v rámci šablóny Next.js poskytnutej vyššie.
V sekcii Tabuľky môžete kedykoľvek skontrolovať, či je novovytvorená tabuľka dostupná. Teraz, keď máte tieto informácie, nasadíte svoju aplikáciu do Vercetu. Môžete to urobiť prostredníctvom webového používateľského rozhrania Vercelu, ale pre tento tutoriál použijeme Vercel CLI.
Bez toho, aby ste strácali veľa času, prejdite do svojho terminálu a vložte príkaz nižšie:
npm i -g vercel
Poznámka: Používatelia počítačov Mac môžu niekedy dostať chybu odmietnutia prístupu; pred príkaz teda zadajte kľúčové slovo
sudo
.
Príkaz nainštaluje CLI globálne, čo umožňuje jednoduchý prístup k CLI kdekoľvek na vašom lokálnom počítači.
Ďalšia vec, ktorú musíte urobiť, je prihlásiť sa do svojho účtu Vercel pomocou CLI. Aby ste to dosiahli, vložte do svojho terminálu nasledujúci príkaz:
vercel login
Pokračujte výberom poskytovateľa registrácie Vercel zo zoznamu, overením a vyhľadaním správy o úspechu na stránke s potvrdením.
Ďalej nasadíte svoj program do Vercelu pomocou príkazu nižšie:
vercel
Tento proces zahŕňa niekoľko krokov na nastavenie vášho nasadenia. Aby ste zabezpečili jednotnosť, postupujte podľa možností na obrázku nižšie.
Poznámka: Po zostavení môžete skontrolovať nasadenie a potvrdiť, či vaša aplikácia beží podľa očakávania
Ďalej tento článok ukáže, ako používať funkciu Vercel Edge na získanie informácií o používateľovi z databázy Neon.
Funkcie Vercel Edge Functions zlepšujú výkon. Sú to funkcie JavaScriptu alebo TypeScriptu, ktoré sú efektívnejšie a rýchlejšie ako tradičné bezserverové výpočty vďaka ich štíhlejším prevádzkovým operáciám.
Vráťte sa do svojho klonovaného projektu a vytvorte súbor /api/route.ts
v adresári /app
. Ak chcete spustiť túto funkciu na okraji, zadajte čas spustenia v kódovej báze takto:
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!" }); }
Predtým, ako budete pokračovať, nainštalujete Neon serverless driver , Zod a balík sqlstring pomocou príkazu:
npm install @neondatabase/serverless zod sqlstring
Tiež musíte nainštalovať typy sqlstring ako závislosť pre vývojárov pomocou príkazu nižšie.
npm i --save-dev @types/sqlstring -D
Úspešné pripojenie k databáze môžete otestovať nahradením kódu v súbore /api/route.ts
kódom uvedeným nižšie:
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, } ); }
Pri prístupe k trase /api
v prehliadači by ste mali dostať odpoveď ako na obrázku nižšie.
Ďalšia vec, ktorú musíte urobiť, je pridať reťazec pripojenia k databáze do premenných prostredia Vercel. Takže pomocou Vercel CLI pridajte tento reťazec pomocou príkazu:
vercel env add
Postupujte podľa pokynov na pridanie názvu premennej (odporúčame použiť názov vo vašej .env.production
) a hodnoty (hodnota by mala byť samotný reťazec). Ďalej vyberte prostredie, v ktorom chcete použiť premennú medzi produkciou, ukážkou a vývojom.
Poznámka: Vetvenie preskúmame neskôr, takže vytváranie viacerých reťazcov pripojenia nie je potrebné.
Teraz, keď ste do svojho projektu pridali adresu URL databázy, znova nasaďte pomocou príkazu:
Vercel
V ďalšej časti sa dostanete k odoslaniu niektorých údajov do Neonu pomocou požiadavky POST z vašej trasy API funkcie.
Je ťažké pochopiť niektorý z týchto konceptov bez práce s údajmi. Takže pošlime nejaké fiktívne údaje do databázy Neon. Táto časť sa bude zaoberať injekciou SQL a prevenciou útokov na databázu pomocou Zod . Budeme diskutovať aj o vetvení databázy, ktoré nám dáva väčšiu flexibilitu a chráni dôveryhodnosť vašej produkčnej pobočky.
Poďme preskúmať túto funkciu obslužného programu trasy API na spracovanie požiadavky HTTP POST vložením nižšie uvedeného kódu do /api/route.ts
.
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 } ); } }
Táto funkcia Edge deštrukturuje hodnoty formulára s týmito podrobnosťami: member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid
zo žiadosti JSON. Ďalej overíte údaje formulára pomocou Zod . Ak to chcete urobiť, vložte nižšie uvedený kód do súboru /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(), });
Vyššie uvedený kód definuje schému, ktorá popisuje štruktúru a overovacie pravidlá pre objekt reprezentujúci údaje formulára. Teraz môžete úspešne vytvoriť dotaz INSERT
do databázy.
Pri kontrole databázy by to malo vyzerať ako na obrázku nižšie.
Hladko a rýchlo – vďaka tomu môžete naplniť svoju databázu Neon. Otázkou teraz je, čo ak ide o produkčnú databázu? Je nerozumné používať testovacie údaje v produkčnom prostredí. Neon sa vyvinul, aby nám umožnil vytvárať pobočky (podobne ako fungujú pobočky GitHub) pre vašu databázu. Teraz môžete svoju aplikáciu rýchlo testovať a vyvíjať bez akýchkoľvek nevýhod alebo strachu z kontaminácie produkčnej databázy.
V ďalšej časti tento článok preskúma vetvenie databázy pomocou Neon .
Prejdite do časti Pobočky v konzole Neon a vyberte položku Vytvoriť pobočku . Pri vytváraní musíte pomenovať vetvu s hlavnou vetvou ako nadradenou. Jedna vec, ktorá upútala našu pozornosť, bola, že nám umožnila umiestniť požadované údaje do pobočky podľa obdobia, čím sa zabezpečila väčšia flexibilita.
Po vytvorení pobočky dostanete spojovací reťazec, rovnako ako pri vytváraní projektu; uschovajte ho na bezpečnom mieste.
Pamätajte, že táto vetva je samostatná databáza so skutočnými údajmi ako hlavnou vetvou.
Ak chcete použiť tento nový reťazec pripojenia k databáze, vytvorte súbor .env.local
podobný súboru .env.production
ktorý ste vytvorili, a nastavte poverenie DATABASE_URL
s reťazcom pripojenia ako jeho hodnotou.
Next.js automaticky zistí, aký súbor prostredia použiť počas vývoja alebo produkcie.
Keď otestujete tabuľku vetvy databázy s novými údajmi, môžete ju porovnať s produkčnou vetvou.
Vo vetve môžete vykonať toľko zmien, koľko chcete, napríklad zmeniť schému tabuľky alebo vymazať údaje.
Vývoj môže byť komplikovaný, ale s nástrojmi, ktoré poskytuje Neon Postgres, je vytváranie škálovateľných a spoľahlivých aplikácií rýchlejšie. Tento článok poskytuje podrobného sprievodcu nastavením miestneho vývojového prostredia pomocou Neonu a jeho nasadením do Vercelu. Zaoberali sme sa základnými aspektmi, ako sú nastavenia miestneho rozvoja, procesy nasadenia, vetvenie a správa rôznych prostredí. Pokračujte vo vývoji aplikácie s týmto nastavením; radi by sme počuli, ako to ide.
Celý projekt si môžete pozrieť na GitHub .