Kubaka Urubuga? Ubu buryo butuma bwihuta, butekanye, kandi bwenge

Gutezimbere ibikorwa byiterambere byumushinga ni ngombwa kohereza byihuse kandi byiza. Muri iki kiganiro, uzasuzuma uburyo washyiraho ibidukikije byiza byiterambere byumushinga wa Next.js ukoresheje Neon Postgres ukayohereza kuri Vercel .

Ibyibandwaho nibikorwa byiza kandi bitekerezwa - kubwibyo, ingingo izareba iterambere ryaho no koherezwa, ishami, nibidukikije mugusuzuma porogaramu ya CRUD yerekana urutonde rwabakoresha kuva mububiko.

Mubindi bisobanuro, tuzareba:

• Gushiraho umushinga wa Neon Postgres kugirango utere imbere
• Nigute ushobora kohereza umushinga Next.js kuri Vercel ukoresheje Vercel CLI
• Nigute ushobora gukoresha imikorere ya Vercel kunoza imikorere yigihe kugirango igisubizo cyihuse kubisabwa
• Nigute ushobora kurinda ububiko bwa Neon ibitero bya SQL.
• Ishami ryububiko muri Neon.

Ibisabwa

Ibisabwa kugirango ukurikize iki gitabo ni ibi bikurikira:

• Ubuhanga hamwe Ibikurikira.js .
• Konti ya Neon
• Konti ya Vercel

Hamwe nibyo bivuye munzira, reka dukore kumushinga wa Neon na Vercel.

Nigute washyiraho umushinga wa Neon Postgres

Neon ni Postgres idafite seriveri itandukanya kubara no kubika. Itanga iterambere rya kijyambere nka autoscaling, ishami, hamwe nigihe-cyo kugarura, kwemerera iterambere ryihuse kandi ryihuse.

Kora konti ya Neon yubusa niba ukeneye kubikora. Bimaze gukorwa, Neon ikuyobora kurupapuro rwumushinga, aho ugomba gutanga umushinga nizina ryububiko, verisiyo ya Postgres, nakarere (turasaba guhitamo imwe yegereye aho uherereye) igenewe umushinga.

Neon itanga igikoresho cya CLI cyo guhuza ibidukikije byaho, ariko iyi ngingo izakoresha Neon binyuze mumurongo wurubuga kubikorwa bimwe.

Umaze gukora umushinga wawe, kora umurongo uhuza umurongo uva kuri Neon Dashboard ya interineti hanyuma uyishyire muri dosiye .env.production muri umushinga wawe Next.js.

Tuvuze umushinga Next.js, iyi ngingo izakoresha umushinga ukurikira Next.js urimo imbonerahamwe yamakuru kuva ShadcnUI .

Kugirango ubone uyu mushinga, kora ububiko bwububiko bwimashini yaho ukoresheje itegeko.

 git clone https://github.com/muyiwexy/dev_env_hackmamba.git

Umaze gukonjesha ububiko, kora dosiye .env.production kugirango inzu ibe ihindagurika mububiko bukuru bwumushinga hanyuma wandike umurongo wihuza. Igomba kumera gutya:

 DATABASE_URL = 'postgresql://neondb_owner:**************-withered-sea-a5nyklf9.us-east-2.aws.neon.tech/neondb?sslmode=require'

Ibikurikira, komeza kuri Neon SQL mwanditsi muri Neon. Hano, urashobora gushira SQL amategeko kugirango ukore ibikorwa byihariye bikenewe kumushinga wawe. Gukoporora hanyuma wandike itegeko hepfo kuri editor kugirango ukore imbonerahamwe ya SQL hamwe nimirima isabwa:

 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 );

Icyitonderwa: Urashobora kubona iri tegeko muri /sql/user_data.sql muri dosiye ikurikira.js yatanzwe mbere.

Urashobora kugenzura igice cyameza igihe icyo aricyo cyose kugirango wemeze niba imbonerahamwe nshya ihari. Noneho ko ufite ayo makuru, uzohereza porogaramu yawe kuri Vercet. Urashobora kubikora ukoresheje interineti y'abakoresha urubuga rwa Vercel, ariko tuzakoresha Vercel CLI kuriyi nyigisho.

Kohereza porogaramu ikurikira.js kuri Vercel

Utataye umwanya munini, jya kuri terminal yawe hanyuma wandike itegeko hepfo:

 npm i -g vercel

Icyitonderwa: Kubakoresha Mac, ushobora rimwe na rimwe kubona ikosa ryanze kwinjira; bityo, shyiramo itegeko hamwe nijambo ryibanze sudo .

Itegeko rishyiraho CLI kwisi yose, ryemerera kugera kuri CLI ahantu hose mumashini yaho.

Igikurikira gukora nukwinjira kuri konte yawe ya Vercel ukoresheje CLI. Kugirango ubigereho, andika itegeko hepfo muri terminal yawe:

 vercel login

Kurikirana uhitamo Vercel wiyandikishije utanga kurutonde, kwemeza, no gushakisha ubutumwa bwatsinze kurupapuro rwemeza.

Ibikurikira, uzohereza gahunda yawe kuri Vercel ukoresheje itegeko hepfo:

 vercel

Iyi nzira ikubiyemo intambwe nyinshi zo gushiraho gahunda yawe. Kugirango ubone uburinganire, kurikiza amahitamo mumashusho hepfo.

Icyitonderwa: Nyuma yo kubaka, urashobora kugenzura ibyoherejwe kugirango wemeze niba porogaramu yawe ikora nkuko byari byitezwe

Ibikurikira, iyi ngingo irerekana uburyo wakoresha imikorere ya Vercel Edge kugirango ukure amakuru yumukoresha muri base ya Neon.

Gukora imikorere ya Vercel

Imikorere ya Vercel Imikorere niyongera imikorere. Nibikorwa bya JavaScript cyangwa TypeScript bikora neza kandi byihuse kuruta mudasobwa zidafite seriveri kuberako ibikorwa byabo byogukora.

Garuka kumushinga wawe wa clone hanyuma ukore dosiye /api/route.ts mububiko bwa /app . Kugirango ukore iyi mikorere kuruhande, vuga igihe cyagenwe muri code base kuburyo bukurikira:

 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!" }); }

Mbere yo gukomeza, uzashyiraho umushoferi wa Neon udafite seriveri , Zod , na sqlstring ukoresheje itegeko:

 npm install @neondatabase/serverless zod sqlstring

Na none, ugomba kwishyiriraho ubwoko bwa sqlstring nkubwishingizi bwa dev ukoresheje itegeko hepfo.

 npm i --save-dev @types/sqlstring -D

Urashobora kugerageza niba hari ihuriro ryiza kububiko bwawe usimbuza kode muri dosiye ya /api/route.ts hamwe na code iri hepfo:

 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, } ); }

Ugomba kubona igisubizo nkishusho hepfo mugihe winjiye munzira /api muri mushakisha.

Igikurikira cyo gukora nukongeramo ububiko bwububiko bwumugozi kubidukikije bya Vercel. Noneho, ukoresheje Vercel CLI, ongeraho uyu mugozi ukoresheje itegeko:

 vercel env add

Kurikiza ibisobanuro kugirango wongere izina rihinduka (turagusaba gukoresha izina muri .env.production ) nagaciro (agaciro kagomba kuba umurongo ubwacyo). Ibikurikira, hitamo ibidukikije aho ushaka gukoresha impinduka hagati yumusaruro, kureba, niterambere.

Icyitonderwa: Tuzashakisha amashami nyuma, kurema imirongo myinshi ihuza ntabwo ari ngombwa.

Noneho ko wongeyeho data base yawe URL kumushinga wawe, ongera ukoreshe itegeko:

 Vercel

Mu gice gikurikira, uzabona kohereza amakuru kuri Neon ukoresheje icyifuzo cya POST uhereye kumikorere yawe ya API.

Kohereza amakuru kuri Neon

Biragoye kumva kimwe muribi bitekerezo udakoranye namakuru. Noneho, reka twohereze amakuru adasanzwe kuri base ya Neon. Iki gice kizareba inshinge za SQL no gukumira ibitero kuri base ukoresheje Zod . Tuzaganira kandi kumashami yububiko, aduha guhinduka no kurinda kwizerwa kwishami ryumusaruro wawe.

Reka dusuzume imikorere ya API inzira yo gutunganya ibyifuzo bya HTTP POST wanditse kode hepfo muri /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 } ); } }

Iyi mikorere ya Edge isenya indangagaciro zifishi hamwe nibi bisobanuro: member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid kubisabwa JSON. Ibikurikira, wemeza ifishi yamakuru hamwe na Zod . Kugirango ukore ibi, andika kode hepfo muri /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(), });

Kode iri hejuru isobanura igishushanyo gisobanura imiterere namategeko yo kwemeza ikintu cyerekana ifishi yamakuru. Noneho, urashobora gutsinda neza INSERT ikibazo kububiko.

Igomba kumera nkishusho hepfo mugihe ugenzura base yawe.

Byoroheje kandi byihuse - hamwe nibyo, urashobora kwerekana ububiko bwawe bwa Neon. Ikibazo ubu ni iki, bigenda bite niba iyi ari data base yububiko? Ntabwo bihuje n'ubwenge gukoresha amakuru yikizamini mubidukikije. Neon yahindutse kugirango itwemerere gukora amashami (bisa nuburyo amashami ya GitHub akora) kububiko bwawe. Noneho, urashobora kugerageza byihuse no guteza imbere porogaramu yawe nta nkomyi cyangwa ubwoba bwo kwanduza ububiko bwibikorwa.

Mu gice gikurikira, iyi ngingo izasesengura ishami ryububiko hamwe na Neon .

Ishami ryububiko muri Neon

Kujya kumashami igice muri Neon konsole hanyuma uhitemo Kurema ishami . Ugomba kuvuga ishami rifite ishami rikuru nkumubyeyi mugihe uremye. Ikintu cyadushishikaje ni uko byadushoboje gushyira amakuru twifuzaga mu ishami uko ibihe byagiye bisimburana.

Nyuma yo gukora ishami, uzakira umurongo uhuza, nkuko wabikoze mugihe waremye umushinga; menya neza ko ubika ahantu hizewe.

Wibuke, iri shami nububiko butandukanye hamwe namakuru afatika nkishami nyamukuru.

Kugira ngo ukoreshe umurongo mushya wububiko, kora dosiye .env.local isa na .env.production wakoze kandi ushireho ibyangombwa bya DATABASE_URL hamwe numurongo wihuza nkigiciro cyacyo.

Ibikurikira.js ihita imenya dosiye yibidukikije wakoresha mugihe cyiterambere cyangwa umusaruro.

Iyo ugerageje imbonerahamwe yishami ryamakuru hamwe namakuru mashya, urashobora kuyagereranya nishami ribyara umusaruro.

Urashobora kugira byinshi uhindura kumashami nkuko ubishaka, nko guhindura imbonerahamwe yimbonerahamwe cyangwa gusiba amakuru.

Umwanzuro

Iterambere rirashobora kugorana, ariko hamwe nibikoresho byatanzwe na Neon Postgres, kubaka ibipimo binini kandi byizewe birihuta. Iyi ngingo yatanze umurongo urambuye mugushiraho ibidukikije byiterambere byiterambere ukoresheje Neon no kubyohereza kuri Vercel. Twakurikiranye ibintu byingenzi nkibikorwa byiterambere byaho, gahunda yo kohereza, ishami, no gucunga ibidukikije bitandukanye. Komeza iterambere rya porogaramu hamwe niyi mikorere; twifuza kumva uko bigenda.

Urashobora kugenzura umushinga wose kuri GitHub .