paint-brush
Vytvárate webovú aplikáciu? Táto metóda ho robí rýchlejším, bezpečnejším a inteligentnejšímpodľa@femiigemuyiwa
138 čítania

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

podľa Femi-Ige Muyiwa10m2025/01/23
Read on Terminal Reader

Príliš dlho; Čítať

Optimalizácia vývojového pracovného toku projektu je dôležitá pre rýchlejšie a lepšie dodanie.
featured image - Vytvárate webovú aplikáciu? Táto metóda ho robí rýchlejším, bezpečnejším a inteligentnejším
Femi-Ige Muyiwa HackerNoon profile picture
0-item

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ť:


  • 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é:


S tým preč, poďme pracovať na nastaveniach projektu pre Neon a Vercel.

Ako nastaviť projekt Neon Postgres

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.


vytvoriť 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.


kopírovať reťazec spoločného pripojenia

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.


SQL editor


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.

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.


vercelterminál

Ď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.


nasadenie


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

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.


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 .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.

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 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.


db


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 .

Rozvetvenie databázy v 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.


pobočka

vytvoriť novú pobočkuvytvoriť novú pobočku 2

Po vytvorení pobočky dostanete spojovací reťazec, rovnako ako pri vytváraní projektu; uschovajte ho na bezpečnom mieste.


bazén pripojenia

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.


pobočkapobočka

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 .