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   Postgres a nasadiť ho do   . Neon Vercelu    aplikácie CRUD, ktorá zobrazuje zoznam podrobností o používateľoch z databázy. 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  Podrobnejšie sa budeme venovať:  Založenie projektu Neon Postgres pre miestny rozvoj  Ako nasadiť projekt Next.js do Vercelu pomocou Vercel CLI  Ako používať funkcie Vercel edge na zlepšenie prevádzkových operácií pre rýchlejšiu odozvu na požiadavky  Ako chrániť databázu Neon pred útokmi SQL injection.  Rozvetvenie databázy v Neon.  Predpoklady  Požiadavky na dodržiavanie tohto návodu sú nasledovné:  Znalosť   . Next.js   Neónový účet  Účet  Vercel  S tým preč, poďme pracovať na nastaveniach projektu pre Neon a Vercel.  Ako nastaviť projekt Neon Postgres    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. Neon  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   v rámci projektu Next.js.  .env.production  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   na svoj lokálny počítač pomocou príkazu. úložisko   git clone https://github.com/muyiwexy/dev_env_hackmamba.git  Po naklonovaní úložiska vytvorte súbor   na umiestnenie premenných prostredia v hlavnom adresári projektu a vložte reťazec pripojenia. Malo by to vyzerať takto: .env.production   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   v rámci šablóny Next.js poskytnutej vyššie.  /sql/user_data.sql  V sekcii   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. Tabuľky  Nasadenie vašej aplikácie Next.js do Vercelu  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.  Vytvorenie funkcie hrany Vercel    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. Funkcie Vercel Edge Functions  Vráťte sa do svojho klonovaného projektu a vytvorte súbor   v adresári   . Ak chcete spustiť túto funkciu na okraji, zadajte čas spustenia v kódovej báze takto: /api/route.ts /app   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   ,   a balík   pomocou príkazu: Neon serverless driver Zod sqlstring   npm install @neondatabase/serverless zod sqlstring  Tiež musíte nainštalovať typy   ako závislosť pre vývojárov pomocou príkazu nižšie. sqlstring   npm i --save-dev @types/sqlstring -D  Úspešné pripojenie k databáze môžete otestovať nahradením kódu v súbore   kódom uvedeným nižšie: /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, } ); }  Pri prístupe k trase   v prehliadači by ste mali dostať odpoveď ako na obrázku nižšie.  /api  Ď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   ) 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. .env.production  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.  Odosielanie údajov do Neonu  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   . 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. Zod  Poďme preskúmať túto funkciu   na spracovanie požiadavky HTTP POST vložením nižšie uvedeného kódu do    obslužného programu trasy API /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:   zo žiadosti JSON. Ďalej overíte údaje formulára pomocou   . Ak to chcete urobiť, vložte nižšie uvedený kód do súboru  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(), });  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   do databázy. INSERT  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   (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. vytvárať pobočky  V ďalšej časti tento článok preskúma   . vetvenie databázy pomocou Neon  Rozvetvenie databázy v Neon  Prejdite do časti   v konzole Neon a vyberte   . 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.  Pobočky položku Vytvoriť pobočku  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   podobný súboru   ktorý ste vytvorili, a nastavte poverenie   s reťazcom pripojenia ako jeho hodnotou. .env.local .env.production DATABASE_URL  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.  Záver  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

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

Read My Stories

Tento zvuk je vyrobený v pôvodnom jazyku príbehu!

Vytvárate webovú aplikáciu? Táto metóda ho robí rýchlejším, bezpečnejším a inteligentnejším

About Author

KOMENTÁRE

ZAVISTE ŠTÍTKY

TENTO ČLÁNOK BOL PREDSTAVENÝ V

Related Stories

112 Stories To Learn About Hackernoon Community

Code Smell 298 - How to Fix Microsoft Windows Time Waste

Mutmut: a Python mutation testing system

THE CRAB-SPIDER

112 Stories To Learn About Hackernoon Community

Code Smell 298 - How to Fix Microsoft Windows Time Waste

Mutmut: a Python mutation testing system

THE CRAB-SPIDER

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps