Оптимизација тока развоја пројекта је важна за бржу и бољу испоруку. У овом чланку ћете истражити како да подесите оптимално локално развојно окружење за Нект.јс пројекат користећи   Постгрес и примените га на   . Неон Верцел    ЦРУД апликације која приказује листу корисничких детаља из базе података. Нагласак је на најбољим праксама и мишљењима – према томе, чланак ће покрити локални развој и примену, гранање и окружења испитивањем  Детаљније ћемо покрити:  Постављање Неон Постгрес пројекта за локални развој  Како да примените Нект.јс пројекат у Верцел користећи Верцел ЦЛИ  Како да користите функције Верцел едге да побољшате операције током извршавања за бржи одговор на захтеве  Како заштитити Неон базу података од напада СКЛ ињекције.  Гранање базе података у Неону.  Предуслови  Захтеви за праћење овог водича су следећи:  Познавање  Нект.јс.   Неонски налог    налог Верцел  Склањајући то с пута, хајде да радимо на подешавањима пројекта за Неон и Верцел.  Како поставити Неон Постгрес пројекат    је Постгрес без сервера који раздваја рачунарство и складиштење. Нуди модерне развојне функције као што су аутоматско скалирање, гранање и враћање у тренутку, омогућавајући скалабилан и бржи развој. Неон  Креирајте бесплатан Неон налог ако то још увек треба да урадите. Када завршите, Неон вас преусмерава на страницу за подешавање пројекта, где морате да наведете име пројекта и базе података, верзију Постгреса и регион (препоручујемо да изаберете онај који је близу ваше локације) намењен пројекту.   Неон обезбеђује ЦЛИ алат за интеграцију са вашим локалним окружењем, али овај чланак ће користити Неон преко свог веб интерфејса за одређене операције.  Када креирате свој пројекат, копирајте стринг за повезивање из Неон Дасхбоард интерфејса и налепите га у   датотеку у оквиру вашег Нект.јс пројекта.  .env.production  Говорећи о Нект.јс пројекту, овај чланак ће користити тренутни радни Нект.јс пројекат који садржи табелу података из   . СхадцнУИ  Да бисте добили овај пројекат, клонирајте ово   на вашу локалну машину користећи команду. спремиште   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'  Затим идите на Неон СКЛ едитор на Неон контролној табли. Овде можете да налепите СКЛ команде да бисте извршили одређене радње потребне за ваш пројекат. Копирајте и налепите наредбу испод у уређивач да бисте креирали СКЛ табелу са неким обавезним пољима:   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 );  Напомена: Ову команду можете пронаћи у датотеци   у оквиру Нект.јс шаблона који је раније дат.  /sql/user_data.sql  У било ком тренутку можете да проверите одељак   да бисте потврдили да ли је новокреирана табела доступна. Сада када имате те информације, распоредићете своју апликацију на Верцет. То можете да урадите преко Верцеловог веб корисничког интерфејса, али ми ћемо користити Верцел ЦЛИ за овај водич. Табеле  Примена ваше Нект.јс апликације у Верцел  Без губљења много времена, идите на свој терминал и налепите наредбу испод:   npm i -g vercel  Напомена: За кориснике Мац-а понекад можете добити грешку одбијеног приступа; дакле, ставите префикс команди са кључном речи   . sudo  Команда глобално инсталира ЦЛИ, омогућавајући лак приступ ЦЛИ било где на вашој локалној машини.  Следећа ствар коју треба да урадите је да се пријавите на свој Верцел налог користећи ЦЛИ. Да бисте то постигли, налепите наредбу испод у свој терминал:   vercel login  Наставите тако што ћете са листе изабрати свог провајдера за регистрацију за Верцел, извршити аутентификацију и потражити поруку о успеху на страници за потврду.   Затим ћете распоредити свој програм на Верцел користећи наредбу испод:   vercel  Овај процес укључује неколико корака за подешавање ваше имплементације. Да бисте осигурали униформност, пратите изборе на слици испод.   Напомена: Након изградње, можете да проверите примену да бисте потврдили да ли ваша апликација ради како се очекује  Следеће, овај чланак ће показати како да користите функцију Верцел Едге за преузимање корисничких информација из Неон базе података.  Креирање функције Верцел ивице    су побољшане перформансе. То су функције ЈаваСцрипт или ТипеСцрипт које су ефикасније и брже од традиционалног рачунарства без сервера због мањег времена извршавања операција. Верцел Едге функције  Вратите се на свој клонирани пројекат и креирајте датотеку   у директоријуму   . Да бисте покренули ову функцију на ивици, наведите време извођења у бази кода на следећи начин: /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!" }); }  Пре него што наставите, инсталираћете   ,   и пакет   користећи команду: Неон драјвер без сервера Зод склстринг   npm install @neondatabase/serverless zod 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 env add  Пратите упутства да додате име променљиве (препоручујемо да користите име у свом   ) и вредност (вредност треба да буде сама стринг). Затим изаберите окружење у којем желите да користите променљиву између производње, прегледа и развоја. .env.production  Напомена: Касније ћемо истражити гранање, тако да креирање више низова везе није потребно.  Сада када сте додали УРЛ своје базе података у свој пројекат, поново распоредите користећи команду:   Vercel  У следећем одељку ћете морати да пошаљете неке податке у Неон користећи ПОСТ захтев са ваше руте АПИ функције.  Слање података у Неон  Тешко је разумети било који од ових концепата без рада са подацима. Дакле, пошаљимо неке лажне податке у Неон базу података. Овај одељак ће покрити СКЛ ињекцију и превенцију напада на базу података користећи   . Такође ћемо разговарати о гранању базе података, што нам даје већу флексибилност и штити кредибилитет ваше производне гране. Зод  Хајде да истражимо ову   за обраду ХТТП ПОСТ захтева тако што ћемо налепити код испод у    АПИ функцију руковања рутом /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 } ); } }  Ова функција Едге деструктурира вредности обрасца са овим детаљима:   из захтева ЈСОН. Затим потврђујете ваљаност података обрасца помоћу   . Да бисте то урадили, налепите код испод у  member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid Зод /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  Требало би да изгледа као на слици испод када проверите своју базу података.   Глатко и брзо — помоћу тога можете попунити своју Неон базу података. Питање је сада, шта ако је ово производна база података? Није мудро користити тестне податке у производном окружењу. Неон је еволуирао да би нам омогућио да   (слично како ГитХуб гране функционишу) за вашу базу података. Сада можете брзо да тестирате и развијете своју апликацију без икаквих недостатака или страха од контаминације производне базе података. креирамо гране  У следећем одељку, овај чланак ће истражити   . гранање базе података помоћу Неона  Гранање базе података у Неону  Идите на одељак   на Неон конзоли и изаберите   . Морате именовати грану са главном граном као надређеном када је креирате. Једна ствар која нам је привукла пажњу је то што нам је омогућила да податке које смо желели да ставимо у грану по периодима, обезбеђујући већу флексибилност.  Гране Креирај грану  Након креирања гране, добићете стринг за повезивање, баш као што сте урадили приликом креирања пројекта; водите рачуна да га држите на безбедном месту.   Запамтите, ова грана је засебна база података са стварним подацима као главном граном.  Да бисте користили овај нови низ везе са базом података, креирајте   датотеку сличну   датотеци коју сте креирали и подесите акредитив   са низом везе као његовом вредношћу. .env.local .env.production DATABASE_URL  Нект.јс аутоматски открива коју датотеку окружења треба користити током развоја или производње.  Када тестирате табелу гране базе података са новим подацима, можете је упоредити са производном граном.   Можете направити онолико измена на грани колико желите, као што је промена шеме табеле или брисање података.  Закључак  Развој може бити компликован, али са алатима које обезбеђује Неон Постгрес, изградња скалабилних и поузданих апликација је бржа. Овај чланак је пружио детаљан водич за подешавање локалног развојног окружења користећи Неон и његово постављање на Верцел. Покрили смо суштинске аспекте као што су подешавања локалног развоја, процеси примене, гранање и управљање различитим окружењима. Наставите развој апликације са овим подешавањем; волели бисмо да чујемо како иде.  Цео пројекат можете погледати на   . ГитХуб-у

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

Read My Stories

Овај аудио је произведен на оригиналном језику приче!

Предуго; Читати

Make resilience your competitive advantage

Правите веб апликацију? Овај метод га чини бржим, сигурнијим и паметнијим

About Author

КОМЕНТАРИ

ХАНГ ТАГС

ОВАЈ ЧЛАНАК ЈЕ ПРЕДСТАВЉЕН У

Related Stories

Leadership Success Story: Srinath Muralinathan's Transformative Projects at Amazon

Building the Cloud Future: Sreedevi Velagala's Trek in AWS Architecture

Scaling Web Testing with Automation: Srikanth Srinivas’s Digital Strategy Breakthrough

Sravana Kumar Reddy Yeruva’s Fusion Transformation Sets a New Standard in ERP Excellence

Leadership Success Story: Srinath Muralinathan's Transformative Projects at Amazon

Building the Cloud Future: Sreedevi Velagala's Trek in AWS Architecture

Scaling Web Testing with Automation: Srikanth Srinivas’s Digital Strategy Breakthrough

Sravana Kumar Reddy Yeruva’s Fusion Transformation Sets a New Standard in ERP Excellence

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps