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

Оптимизација тока развоја пројекта је важна за бржу и бољу испоруку. У овом чланку ћете истражити како да подесите оптимално локално развојно окружење за Нект.јс пројекат користећи Неон Постгрес и примените га на Верцел .

Нагласак је на најбољим праксама и мишљењима – према томе, чланак ће покрити локални развој и примену, гранање и окружења испитивањем ЦРУД апликације која приказује листу корисничких детаља из базе података.

Детаљније ћемо покрити:

• Постављање Неон Постгрес пројекта за локални развој
• Како да примените Нект.јс пројекат у Верцел користећи Верцел ЦЛИ
• Како да користите функције Верцел едге да побољшате операције током извршавања за бржи одговор на захтеве
• Како заштитити Неон базу података од напада СКЛ ињекције.
• Гранање базе података у Неону.

Предуслови

Захтеви за праћење овог водича су следећи:

• Познавање Нект.јс.
• Неонски налог
• Верцел налог

Склањајући то с пута, хајде да радимо на подешавањима пројекта за Неон и Верцел.

Како поставити Неон Постгрес пројекат

Неон је Постгрес без сервера који раздваја рачунарство и складиштење. Нуди модерне развојне функције као што су аутоматско скалирање, гранање и враћање у тренутку, омогућавајући скалабилан и бржи развој.

Креирајте бесплатан Неон налог ако то још увек треба да урадите. Када завршите, Неон вас преусмерава на страницу за подешавање пројекта, где морате да наведете име пројекта и базе података, верзију Постгреса и регион (препоручујемо да изаберете онај који је близу ваше локације) намењен пројекту.

Неон обезбеђује ЦЛИ алат за интеграцију са вашим локалним окружењем, али овај чланак ће користити Неон преко свог веб интерфејса за одређене операције.

Када креирате свој пројекат, копирајте стринг за повезивање из Неон Дасхбоард интерфејса и налепите га у .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 са низом везе као његовом вредношћу.

Нект.јс аутоматски открива коју датотеку окружења треба користити током развоја или производње.

Када тестирате табелу гране базе података са новим подацима, можете је упоредити са производном граном.

Можете направити онолико измена на грани колико желите, као што је промена шеме табеле или брисање података.

Закључак

Развој може бити компликован, али са алатима које обезбеђује Неон Постгрес, изградња скалабилних и поузданих апликација је бржа. Овај чланак је пружио детаљан водич за подешавање локалног развојног окружења користећи Неон и његово постављање на Верцел. Покрили смо суштинске аспекте као што су подешавања локалног развоја, процеси примене, гранање и управљање различитим окружењима. Наставите развој апликације са овим подешавањем; волели бисмо да чујемо како иде.

Цео пројекат можете погледати на ГитХуб-у .