განლაგება და იტერაცია

  • განათავსეთ თქვენი MVP რეალურ დროში წარმოებისთვის განკუთვნილ URL-ზე Vercel-ის გამოყენებით
  • დაამატეთ სიჩქარის შეზღუდვა თქვენი API მარშრუტების ბოროტად გამოყენებისგან დასაცავად
  • გაშვების შემდეგ თქვენი ხელოვნური ინტელექტის ფუნქციების მონიტორინგისთვის დააყენეთ სტრუქტურირებული ჟურნალირება
  • გადაამოწმეთ თქვენი აპლიკაციის უსაფრთხოება DevTools-ის გამოყენებით
  • შეაფასეთ თქვენი აპლიკაციის წარმოების მზადყოფნა გაშვებამდელი საკონტროლო სიის გამოყენებით
  • პირდაპირი წარმოების აპლიკაცია: თქვენი MVP განთავსებულია საჯარო HTTPS URL-ზე, რომლის მონახულებაც ნებისმიერს შეუძლია.
  • GitHub საცავში გამართული, გამოცდილი MVP
  • მომხმარებლის ავტორიზაცია შესვლის, რეგისტრაციისა და API მარშრუტის დაცვით 
  • Supabase პროექტი კონფიგურირებული საცავით 
  • მომხმარებლის ტესტირების გამოხმაურება თქვენს აპლიკაციაშია ინტეგრირებული

MVP-დან წარმოებამდე

თქვენი აპლიკაცია მუშაობს. ხალხმა გამოსცადა ის, თქვენ გამოასწორეთ შეცდომები და დაამატეთ მომხმარებლის ავტორიზაცია. თუმცა, ამჟამად, მისი გამოყენება მხოლოდ იმ ადამიანებს შეუძლიათ, რომლებსაც აქვთ თქვენი Codespaces-ის წინასწარი გადახედვის ბმული და ეს ბმული ქრება, როდესაც თქვენი Codespace შეწყვეტს მუშაობას.

ეს განყოფილება თქვენს MVP აპლიკაციას „ჩემს კომპიუტერზე მუშაობს“-დან „ინტერნეტში ნებისმიერს შეუძლია მისი გამოყენება“-ზე გადაჰყავს.

ამ ერთეულის განმავლობაში, ჩვენ გამოვიყენებთ TutorMatch-ს, როგორც სახელმძღვანელო მაგალითს, იგივე რეპეტიტორობის რეკომენდაციის აპლიკაციას, რომელიც სხვა გაკვეთილებში გამოვიყენეთ. თქვენ ნახავთ, თუ როგორ გადადის TutorMatch კოდურ სივრცეებში მუშაობისგან ცოცხალ URL-ზე, რომელზეც წვდომა ყველას შეუძლია, შემდეგ კი თითოეული ნაბიჯი თქვენი საკუთარი MVP-სთვის იქნება ადაპტირებული.

სამი რამ იცვლება, როდესაც თქვენი აპლიკაცია კოდური სივრციდან საჯარო URL-ზე გადადის:

ხილვადობა

თქვენი აპლიკაცია საჯარო ხდება URL-ის საშუალებით. ნებისმიერს, ვინც აღმოაჩენს ან მიიღებს URL-ს, შეუძლია სცადოს მისი გამოყენება, არა მხოლოდ თქვენს გუნდს.

მდგრადობა

თქვენი აპლიკაცია უნდა მუშაობდეს თქვენი ხელით ჩართვის გარეშე. Codespaces-ში, ტესტირებისას თქვენ ხელით რთავთ სერვერებს, მაგრამ რეალურ მომხმარებლებთან ერთად წარმოებაში, ჰოსტინგის პლატფორმა ავტომატურად ინარჩუნებს თქვენს აპლიკაციას აქტიურ რეჟიმში.

ღირებულება

ყველა AI API გამოძახება ძვირი ღირს. Codespaces-ში თქვენ აკონტროლებდით, ვინ იყენებდა თქვენს აპლიკაციას (ძირითადად თქვენ). საჯარო URL-ის შემთხვევაში, მომხმარებლის და API-ის ავტორიზაციის არსებობის შემთხვევაშიც კი, თქვენ გჭირდებათ დამატებითი დაცვა ბოროტად გამოყენებისგან.

განლაგების პლატფორმის არჩევა

თქვენ აპლიკაციას Codespaces-ში ამუშავებთ — განვითარების გარემოში, რომელზეც წვდომა მხოლოდ თქვენ გაქვთ. ამ აქტივობაში თქვენ მას Vercel- ზე განათავსებთ, პლატფორმაზე, რომელიც ვებ აპლიკაციებს მასპინძლობს და მუდმივ საჯარო URL-ს გაძლევთ.

ვებ-აპლიკაციის განლაგების მრავალი გზა არსებობს. აი, როგორ შევადაროთ ყველაზე გავრცელებული ვარიანტები MVP-ის განლაგების მსურველებს:

პლატფორმა

დაყენების სირთულე

უფასო დონე

საუკეთესოა

ვერსელი

მარტივი (უკავშირდება GitHub-ს)

100 გბ გამტარუნარიანობა, 100 საათი სერვერის გარეშე

React/Next.js აპლიკაციები API მარშრუტებით

Google AI Studio-ს დანერგვა

ძალიან მარტივია (ერთი დაწკაპუნებით)

საჭიროებს Google Cloud-ის ანგარიშსწორებას (ახალი მომხმარებლებისთვის 300 აშშ დოლარი უფასო კრედიტი)

აპლიკაციები, რომლებიც მთლიანად AI Studio-შია აგებული

საყვარელი / ბოლტი

მარტივი (ჩაშენებული ჰოსტინგი)

შეზღუდულია, განსხვავდება პლატფორმის მიხედვით

სწრაფი პროტოტიპები GitHub-ის გარეშე

Netlify

მარტივი (უკავშირდება GitHub-ს)

100 გბ გამტარუნარიანობა

სტატიკური საიტები, უფრო მარტივი ბექენდები

რკინიგზა / რენდერი

საშუალო

შეზღუდული უფასო დონე

სრული სტეკის აპლიკაციები მონაცემთა ბაზებით

ამ პროგრამისთვის თქვენ გამოიყენებთ Vercel-ს . აი, რატომ:

თქვენი უმეტესობისთვის, youapp-ს აქვს ბექენდი და Vercel-ი ამას კარგად უმკლავდება. თქვენი MVP არ არის მხოლოდ სტატიკური გვერდების ნაკრები - მას აქვს სერვერის მხარეს API მარშრუტები, რომლებიც იძახებენ Groq-ს ან სხვა LLM API-ებს, უკავშირდებიან Supabase-ს და შესაძლოა გამოიძახონ სხვა API-ებიც. Vercel-ის სერვერის გარეშე ფუნქციები ავტომატურად ამუშავებენ ბექენდის კოდს. Netlify-ის მსგავსი პლატფორმები კარგად მუშაობს უფრო მარტივი აპლიკაციებისთვის, მაგრამ სერვერის მხარეს ლოგიკისთვის მეტ კონფიგურაციას საჭიროებს.

ის პირდაპირ უკავშირდება GitHub-ს. თქვენი კოდი უკვე GitHub-შია. Vercel იმპორტს უკეთებს თქვენს რეპოზიტორს და ავტომატურად ხელახლა განათავსებს მას ყოველ ჯერზე, როცა ცვლილებებს განახორციელებთ — იგივე Git სამუშაო პროცესი, რომელსაც მთელი ამ პროგრამის განმავლობაში იყენებდით.

საკრედიტო ბარათი საჭირო არ არის. Vercel-ის უფასო ვერსიისთვის მხოლოდ GitHub ანგარიში გჭირდებათ, რომელიც უკვე გაქვთ.

Vercel ავტომატურად ახორციელებს წარმოების დაყენებას და უსაფრთხოებას. დანერგვის მრავალი ასპექტი მოითხოვს მნიშვნელოვან დაყენებას. Vercel ავტომატურად ახორციელებს ამ დაყენების მოთხოვნების დიდ ნაწილს.

Netlify მეორე ადგილზეა და კარგი ალტერნატივაა, თუ ოდესმე სხვა პლატფორმის მოსინჯვა მოგინდებათ. როგორც Vercel, ასევე Netlify დაკავშირებულია GitHub-თან, ავტომატურად ვითარდება push-ზე და გთავაზობთ უამრავ უფასო იარუსს. განსხვავება ისაა, რომ Vercel ამუშავებს backend API მარშრუტებს ყუთიდან ამოღებისთანავე, ხოლო Netlify მოითხოვს თქვენი სერვერის კოდის რესტრუქტურიზაციას მათ სპეციფიკურ „Netlify ფუნქციების“ ფორმატში. თქვენი MVP აპლიკაციისთვის Vercel არის უფრო მარტივი გზა და ასევე ყველაზე ყოვლისმომცველი.

რა მოხდება, თუ ჩემი აპლიკაცია სხვა ჩარჩოებს იყენებს?

Next.js: თუ თქვენი აპლიკაცია Next.js პროექტია, Vercel შექმნილია Next.js-ის შემქმნელების მიერ, ამიტომ ის მაინც შესანიშნავი ვარიანტია.

Lovable ან Bolt: ამ პლატფორმებს აქვთ საკუთარი ჰოსტინგი და განლაგება. შესაძლოა, თქვენი აპლიკაცია უკვე ჩართული იყოს მათ ინფრასტრუქტურაში. ჰკითხეთ თქვენს მწვრთნელს, გადახვიდეთ თუ არა Vercel-ზე, თუ დარჩეთ პლატფორმის ჩაშენებულ ჰოსტინგზე.

Python (Flask, Streamlit, FastAPI): Vercel-ის უფასო დონე არ უჭერს მხარს Python-ის ბექენდებს. ჰკითხეთ თქვენს მწვრთნელს Railway-ის ან Render-ის შესახებ, როგორც ალტერნატიული პლატფორმებისა. Railway ( railway.app ) გთავაზობთ უფასო დონეს, რომელიც მხარს უჭერს Python-ს — დააკავშირეთ თქვენი GitHub საცავი და Railway დანარჩენს გაუმკლავდება. ამ განყოფილებაში მოცემული კონცეფციები — გარემოს ცვლადები, მონიტორინგი, შეცდომების დამუშავება — კვლავ ძალაშია, მაგრამ პლატფორმის სპეციფიკური ნაბიჯები განსხვავებული იქნება.

რას ამუშავებს Vercel

Vercel-ი ინფრასტრუქტურასთან დაკავშირებული რთული სამუშაოების დიდ ნაწილს ავტომატურად აგვარებს. პასუხისმგებლობები შემდეგნაირად ნაწილდება:

ვერსელი

  • თქვენი აპლიკაციის უსაფრთხოების უზრუნველყოფა HTTPS-ის (დაშიფრული კავშირების) მეშვეობით
  • მავნე ტრაფიკის დაბლოკვა, სანამ ის თქვენს აპლიკაციამდე მიაღწევს
  • თქვენი აპლიკაციის სწრაფი გახადეთ მომხმარებლებისთვის მთელი მსოფლიოს მასშტაბით
  • თქვენი აპლიკაციის 24/7 მუშაობა ხელით ჩართვის გარეშე

შენ

  • შეზღუდეთ, თუ რამდენად ხშირად შეუძლიათ მომხმარებლებს თქვენი ხელოვნური ინტელექტის ფუნქციის გამოყენება. შეზღუდვების გარეშე, ერთ მომხმარებელს შეეძლო ასობით ძვირადღირებული ხელოვნური ინტელექტის ზარის განხორციელება.
  • შეცდომის შესახებ მოსახერხებელი შეტყობინებების ჩვენება. ამის გარეშე, მომხმარებლები ხედავენ დამაბნეველ ტექნიკურ შეცდომებს, როდესაც რამე გაფუჭდება.
  •  

Codespaces- ში, თქვენ შეიძლება გაუშვათ თქვენი frontend და backend, როგორც ორი ცალკეული პროცესი:

  1. ფრონტენდ სერვერი , სავარაუდოდ React
  2. ბექენდ სერვერი , სავარაუდოდ, Express

ეს არის ჩვეულებრივი განვითარების კონფიგურაცია, რომელიც კარგად მუშაობს შექმნისა და გამართვისთვის.

თუმცა, Vercel GitHub-ის კოდური სივრცეებისგან განსხვავებულად მუშაობს. ის არ მართავს მუდმივ Express სერვერს. სამაგიეროდ, ის ორ რამეს აკეთებს:

  1. თქვენი ფრონტ-ენდ ფაილები (HTML, CSS, JavaScript npm run build-დან) მოწოდებულია Vercel-ის გლობალური CDN-ის მიერ. CDN (კონტენტის მიწოდების ქსელი) არის მთელ მსოფლიოში გავრცელებული სერვერების ქსელი, რომელიც ინახავს თქვენი აპლიკაციის სტატიკური ფაილების - HTML, CSS, JavaScript, სურათების - ასლებს.

Vercel ეძებს მათ build output დირექტორიაში (მაგალითად, dist/). თქვენი Vite dev სერვერი და ნებისმიერი express.static() კოდი არ გამოიყენება წარმოებაში — Vercel-ის CDN მთლიანად ცვლის მათ. ეს ნორმალური და მოსალოდნელია.

  1. თქვენი API მარშრუტები (მაგალითად, /api/recommendations) მუშაობს როგორც სერვერის გარეშე ფუნქციები , რომლებიც თავიდან ირთვება თითოეული მოთხოვნისთვის.

იმისათვის, რომ ეს იმუშაოს, Vercel-ს სჭირდება თქვენი Express აპლიკაცია ფაილიდან ექსპორტირებული და Vercel-ისთვის მის პოვნაში განთავსებული. ამას პირველივე აქტივობებში დააყენებთ მცირე კონფიგურაციის ნაბიჯის მეშვეობით.

თქვენი არსებული კოდი დიდ ცვლილებებს არ საჭიროებს, ამიტომ ნუ ღელავთ. თქვენ ამატებთ განლაგების კონფიგურაციის ფენას და არა აპლიკაციის ხელახლა წერას.

დასასრულ, თქვენ გექნებათ ცოცხალი URL, რომლის გაზიარებაც შეგიძლიათ თქვენს მეგობრებს, ოჯახის წევრებს და პოტენციურ მომხმარებლებსაც კი.

აქტივობა 1

მოემზადეთ თქვენი აპლიკაციის Vercel-ის გამოყენებით განსათავსებლად

სავარაუდო დრო: 30 წუთი

  1. გადადით GitHub-ზე და გადადით თქვენს MVP საცავში.
  2. განლაგებამდე წინა ერთეულებიდან ყველა თქვენი ნამუშევარი უნდა გქონდეთ გაერთიანებული მთავარ ბლოკში. გააერთიანეთ ყველა ღია, დადასტურებული ფილიალი. 
  3. დარწმუნდით, რომ მთავარ ფილიალში ხართ.
  4. თუ თქვენი მთავარი ფილიალისთვის კოდის სივრცე არ გაქვთ, დააწკაპუნეთ „კოდზე“ და შემდეგ „ძირითად ფილიალზე კოდის სივრცის შექმნა“ . შესაძლოა, სხვა ფილიალებისთვის არსებული კოდის სივრცე გქონდეთ, მაგრამ მთავარი ფილიალიდან ახალი გახსენით.
  5. დაელოდეთ Codespace გარემოს ჩატვირთვას.

შენიშვნა: წარსულში, ჩვენ ცალსახად ვახდენდით ჩვენი რეპოზიტორის განახლებას ახალ ფილიალში. მთავარი ფილიალის განახლება აქ განზრახულია, რადგან Vercel აკონტროლებს მთავარ ფილიალში ავტომატურ განლაგებას და ამ კონკრეტულ შემთხვევაში მისაღებია უშუალოდ მთავარ ფილიალზე შესრულებული მოსამზადებელი სამუშაოები, რადგან ჩვენ არ ვცვლით აპლიკაციის ლოგიკას, უბრალოდ ვამატებთ კონფიგურაციის ფაილებს.

JavaScript-ს ფაილებისთვის კოდის ერთმანეთთან გასაზიარებლად ორი განსხვავებული სისტემა აქვს: CommonJS და ES Modules. CommonJS უფრო ძველი სისტემაა, რომელიც Node.js-ისთვის შეიქმნა, როდესაც JavaScript მხოლოდ სერვერებზე მუშაობდა. ES Modules უფრო ახალი სტანდარტია, რომელიც მუშაობს როგორც ბრაუზერებში, ასევე Node.js-ში და ახლა რეკომენდებული მიდგომაა.
თქვენს Express სერვერზე ექსპორტის კოდი უნდა შეესაბამებოდეს თქვენს პროექტში გამოყენებულ სისტემას — export default app ES Modules-ისთვის ან module.exports = app CommonJS-ისთვის . არასწორი კოდის გამოყენება განლაგებას დააზიანებს.

ამის ცოდნა დაგეხმარებათ Copilot-ს კოდის განახლების მოთხოვნის პოვნაში.

აი, როგორ უნდა გითხრათ:

  1. შეამოწმეთ თქვენი package.json ფაილში შემდეგი ველი: json”type”: “module”
    თუ ეს ხაზი არსებობს, თქვენ იყენებთ ES მოდულებს.
  2. თუ ის არ არის ან ამბობს „type“: „commonjs“ , თქვენ იყენებთ CommonJS-ს .
  3. შემოწმების კიდევ ერთი გზაა იმპორტის ოპერატორები ზედა ნაწილში. server.js.
    • ES მოდულები ასე გამოიყურება:
      ექსპრესის იმპორტი „ექსპრესიდან“
      dotenv-ის იმპორტი 'dotenv'-დან
    • CommonJS ასე გამოიყურება:
      const express = require('გამოხატვა')
      const dotenv = require('dotenv')
  4. დიდი ალბათობით, თქვენი კოდის ბოლოში ექსპორტის ოპერატორიც იქნება:
    • ES მოდულები:
      ნაგულისხმევი აპლიკაციის ექსპორტი
      CommonJS:
      module.exports = აპლიკაცია

შეამოწმეთ და გაითვალისწინეთ, რომელ სტანდარტს იყენებთ.

რადგან თქვენს აპლიკაციას, სავარაუდოდ, GitHub Codespace გარემოში ამუშავებთ, მას, სავარაუდოდ, ორი ცალკეული პროცესი ექნება - frontend-ისა და backend-ისთვის. 

ერთი React-ის ფრონტენდისთვის (Vite) და მეორე Express-ის ბეკენდისთვის. 

ვერსელს განსხვავებული სტრუქტურა სჭირდება.

  • ემსახურება თქვენს მიერ აშენებულ ფრონტენდ ფაილებს CDN-დან.
  • ასრულებს თქვენს Express API მარშრუტებს სერვერის გარეშე ფუნქციების სახით.

კარგი ამბავი ის არის, რომ ეს გადასვლა ძირითადად კონფიგურაციის ფაილების და კოდის რამდენიმე ხაზის დამატებას გულისხმობს. თქვენი არსებული აპლიკაციის ლოგიკა იგივე რჩება.

გახსენით Copilot Chat თქვენს Codespace-ში და გამოიყენეთ ამ შენიშვნის მსგავსი რამ:

თქვენ მეხმარებით ჩემი Express.js + React აპლიკაციის Vercel-ზე განსათავსებლად მომზადებაში.

მიზანი: ჩემი პროექტის კონფიგურაცია ისე, რომ Vercel-ს შეეძლოს ფრონტენდის მომსახურება და backend API მარშრუტების გაშვება სერვერის გარეშე ფუნქციების სახით.

ჩემი აპლიკაცია ამჟამად კოდურ სივრცეებში ორი ცალკეული პროცესის სახით მუშაობს.

ტერმინალი 1 React-ის ფრონტენდს Vite-ის საშუალებით მართავს (npm run dev). ტერმინალი 2 Express-ის ბექენდს (npm run dev) ცალკე პორტზე მართავს.

ვახორციელებ განლაგებას Vercel-ში, რომელიც აწყობის გამომავალი სტატიკურ ფაილებს ემსახურება და Express-ს სერვერულ ფუნქციად გარდაქმნის.

შეიტანეთ ეს ცვლილებები:

  1. სერვერის ფაილი: გადაიტანეთ ჩემი Express სერვერის ფაილი [server.js ან მსგავსი] api/ დირექტორიაში და საჭიროების შემთხვევაში შეცვალეთ მისი სახელი index.js-ით. ფაილის ბოლოს დაამატეთ: [if ES_MODULES: export default app ან COMMONJS: module.exports = app]. შეინახეთ არსებული app.listen() ლოკალური შემუშავებისთვის.
  1. VERCEL CONFIG: შექმენით vercel.json ფაილი პროექტის root-ში შემდეგი კომბინაციით:

   {

     „გადაწერს“: [

       { “source”: “/api/(.*)”, “destination”: “/api” }

     ]

   }

  1. PACKAGE.JSON: დარწმუნდით, რომ ეს სკრიპტები არსებობს:
    • „dev“-მა უნდა იმუშაოს როგორც frontend-ზე, ასევე backend-ზე ლოკალური განვითარებისთვის (ერთდროულად გამოყენებაც კარგია)
    • “build”: “vite build” (compiles the React frontend into /dist)
      Add an “engines” field: { “node”: “>=18.0.0” }
      Make sure all backend dependencies (express, cors, dotenv, [your AI SDK]) are in the root package.json, not in a separate server package.json.
  1. URL-ის შემოწმება: ყველა წინა ფაილში მოძებნეთ მყარი კოდირებული URL-ები, რომლებიც შეიცავს localhost-ს, github.dev-ს ან 127.0.0.1-ს. ჩაანაცვლეთ ფარდობითი გზებით, როგორიცაა /api/recommendations, http://localhost:3000/api/recommendations-ის ნაცვლად.
  1. VITE PROXY: vite.config.ts-ში (ან vite.config.js-ში) დაამატეთ პროქსი, რათა ლოკალურმა დეველოპერმა კვლავ იმუშაოს ფარდობით URL-ებთან:

   server: {

     proxy: {

       ‘/api’: { target: ‘http://localhost:3001’, changeOrigin: true }

     }

   }

თითოეული განახლებისთვის, მაჩვენე, რა შეცვალე.

  1. გადახედეთ, თუ რას გენერირებს Copilot. აი, რას აკეთებს თითოეული ცვლილება და რატომ არის ის მნიშვნელოვანი.

Vercel ეძებს სერვერის გარეშე ფუნქციებს api/ დირექტორიაში. თქვენი Express სერვერის იქ გადატანით და export default app-ის (ან module.exports = app ) დამატებით, Vercel-ს შეუძლია თქვენი Express აპლიკაციის იმპორტი და მისი სერვერის გარეშე ფუნქციის სახით გაშვება.

თქვენი app.listen() ხაზი რჩება — Vercel უგულებელყოფს მას წარმოების პროცესში, მაგრამ ის მაინც გჭირდებათ კოდურ სივრცეებში ლოკალური შემუშავებისთვის.

თქვენი სერვერის ფაილი უნდა დასრულდეს დაახლოებით ასე:

				
					// Local development — Vercel ignores this in production
app.listen(process.env.PORT || 3000, () => {
  console.log(`Server running on http://localhost:${process.env.PORT || 3000}`);
});

// Export for Vercel serverless deployment
export default app;

ეს პატარა კონფიგურაციის ფაილი Vercel-ს ეუბნება, თუ როგორ უნდა გადაამისამართოს მოთხოვნები. /api/*- ზე გაგზავნილი ყველა მოთხოვნა თქვენს Express აპლიკაციაში გადადის. ყველაფერი დანარჩენი კი აგებულ წინა პლანზე გადადის. მთელი ფაილი მხოლოდ 5 სტრიქონისგან შედგება.

				
					{
  "rewrites": [
    { "source": "/api/(.*)", "destination": "/api" }
  ]
}

თუ თქვენს ფრონტენდს აქვს fetch('http://localhost:3000/api/recommendations') , ეს ვერცელზე არ იმუშავებს, რადგან localhost:3000 არ არსებობს.

Copilot-მა ის უნდა შეცვალოს ფარდობითი გზით, როგორიცაა fetch('/api/recommendations') . ბრაუზერი წყვეტს გზას იმ დომენის მიხედვით, რომელიც მასპინძლობს გვერდს, იქნება ეს Codespaces თუ თქვენი .vercel.app URL წარმოებაში.

თქვენს წინა პლანზე ფარდობითი URL-ების არსებობის შემთხვევაში, ლოკალური შემუშავების დროს, თქვენ გჭირდებათ გზა /api მოთხოვნების თქვენს Express სერვერზე გადასამისამართებლად. Vite პროქსი ამას ავტომატურად აკეთებს.

  • როდესაც თქვენი ფრონტენდი api/recommendations- ზე მოთხოვნას აკეთებს, Vite მას http://localhost:3000/api/recommendations-ზე გადაამისამართებს, სადაც თქვენი Express სერვერი მუშაობს.
  • Vercel-ზე წარმოებისას, vercel.json- ის გადაწერები ამას აგვარებს.

package.json ფაილში რამდენიმე ცვლილებაა საჭირო.

  • სკრიპტები — სერვერის სკრიპტის გზა განახლებულია server/server.js- დან api/index.js- მდე და შესაძლოა, დეველოპერის სკრიპტიც განახლდეს ახალი გზის ასახვის მიზნით.
  • დამოკიდებულებები — ყველა backend დამოკიდებულება, რომელიც ადრე server/package.json- ში იყო, უნდა გადავიდეს root package.json- ში, რადგან ცალკე სერვერის პაკეტი აღარ არსებობს.
  • „ ტიპი“: „მოდული“ — შესაძლოა დამატებული იყოს ან უკვე არსებობდა
  • “engines” — { “node”: “>=18.0.0” } added for Vercel compatibility

მაგალითად, ასე უნდა გამოიყურებოდეს სკრიპტების განყოფილება:

				
					"scripts": {
  "dev": "concurrently \"vite\" \"node api/index.js\"",
  "build": "vite build",
  "preview": "vite preview",
  "server": "node api/index.js"
},

ყურადღება მიაქციეთ ხაზს „build“ :. ეს შეიძლება შეიცვალოს თქვენი პარამეტრების მიხედვით:

  • React + Vite (ყველაზე გავრცელებული Copilot-დან) – „build“: „vite build“
  • React Create React App-ის გამოყენებით – „build“: „react-scripts build“
  • Vanilla JS (ფრეიმვორკის გარეშე) – აწყობის ეტაპი არ არის საჭირო

 

აი, რა გააკეთა GitHub Copilot-მა:

დაგეხმარებით თქვენი Express.js + React აპლიკაციის Vercel-ის განსათავსებლად მომზადებაში. ნება მომეცით, დავიწყო თქვენი პროექტის სტრუქტურის შესწავლით, რათა გავიგო მიმდინარე კონფიგურაცია.

შესანიშნავია! თქვენი პროექტის სტრუქტურა განვიხილე tutormatch-app-gemini-auth-working-ში . შესანიშნავი ამბავი: თქვენი აპლიკაცია უკვე სრულად არის კონფიგურირებული Vercel-ის განლაგებისთვის . ყველა 5 საჭირო ცვლილება უკვე შეტანილია!

მიმდინარე კონფიგურაციის შეჯამება ✅

1. სერვერის ფაილი ✅

თქვენი index.js სწორად არის დაყენებული:

  • მდებარეობს api/ დირექტორიაში, Vercel-ის მოთხოვნის შესაბამისად.
  • აპლიკაცია უკვე ექსპორტირებულია ექსპორტის ნაგულისხმევი აპლიკაციით (ES მოდულები)
  • მოიცავს app.listen(PORT)-ს ადგილობრივი განვითარებისთვის პორტ 3001-ზე
  • ყველა Express მარშრუტი (მათ შორის /api/recommendations და /api/health) კონფიგურირებულია.

2. ვერსელის კონფიგურაცია ✅

თქვენი vercel.json სწორად არის კონფიგურირებული:

ეს Vercel-ს ეუბნება, რომ ყველა /api/* მოთხოვნა სერვერულ ფუნქციაზე გადაამისამართოს.

3. PACKAGE.JSON ✅

თქვენს package.json ფაილს აქვს ყველა საჭირო სკრიპტი და კონფიგურაცია:

  • ✅ „dev“ სკრიპტი ერთდროულად გამოიყენება როგორც ბექენდის, ასევე ფრონტენდის გასაშვებად
  • ✅ React-ის ფრონტენდისთვის „build“ დაყენებულია „vite build“-ზე
  • ✅ „ძრავების“ ველი მოითხოვს კვანძს >= 18.0.0
  • ✅ ყველა ბექენდ დამოკიდებულება (express, cors, dotenv, @google/genai) root package.json- შია
  • ✅ ერთდროულად სწორად არის კონფიგურირებული npm run სერვერისა და npm run კლიენტის ერთად გასაშვებად

4. URL-ის შემოწმება ✅

მყარი კოდირებული URL-ები ვერ მოიძებნა. თქვენი წინა მხარე სწორად იყენებს:

  • ფარდობითი გზა : fetch('/api/recommendations', …) App.tsx- ში
  • ეს მუშაობს როგორც ლოკალურ განვითარებაზე (პროქსირებადი), ასევე წარმოებაზე (Vercel-ის სერვერის გარეშე)

5. VITE პროქსი ✅

თქვენს vite.config.ts-ს პროქსი კონფიგურირებული აქვს:

ეს უზრუნველყოფს, რომ npm-ით dev-ის გაშვებით ლოკალური შემუშავების დროს, /api-ზე მოთხოვნები პროქსირებული იყოს Express ბექენდზე.

რას ნიშნავს ეს

თქვენი პროექტი ახლავე მზადაა Vercel-ზე განსათავსებლად ! როდესაც Vercel-ზე გადაიტანთ:

  1. Vite თქვენს React-ის ფრონტენდს /dist-ში ააშენებს.
  2. Vercel მოემსახურება სტატიკურ ფაილებს
  3. ყველა /api/* მოთხოვნას დაამუშავებს თქვენი Express ფუნქცია index.js- ში.
  4. თქვენი Supabase-ის ავთენტიფიკაცია და Gemini API-ის გამოძახებები შეუფერხებლად იმუშავებს.

ლოკალური განვითარება : გაუშვით npm run dev და როგორც frontend (პორტი 5173), ასევე backend (პორტი 3000) ავტომატურად ჩაირთვება, Vite proxy კი API გამოძახებებს დაამუშავებს.

რადგან თქვენ პოტენციურად ახალ კოდურ სივრცეს პირდაპირ მთავარი ტოტიდან ამუშავებთ, შესაძლოა დაკარგოთ .env ფაილი, რომელიც თითოეული კოდურ სივრცეში ლოკალურია. კოდურ სივრცეებში ტესტირებისთვის, ეს გარემოს ცვლადები root .env ფაილში უნდა იყოს დაყენებული.

  1. შეამოწმეთ თქვენი კოდი ყველა VITE ცვლადისთვის. ისინი უნდა ყოფილიყო თქვენს root .env ფაილში, თქვენი დეველოპერის კოდის სივრცეში.
  2. დაამატეთ .env ფაილი root საქაღალდეში და ხელახლა დაამატეთ ისინი. ჩვენთვის ესენი იყო:
				
					VITE_SUPABASE_URL=
VITE_SUPABASE_KEY=
VITE_DEVELOPMENT_URL=

ტესტირებისთვის VITE_DEVELOPMENT_URL უნდა იყოს დაყენებული თქვენი კოდის სივრცის github.dev URL-ზე. როდესაც Vercel-ის კონფიგურაციას დაიწყებთ, განაახლებთ თქვენი Vercel აპლიკაციის URL-ზე.

  1. შეამოწმეთ, რომ ყველა backend env ცვლადი თქვენს Codespace secrets-შია. თქვენ არ შეგიძლიათ მათი root .env საქაღალდეში დამატება, რადგან ისინი გამოაშკარავდება.
  1. ინსტალაციის დამოკიდებულებები: npm install (ინსტალაცია ერთდროულად და backend დამოკიდებულებები)
  2. npm run dev გაუშვებს როგორც frontend, ასევე backend სერვერებს.
  3. ტესტი:
    • გვერდის ჩატვირთვა
    • შესვლა მუშაობს
    • ხელოვნური ინტელექტის ფუნქცია პასუხობს
  4. თუ ყველაფერი ლოკალურად მუშაობს, განლაგებისთვის მზად ხართ.
  5. განაგრძეთ LLM-თან მუშაობა, რათა დარწმუნდეთ, რომ ყველაფერი მზად არის Vercel-ის განსათავსებლად.
  1. დააკოპირეთ ცვლილებები და გადადით მთავარ ფილიალში.
  2. გააერთიანეთ ყველა ცვლილება, რათა თქვენი მთავარი ფილიალი განახლებული იყოს Github-ში.

ახლა, როდესაც თქვენი კოდი განაახლეთ Vercel პლატფორმაზე სამუშაოდ, დანერგვის დროა!

აქტივობა 2

განათავსეთ თქვენი აპლიკაცია Vercel-ზე

სავარაუდო დრო: 30 წუთი

  1. გადადით vercel.com-ზე.
  2. დააწკაპუნეთ რეგისტრაციაზე.
  3. აირჩიეთ „გაგრძელება GitHub-ით“ . ეს Vercel-ს იმავე GitHub ანგარიშთან დააკავშირებს, სადაც თქვენი MVP კოდია განთავსებული.
  4. მიანიჭეთ Vercel-ს თქვენს GitHub საცავებზე წვდომის ავტორიზაცია.

საკრედიტო ბარათი საჭირო არ არის. უფასო ჰობის დონე საკმარისზე მეტია თქვენი MVP-სთვის.

  1. Vercel-ის დაფიდან დააჭირეთ ღილაკს „ ახლის დამატება“ → „პროექტი“
import screenshot in vercel dashboard
  1. იპოვეთ თქვენი MVP საცავი სიაში და დააჭირეთ ღილაკს „იმპორტი“.

თუ GitHub-თან ჯერ სათანადოდ არ დაგიკავშირებიათ, გააგრძელეთ და მიჰყევით მათ დოკუმენტაციაში მოცემულ ნაბიჯებს . GitHub პროექტების განლაგება Vercel-ის გამოყენებით.

choosing github repository in vercel dashboard

Vercel ავტომატურად ამოიცნობს თქვენი პროექტის ტიპს და ავსებს შექმნის პარამეტრებს

  1. Vercel, როგორც წესი, სწორია, მაგრამ დარწმუნდით, რომ პარამეტრები თქვენს პროექტს შეესაბამება.

თუ თქვენს პროექტს აქვს…

ჩარჩოს წინასწარ დაყენება

ბრძანების შექმნა

გამომავალი დირექტორია

vite.config.ts ან vite.config.js

vite.config.ts ან vite.config.js

Vite-ის ბილდი

რაიონი

next.config.js ან next.config.ts

Next.js

შემდეგი აწყობა

შემდეგი

server.js + public/ საქაღალდე

სხვა

(ცარიელი ან მორგებული)

საჯარო

react-სკრიპტები package.json-ში

React აპლიკაციის შექმნა

რეაქტიული სკრიპტების აწყობა

აშენება

ასე გამოიყურება ჩვენი TutorMatch აპლიკაციისთვის:

  1. თუ Vercel-მა არასწორი ჩარჩო აღმოაჩინა, გადასაჭრელად დააწკაპუნეთ Build & Output Settings-ზე .

    Build Command და Output Directory ორი ყველაზე მნიშვნელოვანი ველია. თუ არ ხართ დარწმუნებული, შეამოწმეთ, თუ რას გამოიმუშავებს npm run build ლოკალურად — გაშვების შემდეგ მოძებნეთ dist/, build/ ან .next/ საქაღალდე.

ეს ყველაზე მნიშვნელოვანი ნაბიჯია. თქვენს აპლიკაციას ფუნქციონირებისთვის API გასაღებები სჭირდება და ისინი Vercel-ში უნდა იყოს დაყენებული და არა თქვენს კოდში.

  1. პროექტის დაყენების ეკრანზე დააწკაპუნეთ გარემოს ცვლადებზე.
  2. თქვენ გაქვთ ორი ვარიანტი:
    • იმპორტი .env – დააწკაპუნეთ „იმპორტი .env ფაილი“-ზე და აირჩიეთ თქვენი ლოკალური .env ფაილი. Vercel ავტომატურად კითხულობს ყველა გასაღები-მნიშვნელობის წყვილს.
    • ხელით დამატება – აკრიფეთ თითოეული გასაღების სახელი და ჩასვით მისი მნიშვნელობა ერთდროულად.
  3. დარწმუნდით, რომ დაამატეთ ყველა გასაღები, რომელიც თქვენს აპლიკაციას სჭირდება, როგორც წინა, ასევე უკანა გარემოს ცვლადები!

    კოდურ სივრცეებში თქვენი გასაღებები .env ან GitHub Secrets ფაილში იყო განთავსებული. წარმოებაში კი ისინი Vercel-ის გარემოს ცვლადების პარამეტრებშია განთავსებული. ეს იგივე კონცეფციაა, სხვა ადგილას.

    ეს არის ის, რასაც ის ჩვენთვის ეძებს:

შენიშვნა: როდესაც შემდგომ ერთეულებში გადახდების დამატებას ისწავლით, თქვენი Stripe გასაღებების დასამატებლად ამ ეკრანზე დაბრუნება დაგჭირდებათ. ამ ეტაპზე, მხოლოდ ის გასაღებები გჭირდებათ, რომლებიც შემუშავების დროს დაამატეთ.

  1. დააწკაპუნეთ განლაგებაზე .

    Vercel იღებს თქვენს კოდს GitHub-დან, აყენებს დამოკიდებულებებს, ქმნის თქვენს აპლიკაციას და ანიჭებს URL-ს. ამას 1-3 წუთი სჭირდება. თქვენ შეგიძლიათ რეალურ დროში უყუროთ შექმნის ჟურნალებს.
congralations message in vercel

დასრულების შემდეგ, Vercel-მა შეიძლება გაჩვენოთ დადასტურების ეკრანი ბმულით Vercel-ის საინფორმაციო დაფაზე გადასასვლელად.

განაგრძეთ. აქ თქვენ ნახავთ თქვენი აპლიკაციის შესახებ მეტ დეტალს, როგორიცაა

  1. თქვენი URL 
  2. საკონტროლო სია, რომლის შედგენაც შეგიძლიათ საუკეთესო პრაქტიკის რეკომენდაციებისთვის, რომლებსაც შემდგომ ეტაპებზე განვიხილავთ
  3. დაკვირვებადობის პანელი, რომელსაც მოგვიანებით განვიხილავთ
  4. ანალიტიკური პანელი, რომელსაც მოგვიანებით განვიხილავთ
vercel dashboard overview

URL თქვენი საწარმოო URL-ია. Github Codespaces-ში თქვენი MVP აპლიკაციისგან განსხვავებით, სადაც URL შეიცვალა, Vercel-ში თქვენი URL სტატიკური დარჩება და აქტიური დარჩება, მიუხედავად იმისა, ჩართულია თუ გამორთული თქვენი კომპიუტერი.

შეგიძლიათ გახსნათ წარმოების URL ნებისმიერი ადგილიდან, ასე რომ, გახსენით ის თქვენს ტელეფონზე, რათა დაადასტუროთ, რომ თქვენი აპლიკაცია ინტერნეტშია!

გილოცავ! 

როდესაც თქვენი აპლიკაცია Vercel-ზე განთავსდება, თქვენ უნდა უთხრათ Supabase-ს, რომ თქვენი Vercel URL სანდო გადამისამართების დანიშნულების ადგილია, წინააღმდეგ შემთხვევაში ავტორიზაციის უკუკავშირი ვერ მოხერხდება. ჩვენ დავამატეთ ჩვენი Github dev გადამისამართება, მაგრამ ახლა ჩვენი Vercel URL უნდა დავამატოთ გადამისამართების სახით.

  1. წადი შენთან Supabase-ის საინფორმაციო დაფა → ავთენტიფიკაცია → URL-ის კონფიგურაცია და თქვენ ნახავთ ორ ველს:
    1. საიტის URL — დააყენეთ ეს თქვენი Vercel-ის წარმოების URL-ად: https://your-app.vercel.app
    2. გადამისამართების URL-ები — დაამატეთ როგორც თქვენი Vercel URL, ასევე თქვენი Codespaces URL. თქვენ უკვე უნდა გქონდეთ თქვენი Codespace URL. შეგიძლიათ შეცვალოთ იგი github.dev-ის wildcard-ით, რათა ნებისმიერი ახალი კოდის სივრცე იმუშაოს. წაშალეთ არსებული და დაამატეთ ესენი:
      https://your-app.vercel.app
      **https://*.github.dev/**

ბოლოში არსებული wildcard /** მნიშვნელოვანია — ის მოიცავს ყველა მარშრუტს, რომელიც საჭირო იქნება გადახდების დამატებისას.

როდესაც Supabase-ში მომხმარებლის ავთენტიფიკაცია დავამატეთ, გამოვრთეთ ელფოსტის შეტყობინებები. ახლა გვინდა, რომ ის ხელახლა ჩავრთოთ საწარმოო მიზნებისთვის.

  1. გადადით Supabase-ის დაფაზე → ავთენტიფიკაცია → შესვლა/პროვაიდერები .
  2. გადართეთ ელფოსტის დადასტურების გადამრთველი ჩართულზე .

ეწვიეთ თქვენს ცოცხალ URL-ს და გამოსცადეთ:

  1. გვერდი სწორად იტვირთება? (თქვენ უნდა ნახოთ თქვენი შესვლის გვერდი)
  2. შეგიძლიათ ახალი ანგარიშის შექმნა და შესვლა?
  3. შესვლის შემდეგ, შეამოწმეთ თქვენი ხელოვნური ინტელექტის ფუნქცია. რეაგირებს თუ არა ის?

თუ რამე არ მუშაობს, იხილეთ ქვემოთ მოცემული პრობლემების მოგვარების განყოფილება. პირველი განლაგებისას აწყობის შეცდომები ნორმალურია.

  1. გაუზიარეთ თქვენი URL თანაგუნდელს ან მეგობარს.
  2. სთხოვეთ მათ, გახსნან URL ტელეფონზე ან კომპიუტერზე და სცადონ ანგარიშის შექმნა და თქვენი აპლიკაციის ერთ-ერთი ფუნქციის გამოყენება.

ეს პირველი შემთხვევაა, როდესაც ვინმემ თქვენს აპლიკაციაში წვდომა Codespaces-ის გაშვების გარეშე განახორციელა. თუ ის მუშაობს, თქვენი აპლიკაცია აქტიურია.

გსურთ მორგებული დომენი? ნაგულისხმევად, თქვენი აპლიკაციის URL ავტომატურად გენერირდება, მაგალითად, your-app-name.vercel.app . თუმცა, თუ გსურთ ბრენდირებული URL, როგორიცაა tutormatch.app, იხილეთ ბოლოს მოცემული დამატებითი დავალება, სადაც ეტაპობრივად არის აღწერილი, თუ როგორ უნდა გააკეთოთ ეს. ასევე შეგიძლიათ სცადოთ ამის გაკეთება თავად, Vercel-ის სახელმძღვანელოს გამოყენებით, განლაგების საკონტროლო სიაში.

პრობლემების მოგვარება

დააწკაპუნეთ ქვემოთ მოცემულ თითოეულ პრობლემაზე შესაძლო გადაწყვეტის საჩვენებლად.

დააწკაპუნეთ წარუმატებელ განლაგებაზე და წაიკითხეთ შექმნის ჟურნალები.

გავრცელებული მიზეზები:

  • package.json- ში დამოკიდებულება აკლია
  • იმპორტის გზაში შეცდომაა
  • დაკარგული აწყობის სკრიპტი.

ჯერ npm run build გაუშვით კოდურ სივრცეებში და თუ ის ლოკალურად ვერ მოხერხდება, ის Vercel-ზეც ვერ მოხერხდება.

თქვენი სერვერის ფაილი სავარაუდოდ არ ახორციელებს Express აპლიკაციის ექსპორტს.

დამატება:

  • ნაგულისხმევი აპლიკაციის ექსპორტი; (ES მოდულები) ან
  • module.exports = app; for (CommonJS)

თქვენი სერვერის ფაილის ბოლოს api/ დირექტორიაში.

ეს განლაგების ყველაზე გავრცელებული პრობლემაა.

  1. გადადით Vercel-ის პროექტზე → პარამეტრები → გარემოს ცვლადებზე .
  2. დარწმუნდით, რომ ყველა გასაღების სახელი ზუსტად ემთხვევა თქვენი კოდის მოლოდინს (დიდი რეგისტრის მიმართ მგრძნობიარეა).

    გახსოვდეთ: VITE_ პრეფიქსიანი ცვლადები მხოლოდ ფრონტენდ კოდისთვისაა.

    Backend API გასაღებებს, როგორიცაა GEMINI_API_KEY ან GROQ_API_KEY, არ უნდა ჰქონდეთ VITE_ პრეფიქსი.
  1. შეამოწმეთ Vercel-ის ჟურნალების ჩანართი ( განლაგებები → დააწკაპუნეთ განლაგებაზე → ფუნქციის ჟურნალები ).
  2. მოძებნეთ „API_KEY არ არის განსაზღვრული“ ან მსგავსი.
  3. თუ იპოვით, დაამატეთ დაკარგული გასაღები Vercel-ის გარემოს ცვლადებში.
  4. შეამოწმეთ თქვენი ლოკალური (კოდური სივრცის) .env ფაილი ლოკალურად, რათა ნახოთ, თუ რომელ გასაღებებს ელოდება თქვენი აპლიკაცია.

შესაძლოა, თქვენს Express სერვერს ჰქონდეს მყარი კოდირებული პორტი.

შეცვალეთ app.listen(3000) app.listen(process.env.PORT) -ით და დარწმუნდით, რომ PORT შედის თქვენს გარემოს ცვლადებში.

თქვენს წინა პანელში გაქვთ მყარი კოდირებული URL-ები (მაგალითად, http://localhost:3001/api/ …).

შეცვალეთ ისინი ფარდობითი გზებით ( /api/ …).

ფარდობითი გზები მთლიანად გამორიცხავს CORS-ის პრობლემებს.

Vercel-ი წარმოების პროცესში უგულებელყოფს express.static() ფუნქციას და სტატიკურ ფაილებს ამუშავებს build-ის გამომავალი დირექტორიიდან.

თუ CSS ფაილი ან სურათები აკლია, npm run build-ის გაშვების შემდეგ დარწმუნდით, რომ ისინი dist/ საქაღალდეშია შეტანილი.

სურათების შემთხვევაში, დარწმუნდით, რომ ისინი public/ საქაღალდეშია ან იმპორტირებულია თქვენს React კოდში.

package.json- ს დამოკიდებულება აკლია.

გაუშვით npm install კოდურ სივრცეებში და განახლებული package-lock.json გადაიტანეთ მთავარ ფილიალში.

გადაამოწმეთ, რომ თქვენი Supabase Auth გადამისამართების URL-ები შეიცავს თქვენს ახალ Vercel URL-ს.

გადადით Supabase-ის დაფაზე → ავთენტიფიკაცია → URL კონფიგურაცია და დაამატეთ თქვენი .vercel.app URL.

Supabase Auth პარამეტრებში განაახლეთ საიტის URL და გადამისამართების URL-ები თქვენი Vercel URL-ით.

შეინახეთ თქვენი Codespaces-ის URL სიაში, რათა შემუშავებამ განაგრძოს მუშაობა.

Vercel-ის პარამეტრებში თქვენი build-ის გამომავალი დირექტორია არ ემთხვევა იმ ადგილს, სადაც npm run build ათავსებს ფაილებს.

შემოწმება:

  • Vite იყენებს dist/-ს ,
  • Create React App იყენებს build/ .

განაახლეთ გამომავალი დირექტორია Vercel-ის შექმნისა და გამოყვანის პარამეტრებში.

დარწმუნდით, რომ თქვენი vercel.json ფაილი არსებობს პროექტის root-ში (თქვენ შექმენით ეს აქტივობა 1-ში).

თუ API მარშრუტები კვლავ არ მუშაობს, სცადეთ builds განყოფილების დამატება:

				
					{ 
    "builds": [{ 
        "src": "api/index.js"
        "use": "@vercel/node"
    }], 
    "rewrites": [{ 
        "source": "/api/(.*)", 
        "destination": "/api" 
    }] 
}

Fluid Compute-ის (ახალ პროექტებზე ნაგულისხმევად ჩართული) გამოყენებით, ფუნქციებს Hobby-ს გეგმაზე 300 წამამდე (5 წუთი) შეუძლია მუშაობა.

Fluid Compute-ის გარეშე , ლიმიტი 60 წამია.

თუ თქვენი ხელოვნური ინტელექტის გამოძახებების დრო კვლავ იწურება, განიხილეთ მოთხოვნის გამარტივება ან მომხმარებლისთვის ჩატვირთვის ინდიკატორის და დროის იწურების შეტყობინების დამატება.

ავტომატური განლაგება

GIthub-ის გამოყენებით თქვენი MVP-ის შექმნისას, თქვენ ისწავლეთ ფილიალების შესახებ თქვენი სამუშაოს ორგანიზებისთვის. ახლა ფილიალებს რეალური შედეგები მოაქვს: main- ზე გადასვლა ნიშნავს, რომ თქვენი ცოცხალი აპლიკაცია მყისიერად იცვლება.

Github-ის წარმოების ტიპიური სამუშაო პროცესი შემდეგია:

  • მთავარი ფილიალი = წარმოება. დაკავშირებულია Vercel-თან. ყველა ბიძგი ავტომატურად განთავსდება.
  • ფუნქციის ტოტები = უსაფრთხო სივრცე ახალი სამუშაოსთვის. ექსპერიმენტი ჩაატარეთ აქ.

არასოდეს გადასცეთ შეუმოწმებელი კოდი პირდაპირ main- ზე, მას შემდეგ, რაც ის თქვენს განლაგების პლატფორმასთან იქნება დაკავშირებული.

ცუდი აპლიკაცია ყველა მომხმარებლისთვის აფუჭებს თქვენს ცოცხალ აპლიკაციას.

აქტივობა 3

ტესტის ავტომატური განლაგება

სავარაუდო დრო: 15 წუთი

  1. გადადით GitHub-ზე და გადადით თქვენს MVP საცავში
  2. დააწკაპუნეთ საცავის ზედა მარცხენა კუთხეში არსებულ მთავარ ჩამოსაშლელ მენიუზე და ნახეთ ყველა ფილიალი.
  3. შექმენით ახალი ფილიალი.
  4. შეგიძლიათ მას ასე დაარქვათ: test-auto-deploy
  5. შექმენით ახალი კოდური სივრცე ამ ფილიალისთვის და გახსენით იგი.
  1. შეიტანეთ ნებისმიერი პატარა თვალსაჩინო ცვლილება, როგორიცაა სათაურის ან ღილაკის ტექსტის განახლება, რათა მარტივად შეამოწმოთ, იმუშავა თუ არა. 

გვერდის სათაურს „TutorMatch“ -დან „TutorMatch – ავტომატური განლაგების ტესტირება “-მდე განვაახლებთ.

ჩვენ ის App.jsx ფაილში ვიპოვეთ. 

  1. დააფიქსირეთ თქვენი ცვლილება Codepsace-ში აღწერილობითი შეტყობინებით და გადაიტანეთ თქვენს test-auto-deploy ფილიალში.
  2. დაბრუნდით GitHub-ზე. უნდა დაინახოთ ღილაკი, რომელიც გაცნობებთ, რომ დაწკაპუნება შესრულდა.
  3. დააწკაპუნეთ ღილაკზე Pull Request-ის შესაქმნელად ან უბრალოდ გადადით Pull Requests ჩანართზე.  
  1. დაამატეთ სათაური და აღწერა
  2. დააჭირეთ ღილაკს „შექმენით მოთხოვნის მოთხოვნა“.
  3. დააჭირეთ შერწყმის მოთხოვნას და დაადასტურეთ.

როგორც კი Github-ში შერწყმას დაადასტურებთ, უნდა ნახოთ

  1. ისტორია
  2. დამატებითი ინფორმაცია Vercel-ის შესახებ ეს დაემატა Vercel-თან ინტეგრაციის გამო.

იმედია კონფლიქტები არ არის და თქვენ შეძლებთ pull request-ის წარმატებით გაერთიანებას.

  1. გადადით თქვენს Vercel-ის დაფაზე.
  2. დააწკაპუნეთ თქვენი პროექტის განლაგებებზე .

თქვენ უნდა შეძლოთ ორი ახალი რიგის ნახვა:

    • ისეთი, რომელიც წინასწარ აჩვენებს შესრულებულ ცვლილებას
    • ერთი საწარმოო ბილდისთვის. საწარმოო ბილდს შეიძლება ჰქონდეს სტატუსი „მშენებარე“ ან „მზადაა“.
      „მზადყოფნის“ შემდეგ შეგიძლიათ გადახვიდეთ თქვენს URL-ზე და ნახოთ შესრულებული ცვლილებები.
  1. დასრულების შემდეგ, განაახლეთ თქვენი პირდაპირი URL, რომ ნახოთ ცვლილება

ჩვენ ნამდვილად არ გვინდა სათაური TESTING DEPLOYMENT-ით. მიუხედავად იმისა, რომ Vercel-ში არის გაუქმების ვარიანტი, ის მაინც გადახედავს GIthub საცავს და გამოიტანს მიმდინარე მთავარ ტოტს, ამიტომ ცვლილების გასაუქმებლად იგივე ნაბიჯების გავლა მოგიწევთ.

  1. დაბრუნდით Codespace-ში, შეცვალეთ სათაური უკან.
  2. დაასრულეთ და განახორციელეთ ცვლილება.
  3. შექმენით pull request და გააერთიანეთ.
  4. კიდევ ერთხელ შეამოწმეთ Vercel-ში, შეიცვალა თუ არა სათაური ორიგინალურ ვერსიას. 

დაიცავით თქვენი აპლიკაცია წარმოებისთვის

პროგრამის განმავლობაში თქვენ თანდათანობით ზრდიდით თქვენს აპლიკაციაში უსაფრთხოებას, მაგალითად:

  • API გასაღებების შენახვა GitHub Secrets-ში (მათი კოდიდან და ჩაწერის ისტორიიდან მოშორებით შენახვა)
  • API ზარების სერვერის მხარეს განხორციელება (გასაღების ბრაუზერისგან სრულად გამორთვა) 
  • მომხმარებლის ავტორიზაციის დამატება Supabase-ის გამოყენებით , რათა მხოლოდ შესულ მომხმარებლებს შეეძლოთ თქვენს აპლიკაციაზე წვდომა
  • დაემატა API შუალედური პროგრამული უზრუნველყოფის უსაფრთხოება , რათა თქვენი აპლიკაციის გარდა ვერავინ შეძლოს API ზარების განხორციელება. 

ეს მნიშვნელოვანი დაცვის მექანიზმებია, მაგრამ ისინი ყველაფერს არ მოიცავს.

აპლიკაციის ავტორიზებული მომხმარებელი მაინც შეძლებს დაწეროს სკრიპტი, რომელიც წუთში 500-ჯერ გამოიძახებს თქვენს ხელოვნურ ინტელექტს, რაც გამოიყენებს თქვენს ყველა Groq / Gemini / Hugging Face API კრედიტს ან უარეს შემთხვევაში, დიდ თანხას დაგიჯდებათ. 

ან თქვენი API გასაღების ვადა შეიძლება ამოიწუროს და შეცდომების უსაფრთხო დამუშავების გარეშე, თქვენი მომხმარებლები სასარგებლო შეტყობინების ნაცვლად ძალიან ტექნიკურ შეტყობინებას დაინახავენ.

Vercel იცავს თქვენს აპლიკაციას ინფრასტრუქტურის დონეზე, იცავს მას ისეთი ფაქტორებისგან, როგორიცაა განაწილებული შეტევები, ქსელის წყალდიდობა და ძირითადი ვებ საფრთხეები. ეს საფრთხეები ავტომატურად იბლოკება.

თუმცა, Vercel-მა არ იცის, რომ თქვენი AI API-ების მარშრუტი თითო ზარზე ფულს ხარჯავს, ან რომ თქვენი შეცდომებზე პასუხები შიდა დეტალებს შეიცავს. ეს არის აპლიკაციის დონის პრობლემები, რომელთა მოგვარებაც მხოლოდ თქვენ იცით და რომელთა შესახებაც შეგიძლიათ.

შემდეგი აქტივობა დაცვის კიდევ ორ ფენას ამატებს: 

  1. სიჩქარის შეზღუდვა: თითოეული მომხმარებლისთვის მოთხოვნის რაოდენობის შეზღუდვის დაწესება
  2. შეცდომების უსაფრთხო დამუშავება: ტექნიკური შეცდომების ჩანაცვლება მომხმარებლისთვის მოსახერხებელი შეტყობინებებით

სიჩქარის შეზღუდვის დამატების სხვადასხვა გზა არსებობს. აი, როგორ შეადარებენ ისინი ერთმანეთს:

მიდგომა

როგორ მუშაობს

კომპრომისი

მეხსიერებაში (გამოხატული სიჩქარის ლიმიტი)

ინახავს მოთხოვნების რაოდენობას თქვენი სერვერის მეხსიერებაში

მარტივი დაყენება. გადაყენდება სერვერის გარეშე ფუნქციების გადატვირთვისას. სწრაფად აფიქსირებს ბოროტად გამოყენების შემთხვევებს.

გარე საცავი (როგორც მონაცემთა ბაზაში)

რაოდენობას ინახავს ცალკე მონაცემთა ბაზაში, რომელიც ინახება ყველა გადატვირთვის შემდეგაც.

უფრო საიმედოა დატვირთული საცობების დროს, თუმცა საჭიროებს დაყენებას და დამატებითი სერვისის გადახდას. 

ის ასევე ყველაზე რთულია, მაგრამ ჩვენ გირჩევთ მის გამოყენებას, როდესაც ბევრი მომხმარებელი გეყოლებათ.

Edge-ის შუალედური პროგრამული უზრუნველყოფა

ბლოკავს მოთხოვნებს Vercel-ის ქსელის კიდეზე, სანამ ისინი თქვენს კოდს მიაღწევენ

ყველაზე სწრაფი რეაგირება, მაგრამ მოითხოვს კოდირების განსხვავებული ნიმუშის შესწავლას (Vercel Edge Runtime)

თქვენი MVP-სთვის, მეხსიერებაში სიხშირის შეზღუდვა პრაქტიკული არჩევანია. ის მინიმალური დაყენებით აფიქსირებს ყველაზე გავრცელებულ ბოროტად გამოყენების ნიმუშს (ვინმეს მიერ თქვენი ხელოვნური ინტელექტის ღილაკზე განმეორებით დაჭერა ან სკრიპტის მიერ სწრაფი მოთხოვნების გაშვება). თუ თქვენი აპლიკაცია კონკურენციას გადააჭარბებს და გჭირდებათ სიჩქარის შეზღუდვა, რომელიც არასდროს გადაიტვირთავს, მონაცემთა ბაზის შენახვაზე გადასვლა ბუნებრივი და უსაფრთხო შემდეგი ნაბიჯია.

აქტივობა 4

დაამატეთ სიჩქარის შეზღუდვა და შეცდომების უსაფრთხო დამუშავება

სავარაუდო დრო: 20 წუთი

  1. გადადით GitHub-ზე და გადადით თქვენს MVP საცავში
  2. დააწკაპუნეთ საცავის ზედა მარცხენა კუთხეში არსებულ მთავარ ჩამოსაშლელ მენიუზე და ნახეთ ყველა ფილიალი.
  3. შექმენით ახალი ფილიალი.
  4. შეგიძლიათ მას დაარქვათ: add-security (ან სხვა აღწერილობითი სახელი).
  5. შექმენით ახალი კოდური სივრცე ამ ფილიალისთვის და გახსენით იგი.

წარმოების პროცესში, ნებისმიერს, ვინც აღმოაჩენს თქვენს URL-ს, შეუძლია გაგზავნოს მოთხოვნები, მათ შორის სკრიპტები, რომლებიც წუთში ასობით ხელოვნური ინტელექტის ზარს ახორციელებენ. სიჩქარის შემზღუდველი ლიმიტია, თუ რამდენი მოთხოვნის გაკეთება შეუძლია თითოეულ მომხმარებელს.

  1. გახსენით Copilot Chat თქვენს კოდურ სივრცეში და გამოიყენეთ ეს მოთხოვნა:

როლი: თქვენ მეხმარებით ჩემი Express.js აპლიკაციის უსაფრთხოებაში საწარმოო განლაგებისთვის.

მიზანი: სიჩქარის შეზღუდვის დამატება ჩემს მარშრუტებზე API-ის ბოროტად გამოყენების თავიდან ასაცილებლად.

კონტექსტი: ჩემი აპლიკაცია იყენებს Express.js-ს API მარშრუტებით /api/-ში. მე უკვე განვათავსე აპლიკაცია Vercel-ის გამოყენებით.

API ლიმიტი ერთ მომხმარებელზე: ლიმიტი წუთში 5 მოთხოვნამდე ერთ მომხმარებელზე. დააბრუნეთ სტატუსი 429 „ძალიან ბევრი მოთხოვნა. გთხოვთ, დაელოდოთ“. 

შენახვა: გამოიყენეთ მეხსიერებაში არსებული მეხსიერება მოთხოვნების თვალყურის დევნებისთვის.

  1. გადახედეთ გენერირებულ კოდს. ეს არის ის, რაც მან ჩვენთვის გენერირება მოახდინა ჩვენს index.js ფაილში.
				
					const RATE_LIMIT_WINDOW_MS = 60 * 1000
const RATE_LIMIT_MAX_REQUESTS = 5
const requestLog = new Map()

const getUserKey = (req) => {
  const forwardedFor = req.headers['x-forwarded-for']
  if (typeof forwardedFor === 'string' && forwardedFor.length > 0) {
    return forwardedFor.split(',')[0].trim()
  }

  return req.ip || req.socket?.remoteAddress || 'unknown-user'
}

const apiRateLimiter = (req, res, next) => {
  const now = Date.now()
  const userKey = getUserKey(req)
  const userTimestamps = requestLog.get(userKey) || []

  const validTimestamps = userTimestamps.filter(
    (timestamp) => now - timestamp < RATE_LIMIT_WINDOW_MS
  )

  if (validTimestamps.length >= RATE_LIMIT_MAX_REQUESTS) {
    const oldestTimestamp = validTimestamps[0]
    const retryAfterSeconds = Math.max(
      1,
      Math.ceil((RATE_LIMIT_WINDOW_MS - (now - oldestTimestamp)) / 1000)
    )

    return res
      .status(429)
      .set('Retry-After', String(retryAfterSeconds))
      .json({ error: 'Too many requests. Please wait a moment.' })
  }

  validTimestamps.push(now)
  requestLog.set(userKey, validTimestamps)
  next()
}

// Middleware
app.use(cors())
app.use(express.json())
app.use('/api', apiRateLimiter)

თქვენ უნდა შეგეძლოთ Copilot-ის მიერ დამატებული რამდენიმე ძირითადი ნაწილის ნახვა. ცვლადების ზუსტი სახელები შეიძლება განსხვავდებოდეს, მაგრამ მათ უნდა ჰქონდეთ დაახლოებით შემდეგი:

  • WINDOW_MS ცვლადი: დროის ფანჯრის ხანგრძლივობის გასაკონტროლებლად: 60*1000 = 60,000 მილიწამი, რაც ერთი წუთია.
  • MAX_REQUESTS ცვლადი: ფანჯარაში დაშვებული მოთხოვნის რაოდენობის გასაკონტროლებლად. ჩვენი აპლიკაციისთვის = 5
    Copilot-მა შეიძლება ეს ცვლადები ლიმიტად ან მაქსიმალურად გენერირება მოახდინოს Express-ის ვერსიიდან გამომდინარე, მაგრამ ორივე უნდა იმუშაოს.
  • ლიმიტის მიღწევის შემთხვევაში მორგებული შეტყობინება . ჩვენი აპლიკაციისთვის = „ძალიან ბევრი მოთხოვნა. გთხოვთ, დაელოდოთ ცოტა ხანს“.

სიჩქარის ლიმიტი შეგიძლიათ შეამოწმოთ როგორც Codespaces-ში, ასევე კოდის გაერთიანებით და შემდეგ მისი წარმოებაში ტესტირებით. რადგან ფუნქცია ჯერ კიდევ ვალიდაციის პროცესშია, უმჯობესია მისი Codespaces-ში ტესტირება . 

  1. გაუშვით თქვენი აპლიკაცია Codespaces-ში ( npm run dev ) და გადახედეთ მას ბრაუზერის ჩანართში. 
  2. შედით სისტემაში და გადადით თქვენს ხელოვნური ინტელექტის ფუნქციაზე.
  3. ხელოვნური ინტელექტის ფუნქციის ღილაკს ზედიზედ 20-ზე მეტჯერ დააწკაპუნეთ.
  4. ლიმიტის მიღწევის შემდეგ უნდა ნახოთ წარწერა „ძალიან ბევრი მოთხოვნა. გთხოვთ, დაელოდოთ ცოტა ხანს“.
  5. დაელოდეთ ერთი წუთი და ხელახლა სცადეთ. ჩვეულებრივ უნდა იმუშაოს.

თუ შეტყობინება არ გამოჩნდება, შეგიძლიათ მისი გამართვა Copilot-ში. 

შენიშვნა: Vercel თქვენს ბექენდს სერვერის გარეშე ფუნქციების სახით მართავს, ამიტომ მეხსიერებაში არსებული სიჩქარის შემზღუდველი ინსტანციების გადატვირთვისას გადატვირთვა ხდება. ეს MVP ტრაფიკისთვისაც კარგია. მას შეუძლია სწრაფი ბოროტად გამოყენების დაფიქსირება, მაგალითად, ღილაკზე 50-ჯერ დაწკაპუნებისას.

კოდურ სივრცეებში დეტალური შეცდომის შეტყობინებები დაგეხმარებათ შეცდომების გამართვაში. წარმოებაში, იგივე დეტალები თავდამსხმელს ეუბნება, თუ როგორ არის სტრუქტურირებული თქვენი კოდი. 

შეცდომების უსაფრთხო დამუშავება სერვერზე ტექნიკური დეტალების შეყვანისას მომხმარებლებს მეგობრულ შეტყობინებას უჩვენებს. თქვენ არ შლით შეცდომის შეტყობინებებს, თქვენ უბრალოდ გადამისამართებთ მათ ისე, რომ თავდამსხმელებმა ვერ დაინახონ ისინი.

  1. Copilot-ს სთხოვეთ დაამატოს try/catch გამონაკლისის დამუშავება. აქ მოცემულია ნიმუშის მოთხოვნა:

დამეხმარეთ ჩემს Express.js API-ში წარმოებისთვის მზად შეცდომების დამუშავების დამატებაში.

შეცვალეთ დაუმუშავებელი შეცდომის შეტყობინებები უსაფრთხო, მომხმარებლისთვის მოსახერხებელი პასუხებით.

კონტექსტი: ჩემი აპლიკაცია Groq API-ს Express მარშრუტებიდან იძახებს. წარმოებაში, არ მინდა, რომ მომხმარებლებმა ნახონ სტეკის ტრასები ან შიდა დეტალები.

მარშრუტის დამმუშავებლების ჩატენვა try/catch-ში. შეცდომების სრული რეგისტრაცია სერვერის მხარეს console.error() ფუნქციის გამოყენებით. მომხმარებლებს გაუგზავნეთ შეტყობინება „რაღაც არასწორად მოხდა. გთხოვთ, სცადოთ ხელახლა“. Groq API-ის ნებისმიერი შეცდომა მომხმარებლისთვის სასარგებლო უნდა იყოს შიდა დეტალების ჩვენების გარეშე.

  1. გადახედეთ გენერირებულ კოდს.

    თქვენ უნდა დაინახოთ try/catch ბლოკი, სადაც catch აფიქსირებს სრულ შეცდომას შემდეგნაირად:

    1. console.error() (მხოლოდ სერვერის მხარეს)
    2. მომხმარებლისთვის ზოგადი შეტყობინება.

ცნობილი შეცდომები, როგორიცაა Groq-ის ან Gemini API-ის გაუმართაობა, სამაგიეროდ კონკრეტულ, სასარგებლო შეტყობინებებს იღებს.

რადგან ყველა API გასაღებისთვის Codepsace საიდუმლოებებს ვიყენებთ, კოდში პირდაპირ რედაქტირებას შევიტანთ.

  1. იპოვეთ სერვერის კოდი, რომელიც გამოიძახებს Groq-ის (ან სხვა LLM) API-ს. 
  2. შეცვალეთ GROQ_API_KEY (ან ექვივალენტური ცვლადი) GROQ_APIKEY- ით. 
  3. სცადეთ თქვენი ხელოვნური ინტელექტის ფუნქცია.
  4. უნდა გამოჩნდეს შეცდომის შეტყობინება, რომ API ვერ მოხერხდა. სტეკის კვალი არ უნდა გამოჩნდეს.
  5. შეამოწმეთ თქვენი ტერმინალი. შეცდომის სრული დეტალები იქ უნდა იყოს შეტანილი.
  6. კოდი ისევ GROQ_API_KEY- ზე შეცვალეთ და ხელახლა სცადეთ, რომ დარწმუნდეთ, რომ ის კვლავ მუშაობს.
  1. თქვენს კოდურ სივრცეში, განახორციელეთ თქვენი სიჩქარის შეზღუდვისა და შეცდომების დამუშავების ცვლილებების კომიქსი აღწერითი შეტყობინებით.
  2. გადადით თქვენს დამატებითი უსაფრთხოების ფილიალში.
  3. გადადით GitHub-ზე. თქვენ უნდა დაინახოთ ბანერი, რომელიც შემოგთავაზებთ Pull Request-ის შექმნას .
  4. დააჭირეთ შედარებას და მოთხოვნის მიღებას.
  5. დაამატეთ სათაური, რომელიც აღწერს თქვენს ცვლილებებს (მაგ., „სიჩქარის შემზღუდველის და შეცდომების უსაფრთხო დამუშავების დამატება“).
  6. დააჭირეთ ღილაკს „შექმენით მოთხოვნის მოთხოვნა“.
  7. გადახედეთ ცვლილებებს, შემდეგ დააჭირეთ ღილაკს „შერწყმის მოთხოვნა“ და დაადასტურეთ.
  8. გადადით თქვენს Vercel-ის დაფაზე. ავტომატურად უნდა დაინახოთ ახალი განლაგების შენობა.

განლაგების დასრულების შემდეგ, გადაამოწმეთ თქვენი აქტიური URL.

  1. შედით სისტემაში და ჩვეულებრივად გამოიყენეთ თქვენი ხელოვნური ინტელექტის ფუნქცია. ის უნდა იმუშაოს.
  2. ხელოვნური ინტელექტის ფუნქციაზე სწრაფად 20-ზე მეტჯერ დააწკაპუნეთ. საბოლოოდ უნდა ნახოთ წარწერა „ძალიან ბევრი მოთხოვნა“.
  3. მოიცადეთ ერთი წუთით, სცადეთ ხელახლა. ჩვეულებრივად უნდა იმუშაოს.

პრობლემების მოგვარება

ქვემოთ იხილეთ რამდენიმე პრობლემა, რომელსაც შეიძლება წააწყდეთ თქვენი აპლიკაციის უსაფრთხოების დამატებისას. დააწკაპუნეთ თითოეულ პრობლემაზე, რომ ნახოთ, თუ როგორ შეგიძლიათ მისი მოგვარება.

დარწმუნდით, რომ შუალედური პროგრამა გამოიყენება თქვენს API მარშრუტებზე და არა მხოლოდ სტატიკური ფაილების მარშრუტებზე. express-rate-limit შუალედური პროგრამა უნდა დაემატოს თქვენი მარშრუტის დამმუშავებლებამდე.

თქვენს Codespace ტერმინალში გაუშვით npm install express-rate-limit და გადაიტანეთ განახლებული package.json და package-lock.json ფაილები.

სერვერის გარეშე ფუნქციები შეიძლება გადატვირთოთ მოთხოვნებს შორის. სიჩქარის შემზღუდველი კვლავ მუშაობს სწრაფი ბოროტად გამოყენების წინააღმდეგ (მრავალი მოთხოვნა სწრაფად თანმიმდევრულად). ეს მოსალოდნელი ქცევაა MVP-სთვის.

დარწმუნდით, რომ თქვენი catch ბლოკი res.json()- ს უგზავნის ზოგად შეტყობინებას და console.error() -ით აფიქსირებს სრულ შეცდომას. შეამოწმეთ, რომ არ გაქვთ სხვა შეცდომების დამმუშავებელი, რომელიც თქვენსას გადაფარავს.

თქვენი აპლიკაციის მონიტორინგი

თქვენი აპლიკაცია დანერგილი და დაცულია. სანამ თქვენს URL-ს მსოფლიოს გაუზიარებთ, კიდევ ორი ​​რამ უნდა გააკეთოთ:

  1. დააყენეთ მონიტორინგი, რათა ნახოთ, რა ხდება გაშვების შემდეგ
  2. დარწმუნდით, რომ თქვენი დაცვა ნამდვილად მუშაობს. ნუ იფიქრებთ, რომ ასეა.

ხელოვნური ინტელექტის ზარები განსხვავდება ჩვეულებრივი API მოთხოვნებისგან, რადგან ისინი თითო ზარზე ფულს ხარჯავენ, ცვალებად დროს მოითხოვენ და შეიძლება მოულოდნელი შედეგები გამოიღონ. სტანდარტული „მოთხოვნის წარმატებით დასრულების“ ჟურნალი არ გეუბნებათ, სასარგებლო იყო თუ არა ხელოვნური ინტელექტის პასუხი, რამდენ ხანს დაელოდა მომხმარებელი ან რა დაჯდა ზარი. სტრუქტურირებული ჟურნალი აღრიცხავს ამ დეტალებს, რათა თქვენ შეძლოთ ამ კითხვებზე პასუხის გაცემა თქვენი Vercel-ის დაფიდან.

Vercel-ის საინფორმაციო დაფა 

თქვენი Vercel-ის დაფა არის ფანჯარა, სადაც ხედავთ, თუ როგორ მუშაობს თქვენი აპლიკაცია წარმოებაში. გადადით თქვენს პროექტზე vercel.com- ზე და შეისწავლეთ სამი სფერო.

ყველა განლაგება ჩამოთვლილია დროის ნიშნულით და სტატუსით (წარმატება ან წარუმატებლობა). დააწკაპუნეთ ნებისმიერ განლაგებაზე სრული აწყობის ჟურნალის სანახავად. აქ შეგიძლიათ გამართოთ განლაგების შეცდომების გასწორება. თუ აწყობა ჩაიშალა, ჟურნალები გეტყვით მიზეზს.

vercel deployment panel

სერვერის მხარის ჟურნალები აქ რეალურ დროში ჩნდება. ისინი აჩვენებს თქვენი API მარშრუტების მოთხოვნებს, მათ შორის კონსოლის გამომავალ მონაცემებს და შეცდომებს.

დეტალების სანახავად დააწკაპუნეთ ჟურნალის ნებისმიერ ჩანაწერზე: მოთხოვნის URL, პასუხის სტატუსის კოდი და შესრულების დრო. მარცხნივ მოცემული ფილტრების გამოყენებით, შეამცირეთ სტატუსის კოდის (ყველა 500 შეცდომის პოვნა), მარშრუტის (იხილეთ მხოლოდ ხელოვნური ინტელექტის მოთხოვნები) ან დროის დიაპაზონის მიხედვით.

ასევე შეგიძლიათ დააჭიროთ „პირდაპირ ეთერში“ გადამრთველს, რათა რეალურ დროში უყუროთ ჟურნალების ტრანსლაციას. ეს სასარგებლოა, როდესაც აპლიკაციას ტესტავთ და გსურთ ნახოთ, რა ხდება სერვერზე დაწკაპუნებისას.

ჟურნალის შენახვა: 2026 წლის თებერვლის მდგომარეობით, Hobby (უფასო) გეგმაზე გაშვების დროის ჟურნალები დაახლოებით 1 საათის განმავლობაშია ხელმისაწვდომი. ეს დრო საკმარისია ტესტირებისა და გამართვისთვის, მაგრამ ჟურნალები ხვალ აღარ იქნება. თქვენი ხელოვნური ინტელექტის ფუნქციის ტესტირების შემდეგ მალევე შეამოწმეთ ჟურნალების ჩანართი. 

vercel logs panel

დაკვირვებადობის განყოფილება სცილდება ინდივიდუალურ ჟურნალებს და გაჩვენებთ თქვენს ყველა მოთხოვნაში არსებულ ნიმუშებს: რომელი მარშრუტებია ყველაზე ნელი, რომელს აქვს ყველაზე მაღალი შეცდომების მაჩვენებელი და როგორ იცვლება თქვენი ფუნქციის მუშაობა დროთა განმავლობაში.

ეს ჩანართი ხელმისაწვდომია ყველა გეგმაზე, მათ შორის უფასო ჰობის გეგმაზე. 

Observability Pro და Plus გეგმები ხსნის მორგებულ შეკითხვებს და ანომალიების შეტყობინებებს.
ეს თქვენი MVP-სთვის არ გჭირდებათ; ნაგულისხმევი ხედები საკმარისია . 

Vercel აკონტროლებს შემდეგი ტიპის მოვლენებს დაკვირვებადობისთვის:

  • Edge-ის მოთხოვნები
  • Vercel ფუნქციის გამოძახებები
  • გარე API მოთხოვნები
  • შუალედური პროგრამული უზრუნველყოფის გამოძახებების მარშრუტიზაცია
  • AI Gateway-ის მოთხოვნები
vercel observability panel
აქტივობა 5

მონიტორინგი, დადასტურება და გაშვება

სავარაუდო დრო: 25 წუთი

  1. გადადით GitHub-ზე და გადადით თქვენს MVP საცავში
  2. დააწკაპუნეთ საცავის ზედა მარცხენა კუთხეში არსებულ მთავარ ჩამოსაშლელ მენიუზე და ნახეთ ყველა ფილიალი.
  3. შექმენით ახალი ფილიალი.
  4. შეგიძლიათ მას დაარქვათ: add-monitoring (ან სხვა აღწერილობითი სახელი).
  5. შექმენით ახალი კოდური სივრცე ამ ფილიალისთვის და გახსენით იგი.

პირველი, რაც უნდა იცოდეთ ხელოვნური ინტელექტის გამოყენებით ზარების წარმოების პროცესში, არის ის, თუ რამდენ ხანს გრძელდება ისინი. 15 წამიანი ლოდინის შემდეგ მომხმარებელმა შეიძლება იფიქროს, რომ აპლიკაცია გაფუჭებულია.

სთხოვეთ Copilot-ს დაგეხმაროთ დროის შეფუთვის დამატებაში.

მსურს მონიტორინგი დავამატო ჩემს Express.js AI მარშრუტს.

მინდა თვალყური ადევნო, რამდენ ხანს სჭირდება Groq API-ის თითოეული ზარის წარმოებას.

ჩემი ხელოვნური ინტელექტის მარშრუტი [index.js]-შია და Groq API-ს იძახებს. Vercel-ზე ვახორციელებ განთავსებას.

ჩაწერეთ Date.now() ფუნქცია ხელოვნური ინტელექტის ზარამდე და მის შემდეგ. გამოთვალეთ რეაგირების დრო მილიწამებში. შეიტანეთ ის console.log() ფუნქციის გამოყენებით, მარშრუტის სახელის ჩათვლით.

  1. გაუშვით თქვენი აპლიკაცია კოდურ სივრცეებში და გამოიძახეთ ხელოვნური ინტელექტი.
  2. შეამოწმეთ თქვენი ტერმინალის გამომავალი სიგნალი რეაგირების დროის ჟურნალისთვის.
  3. ჯერ არ განათავსოთ. შემდეგ ეტაპზე მეტ ჟურნალირებას დაამატებთ და ერთხელ განათავსებთ.

ახლა გააფართოვეთ თქვენი დროის კოდი სრული სურათის აღსაბეჭდად. სტრუქტურირებული ჟურნალები იყენებენ JSON ფორმატს, რათა შეძლოთ მათი ძებნა და გაფილტვრა Vercel-ის დაფაზე. სთხოვეთ Copilot-ს საჭირო კოდის გენერირება.

შეცვალეთ ძირითადი console.log სტრუქტურირებული JSON ჟურნალებით, რომელთა მოძიებაც Vercel-ის დაფაზე შემიძლია.

მე უკვე მაქვს დროის შეფუთვის ფუნქცია, რომელიც ზომავს რეაგირების დროს ჩემი Groq API ზარისთვის.

AI ზარის თითოეული გამოძახებისას ერთი JSON ობიექტის რეგისტრაცია console.log(JSON.stringify(data))-ის გამოყენებით:
დროის ნიშნული (ISO),
მოქმედების სახელი,
inputLength (სიმბოლოების რაოდენობა, არა შინაარსი),
რეაგირების დრო (მილიწამი),
წარმატება (მართალია/მცდარი),
შეცდომა (შეტყობინება ან ცარიელი)

მაგალითი (TutorMatch-ისთვის): 

როდესაც სტუდენტი რეპეტიტორების რეკომენდაციებს ეძებს, ჟურნალი შეიძლება ასე გამოიყურებოდეს. თქვენს აპლიკაციას მოქმედების სხვადასხვა სახელი ექნება. მოერგეთ თქვენი ხელოვნური ინტელექტის ფუნქციის მოქმედებას.

				
					{
  "timestamp": "2026-02-16T14:32:01Z",
  "action": "get_tutor_recommendations",
  "inputLength": 145,
  "responseTime": 2340,
  "success": true,
  "error": null
}

თითოეული ველი ემსახურება კონკრეტულ მიზანს:

  • დროის ნიშნული – საშუალებას გაძლევთ დააკავშიროთ მომხმარებლის მიერ მოხსენებული პრობლემები („გაითიშა დღის 3 საათზე“) ჟურნალებში მომხდარ მოვლენებთან
  • მოქმედება – აჩვენებს, თუ რომელი ხელოვნური ინტელექტის ფუნქციები გამოიყენება ყველაზე ხშირად და რომელი იგნორირებულია.
  • inputLength – უჩვეულოდ დიდი შეყვანილი მონაცემები შეიძლება ბოროტად გამოყენებაზე მიუთითებდეს. ჟურნალირების სიგრძე (და არა შინაარსი) იცავს მომხმარებლის კონფიდენციალურობას.
  • რეაგირების დრო – გეხმარებათ მომხმარებლების ჩივილამდე შეამჩნიოთ მუშაობის პრობლემები. 10 წამზე მეტი თანმიმდევრული დროის შემთხვევაში შესაძლოა ყურადღება დასჭირდეს.
  • წარმატება – ერთი შეხედვით გიჩვენებთ თქვენი ხელოვნური ინტელექტის წარუმატებლობის მაჩვენებელს. 5% ნორმალურია, 50% კი კრიზისი.
  • შეცდომა - როდესაც ზარები ვერ ხერხდება, შეცდომის შეტყობინება გიჩვენებთ მიზეზს პრობლემის რეპროდუცირების გარეშე.
  1. ხელახლა გაუშვით თქვენი აპლიკაცია Codespace-ში.
  2. ხელოვნური ინტელექტის ზარის გააქტიურება.
  3. შეამოწმეთ ტერმინალი JSON ჟურნალირებისთვის.

ახლა განახორციელეთ განლაგება როგორც თქვენი დროის, ასევე სტრუქტურირებული ჟურნალირების ცვლილებების ერთად:

  1. დააფიქსირეთ თქვენი ჟურნალირების ცვლილებები აღწერითი შეტყობინებით.
  2. გადადით თქვენს add-monitoring ფილიალში.
  3. გადადით GitHub-ზე. თქვენ უნდა დაინახოთ ბანერი, რომელიც შემოგთავაზებთ Pull Request-ის შექმნას .
  4. დააჭირეთ შედარებას და მოთხოვნის მიღებას.
  5. დაამატეთ სათაური, რომელიც აღწერს თქვენს ცვლილებებს.
  6. დააჭირეთ ღილაკს „შექმენით მოთხოვნის მოთხოვნა“.
  7. გადახედეთ ცვლილებებს, შემდეგ დააჭირეთ ღილაკს „შერწყმის მოთხოვნა“ და დაადასტურეთ.
  8. გადადით თქვენს Vercel-ის დაფაზე და დაადასტურეთ ახალი განლაგების დაწყება განლაგებების ჩანართში.
  9. განლაგების დასრულების შემდეგ, გახსენით თქვენი Live აპლიკაცია, შედით სისტემაში და გაააქტიურეთ 2-3 ხელოვნური ინტელექტის ზარი.
  10. გადადით Vercel → Logs-ზე და მოძებნეთ თქვენი სტრუქტურირებული JSON ჩანაწერები
  11. გადაამოწმეთ, რომ დროის ნიშნულის, მოქმედების, პასუხის დროისა და წარმატების ველები სწორად არის გამოსახული.
  12. ჟურნალის თითოეული ჩანაწერი რიგების სახით უნდა გამოჩნდეს. დააწკაპუნეთ ისარზე გასაშლელად და თქვენი JSON ველების სანახავად.
  13. თუ JSON-ის ნაცვლად ხედავთ [Object object]-ს, განაახლეთ კოდი, რათა console.log(logData)-ს ნაცვლად გამოიყენოთ console.log(JSON.stringify( logData)) .

გახსოვდეთ, რომ უფასო საფეხურზე ჟურნალები დაახლოებით 1 საათის განმავლობაშია ხელმისაწვდომი, ამიტომ ტესტირების შემდეგ მალევე შეამოწმეთ ისინი.

Vercel გთავაზობთ უფასო ვებ ანალიტიკას, რომელიც აკონტროლებს გვერდის ნახვებსა და ვიზიტორების მონაცემებს. დაყენებას რამდენიმე წუთი სჭირდება და გაძლევთ რეალურ ვიზიტორების მაჩვენებლებს, რომელთა გამოყენებაც შეგიძლიათ თქვენი პროექტის წარდგენისას.

  1. გადადით თქვენი Vercel პროექტის დაფაზე
  2. დააწკაპუნეთ ანალიტიკის ჩანართზე.
  3. დააჭირეთ ღილაკს „ჩართვა ვებ ანალიტიკისთვის“.
  1. თუ თქვენი დამატების მონიტორინგის ფილიალი ჯერ კიდევ გაქვთ, გახსენით მასთან დაკავშირებული კოდური სივრცე. წინააღმდეგ შემთხვევაში, შექმენით ახალი ფილიალი თქვენი რეპოზიტორისთვის და გახსენით ახალი კოდური სივრცე.
  2. თქვენს კოდურ სივრცეში დააინსტალირეთ ანალიტიკური პაკეტი ტერმინალში npm install @vercel/analytics ბრძანების გაშვებით.
  3. დაამატეთ ანალიტიკური კომპონენტი თქვენს აპლიკაციას.
    • თუ იყენებთ React ან Next.js,
      • დაამატეთ იმპორტის { ანალიტიკა } '@vercel/analytics/react'import-დან App.jsx-ში
      • Add <Analytics /> as a component inside your App.jsx return, typically just before the closing tag.
    • ჩვეულებრივი HTML/JS აპლიკაციებისთვის, მიჰყევით ინსტრუქციებს, რომლებსაც Vercel აჩვენებს ჩართვაზე დაწკაპუნების შემდეგ.
      ჩაიდინეთ .
  4. ცვლილებების კომიქსი, გადატანა და გაერთიანება. შემდეგი განლაგება მონაცემების შეგროვებას დაიწყებს.

შენიშვნა: ანალიტიკის მხოლოდ დაფაზე ჩართვა საკმარისი არ არის. მონაცემების ნაკადისთვის ასევე დაგჭირდებათ @vercel/analytics პაკეტი თქვენს კოდში. თუ გამოტოვებთ მე-3 და მე-4 ნაბიჯებს, ანალიტიკის ჩანართი ცარიელი დარჩება.

Hobby-ს გეგმა თვეში უფასოდ 2500 ღონისძიებას მოიცავს (2026 წლის თებერვლის მონაცემებით), რაც MVP-სთვის საკმარისზე მეტია. დაყენების შემდეგ, თქვენ შეძლებთ ნახოთ, რამდენი ადამიანი სტუმრობს თქვენს აპლიკაციას, რომელ გვერდებს ათვალიერებენ და საიდან მოდიან.

ახლა გამოიყენეთ DevTools იმის დასადასტურებლად, რომ თქვენი საწარმოო აპლიკაცია ნამდვილად უსაფრთხოა. ნუ იფიქრებთ უბრალოდ, რომ ასეა.

  1. ბრაუზერში გახსენით თქვენი განლაგებული აპლიკაცია (.vercel.app URL და არა თქვენი Codespace).
  2. DevTools-ის გასახსნელად დააჭირეთ F12-ს (ან დააწკაპუნეთ მაუსის მარჯვენა ღილაკით Inspect-ზე).
  3. გადადით ქსელის ჩანართზე.
  4. ქსელის ჟურნალის გასუფთავება (დააწკაპუნეთ გასუფთავების ხატულაზე).
  5. შედით თქვენს აპლიკაციაში და გამოიყენეთ თქვენი ხელოვნური ინტელექტის ფუნქცია.
  6. დააკვირდით ქსელის მოთხოვნების გამოჩენას.

შეამოწმეთ ქვემოთ ჩამოთვლილი სამი შემოწმება. ეს არის სამი უსაფრთხოების შემოწმება, რომელიც ყველა დანერგილმა აპლიკაციამ უნდა გაიაროს.

შემოწმება 1: თქვენი API გასაღებები დამალულია?

დააწკაპუნეთ მოთხოვნაზე, რომელიც ააქტიურებს თქვენს ხელოვნური ინტელექტის ფუნქციას.

  1. მოთხოვნის URL უნდა გადავიდეს თქვენს ბექენდზე: https://your-app.vercel.app/api/ai-query. ის არ უნდა გადავიდეს პირდაპირ api.groq.com-ზე ან ნებისმიერ გარე API-ზე. თუ ასეა, თქვენი ფრონტენდი პირდაპირ იძახებს AI API-ს და შესაძლოა თქვენი API გასაღები გამოაშკარავდეს.
  2. დააწკაპუნეთ Headers ჩანართზე და შეხედეთ Request Headers- ს. თქვენი Groq API გასაღები არ უნდა გამოჩნდეს არცერთ სათაურში. თქვენი ბექენდი გარე ზარს სერვერის მხარეს ახორციელებს. ბრაუზერი ვერასდროს ხედავს გასაღებს.
  3. შეამოწმეთ URL-ის მოთხოვნის პარამეტრები . URL-ში არ უნდა იყოს ?key=AIza….

თუ თქვენი API გასაღები ბრაუზერის მოთხოვნის ნებისმიერ ადგილას გამოჩნდება, შეწყვიტეთ . თქვენი გასაღები გამოვლენილია და ნებისმიერს, ვინც თქვენს საიტს ამოწმებს, შეუძლია მისი მოპარვა. დაუბრუნდით თქვენს კოდს და დარწმუნდით, რომ ყველა გარე API გამოძახება სერვერის მხარეს ხდება.

იმავე მოთხოვნის შემთხვევაში, კვლავ შეხედეთ მოთხოვნის სათაურებს . უნდა ნახოთ:

ავტორიზაცია: მატარებელი eyJhbGciOiJIUzI1NiIs…

ეს არის Supabase-ის სესიის ტოკენი, რომელსაც თქვენი ფრონტენდი აგზავნის. ის ადასტურებს, რომ მოთხოვნა შემოვიდა სისტემაში შესული მომხმარებლისგან. სიმბოლოების გრძელი სტრიქონი არის JSON Web Token (JWT) , სტანდარტული ფორმატი ავტორიზაციის ინფორმაციის უსაფრთხოდ გადაცემისთვის.

თუ ავტორიზაციის სათაური აკლია, დაბრუნდით თქვენს ავტორიზაციის კოდზე და გადაამოწმეთ, რომ თქვენი ფრონტენდი იძახებს getSession() ფუნქციას და თითოეულ API მოთხოვნას ათავსებს თუ არა ტოკენს.

  1. DevTools გახსნილი დატოვეთ ქსელის ჩანართზე.
  2. სწრაფად დააწკაპუნეთ თქვენი ხელოვნური ინტელექტის ფუნქციის ღილაკს 10+-ჯერ.
  3. დააკვირდით ქსელის ჩანართს: პირველი რამდენიმე მოთხოვნა უნდა დააბრუნოს სტატუსი 200 (წარმატება).
  4. ლიმიტის მიღწევის შემდეგ, მოთხოვნებმა უნდა დააბრუნოს სტატუსი 429 (ძალიან ბევრი მოთხოვნა).
  5. თქვენს აპლიკაციაში უნდა გამოჩნდეს შეტყობინება „ძალიან ბევრი მოთხოვნაა. გთხოვთ, დაელოდოთ“.

თუ 20+ მოთხოვნიდან 200-ს მიიღებთ სიჩქარის შეზღუდვის გარეშე, შესაძლოა, მოთხოვნებს შორის გადატვირთული იყოს სერვერის გარეშე ფუნქცია. სცადეთ უფრო სწრაფად დაწკაპუნება. სიჩქარის შემზღუდველი საუკეთესოდ მუშაობს სწრაფი სროლის აფეთქებების წინააღმდეგ. MVP-სთვის დაცვის ეს დონე შესაბამისია.

წარმოების ხარჯების გადახედვა

თქვენი აპლიკაცია იყენებს სერვისებს, რომლებსაც აქვთ უფასო დონეები ლიმიტებით. ამ ლიმიტების ცოდნა ხელს უშლის მოულოდნელი გადასახადების გადახდას.

დააყენეთ გადახდის შეტყობინებები, სადაც ეს შესაძლებელია. ზოგიერთი უფასო საფეხური არ გაძლევთ შეტყობინებების დაყენების საშუალებას, სანამ ფასიან გეგმაზე არ გადახვალთ.

ვერსელი

უფასო დონე – 100 გბ გამტარუნარიანობა, 4 საათი აქტიური პროცესორი, 1 მილიონი ფუნქციის გამოძახება თვეში

ღირებულება – თუ გადააჭარბებს გამტარუნარიანობას ან ფუნქციის ლიმიტს

სად შევამოწმოთ – Vercel-ის დაფა → გამოყენება

გადახდის შეტყობინება – პროექტი → პარამეტრები → გამოყენება. გადახედეთ ჰობის დონის ლიმიტს. Vercel გაცნობებთ, როდესაც მათ მიუახლოვდებით.

სუპაბაზა

უფასო დონე – 500 მბ მონაცემთა ბაზა, 1 გბ ფაილების საცავი, 50,000 ყოველთვიური აქტიური მომხმარებელი

ღირებულება – თუ შენახვის ან მომხმარებლის ლიმიტს გადააჭარბებთ

სად შევამოწმოთ – Supabase-ის დაფა → პარამეტრები → ანგარიშსწორება

გადახდის შეტყობინება – გადადით პარამეტრებში → გადახდა. დააყენეთ მონაცემთა ბაზის და საცავის გამოყენების შეტყობინებები.

Groq API

უფასო დონე – უფასო დონე ტარიფების ლიმიტებით (განსხვავდება მოდელის მიხედვით)

ღირებულება – მაღალი მოცულობის API ზარები უფასო დონის მიღმა

სად შევამოწმოთ – Groq-ის დაფა → გამოყენება

გადახდის შეტყობინება – თქვენს Groq კონსოლში გადადით პარამეტრებში → ბილინგი → ლიმიტები.

გაშვებამდელი საკონტროლო სია

სანამ თქვენს აპლიკაციას მსოფლიოს გაუზიარებთ, გადახედეთ ამ საკონტროლო სიას. ის სამ ჯგუფად იყოფა: მუშაობს თუ არა თქვენი აპლიკაცია, უსაფრთხოა თუ არა და ხედავთ თუ არა რა ხდება გაშვების შემდეგ.

✅ მუშაობს?

  •  პირდაპირი URL სწორად იტვირთება
  •  შესვლა და რეგისტრაცია (ანგარიშის შექმნა, შესვლა, გასვლა)
  •  ხელოვნური ინტელექტის ფუნქცია სისტემაში შესვლის შემდეგ წარმოებაში მუშაობს
  •  აპლიკაცია მუშაობს სხვა მოწყობილობაზე ან ბრაუზერზე (გაუზიარეთ URL თანაგუნდელს გადამოწმებისთვის)

✅ უსაფრთხოა?

  •  API გასაღებები არ ჩანს DevTools Network ჩანართში
  •  ავტორიზაციის სათაური API მოთხოვნებზეა წარმოდგენილი. 
  •  სიჩქარის შემზღუდველი ტრიგერები სწრაფი მოთხოვნის შემდეგ 
  •  გარემოს ცვლადები დაყენებულია Vercel-ში და არა თქვენს კოდში ჩაწერილი.

✅ ხედავთ რა ხდება?

  •  სტრუქტურირებული JSON ჟურნალები გამოჩნდება Vercel-ის ჟურნალების ჩანართში, როდესაც ააქტიურებთ ხელოვნური ინტელექტის ზარს.
  •  ვებ ანალიტიკა ჩართულია
  •  ხარჯების დაფები შემოწმდა Vercel-ისთვის, Supabase-ისთვის და Groq-ისთვის

თუ რომელიმე ელემენტი ვერ მოხერხდა, გამოასწორეთ ის URL-ის გაზიარებამდე.

თუ ყველა ელემენტი დაკმაყოფილებულია, თქვენი აპლიკაცია გასაზიარებლად მზადაა.

პრობლემების მოგვარება

დარწმუნდით, რომ console.log()- ს იყენებთ სერვერის მხარის API მარშრუტებში და არა კლიენტის მხარის კოდში. კლიენტის მხარის ჟურნალები გამოჩნდება ბრაუზერში და არა Vercel-ში.

console.log(logData)-ს ნაცვლად გამოიყენეთ console.log (JSON.stringify ( logData) ) .

შეამოწმეთ რეაგირების დრო თქვენს ჟურნალებში. თუ ის მუდმივად 10 წამზე მეტია, განიხილეთ ჩატვირთვის შეტყობინების დამატება და მოთხოვნის გაყოფა.

Fluid Compute-ის (ახალ პროექტებზე ნაგულისხმევად ჩართული) შემთხვევაში, ფუნქციების Hobby გეგმაზე მუშაობის ხანგრძლივობა 300 წამამდე (5 წუთი) შეიძლება იყოს. Fluid Compute-ის გარეშე, ლიმიტი 60 წამია. თუ თქვენი ხელოვნური ინტელექტის ზარები კვლავ იწურება, დაამატეთ ჩატვირთვის ინდიკატორი და ვადის ამოწურვის შეტყობინება მომხმარებლისთვის.

თქვენი ფრონტენდი პირდაპირ იძახებს გარე API-ს თქვენი ბექენდის ნაცვლად. განაახლეთ თქვენი ფრონტენდი თქვენი Express მარშრუტის გამოსაძახებლად (მაგ., /api/ai-query).

მონაცემები გამოჩნდება შემდეგი განლაგების და რამდენიმე გვერდის მონახულების შემდეგ. ჩართვისა და თქვენი საიტის მონახულების შემდეგ დაელოდეთ რამდენიმე წუთი.

თქვენი აპლიკაცია ხელმისაწვდომია your-app-name.vercel.app- ზე. ეს გამოდგება კონკურსისთვის, მომხმარებლის ტესტირებისთვის და თქვენი პრეზენტაციისთვის. თუმცა, თუ გსურთ, რომ თქვენი აპლიკაცია ნამდვილ ბიზნესს დაემსგავსოს, მორგებული დომენი განსხვავებას ქმნის. tutormatch.app პროფესიონალიზმს ისე გადმოსცემს, როგორც tutormatch-mvp.vercel.app - არა.

Vercel-ის უფასო დონე მხარს უჭერს მორგებულ დომენებს დამატებითი გადასახადის გარეშე (50-მდე თითო პროექტზე, ავტომატური HTTPS-ით). ერთადერთი ღირებულება თავად დომენის სახელია.

აქტივობა 6

(არასავალდებულო) - დააკავშირეთ მორგებული დომენი

სავარაუდო დრო: 15 წუთი

საკუთარი დომენის მისაღებად აირჩიეთ ერთ-ერთი ვარიანტი.

ვარიანტი

ღირებულება

პროცესი

GitHub-ის სტუდენტური დეველოპერის პაკეტი

დომენის რეგისტრატორი

თუ თქვენ გაქვთ სკოლის ელ. ფოსტა, შეგიძლიათ დარეგისტრირდეთ თქვენი GitHub ანგარიშის მეშვეობით. განაცხადის შეტანა შეგიძლიათ education.github.com/pack- ზე. მოიცავს უფასო დომენებს Namecheap-დან (.me), Name.com- დან (.live, .studio, .app, .dev და 20+ სხვა) და .tech დომენებიდან.

GitHub-ის სტუდენტური დეველოპერის პაკეტი

~10-15 აშშ დოლარი წელიწადში

შეიძინეთ Namecheap-დან, Cloudflare-დან ან Google Domains-დან. ფასები განსხვავდება გაფართოების მიხედვით. .com უფრო ძვირია, ვიდრე .site ან .tech

შეიძინეთ Namecheap-დან, Cloudflare-დან ან Google Domains-დან. ფასები განსხვავდება გაფართოების მიხედვით. .com უფრო ძვირია, ვიდრე .site ან .tech

~10-20 აშშ დოლარი წელიწადში

მოძებნეთ და შეიძინეთ პირდაპირ თქვენს Vercel-ის დაფაზე ( პარამეტრები → დომენები ). Vercel ავტომატურად ახდენს DNS-ის კონფიგურაციას. უმარტივესი ვარიანტი, თუ გადახდის სურვილი გაქვთ.

  1. გადადით თქვენს Vercel პროექტზე → პარამეტრები → დომენები
  2. დააჭირეთ ღილაკს „დომენის დამატება“ და შეიყვანეთ თქვენი დომენის სახელი (მაგ., tutormatch.app)
  3. Vercel აჩვენებს თქვენთვის საჭირო DNS ჩანაწერებს. თქვენ ნახავთ შემდეგს:
    • A ჩანაწერი, რომელიც მიუთითებს Vercel-ის IP მისამართზე (root დომენებისთვის, როგორიცაა tutormatch.app).
    • CNAME ჩანაწერი, რომელიც მიუთითებს cname.vercel-dns.com-ზე (ქვედომენებისთვის, როგორიცაა www.tutormatch.app).
  4. გადადით თქვენი დომენის რეგისტრატორის DNS პარამეტრებში და დაამატეთ Vercel-ის მიერ მოწოდებული ჩანაწერები.
  5. დაელოდეთ DNS-ის გავრცელებას. ამას, როგორც წესი, 30 წუთზე ნაკლები დრო სჭირდება, მაგრამ შეიძლება 48 საათამდეც კი დასჭირდეს.

არ გამოტოვოთ ეს ნაბიჯი. თუ ამას გააკეთებთ, თქვენს მორგებულ დომენზე შესვლა შეფერხდება.

  1. გადადით Supabase-ის დაფაზე → ავთენტიფიკაცია → URL კონფიგურაცია .
  2. დაამატეთ თქვენი მორგებული დომენის URL (მაგ., https://tutormatch.app) როგორც საიტის URL-ს , ასევე გადამისამართების URL-ებს .
  3. სიაში შეინახეთ თქვენი .vercel.app URL-იც. ის მაინც სარეზერვო ასლის სახით იმუშავებს.
  1. ბრაუზერში ეწვიეთ თქვენს მორგებულ დომენს. თქვენი აპლიკაცია უნდა ჩაიტვირთოს HTTPS-ით (მოძებნეთ საკეტის ხატულა).
  2. სცადეთ სისტემაში შესვლა. თუ ის გადამისამართებს თქვენს Codespaces URL-ზე ან .vercel.app URL-ზე, ესე იგი, გამოგრჩათ მე-3 ნაბიჯი.
  3. შეამოწმეთ თქვენი ხელოვნური ინტელექტის ფუნქცია (და სხვა API ინტეგრაციები), რათა დარწმუნდეთ, რომ ყველაფერი სრულყოფილად მუშაობს.

პრობლემების მოგვარება

ორჯერ შეამოწმეთ A ჩანაწერი ან CNAME ჩანაწერი თქვენი რეგისტრატორის DNS პარამეტრებში. დარწმუნდით, რომ Vercel-დან მნიშვნელობები ზუსტად დააკოპირეთ.

მოიცადეთ. Vercel ავტომატურად უზრუნველყოფს SSL-ს DNS-ის გავრცელების შემდეგ, თუმცა ამას შეიძლება ერთ საათამდე დასჭირდეს.

განაახლეთ Supabase Auth გადამისამართების URL-ები თქვენი მორგებული დომენის ჩასართავად. სიაში შეინახეთ როგორც .vercel.app, ასევე მორგებული დომენის URL-ები.

ანარეკლი

კარგი, თქვენ ეს გააკეთეთ! თქვენი აპლიკაცია დანერგილია და ფუნქციონირებს! გილოცავთ! დაუთმეთ რამდენიმე წუთი ამ კითხვებზე დაფიქრებას:

Sunset and reflection over lake
01

მონიტორინგი
როგორ ცვლის თქვენი აპლიკაციის ფუნქციონირების ცოდნა შეცდომებზე, შესრულებასა და ხარჯებზე თქვენს წარმოდგენას? რას გააკონტროლებდით ყველაზე ყურადღებით პირველი კვირის განმავლობაში?
02

მოგზაურობა
თქვენ იდეით დაიწყეთ, შექმენით პროტოტიპი, დააკოპირეთ და გამართეთ შეცდომები, დაიცავი ავთენტიფიკაციით და ახლა უკვე განათავსეთ ის მთელ მსოფლიოში. ამ მოგზაურობის რომელმა უნარმა გაგაოცათ ყველაზე მეტად?
03

შემდეგი ნაბიჯები
რას მიანიჭებთ შემდეგ პრიორიტეტს? ახალ ფუნქციებს, ხელოვნური ინტელექტის უკეთეს რეაგირებას, მუშაობის გაუმჯობესებას თუ მომხმარებლებისთვის მარკეტინგს?

ძირითადი ტერმინები

  • განლაგება: თქვენი აპლიკაციის ინტერნეტში მუდმივი URL-ის საშუალებით ხელმისაწვდომობის უზრუნველყოფა. წინასწარი გადახედვის ბმულისგან განსხვავებით, განლაგებული აპლიკაცია აქტიური რჩება მაშინაც კი, როდესაც თქვენი კომპიუტერი გამორთულია.
  • წარმოების გარემო: თქვენი აპლიკაციის ცოცხალი ვერსია, რომელთანაც რეალური მომხმარებლები ურთიერთქმედებენ, განვითარების გარემოსგან განსხვავებით, სადაც კოდს წერთ და ტესტავთ.
  • გარემოს ცვლადები (წარმოება): API გასაღებები და საიდუმლოებები ინახება თქვენი ჰოსტინგის პლატფორმის პარამეტრებში და არა თქვენს კოდში. Vercel-ში ისინი დაყენებულია პროექტის დაფაზე.
  • ავტომატური განლაგება: Vercel ავტომატურად აღადგენს და ხელახლა განალაგებს თქვენს აპლიკაციას ყოველთვის, როდესაც კოდს GitHub-ის მთავარ ფილიალში აგზავნით.
  • სიჩქარის შეზღუდვა: მომხმარებლის მიერ მოცემულ პერიოდში მოთხოვნის რაოდენობის შეზღუდვა. ხელს უშლის ბოროტად გამოყენებას და აკონტროლებს API ხარჯებს. 
  • შეცდომების უსაფრთხო დამუშავება: სერვერზე სრული ტექნიკური დეტალების შეტანისას, მომხმარებლებისთვის ზოგადი, მოსახერხებელი შეცდომის შეტყობინებების დაბრუნება. ხელს უშლის შიდა დეტალების პოტენციური თავდამსხმელებისთვის გამოვლენას.
  • სტრუქტურირებული ჟურნალირება: თქვენს აპლიკაციაში მოვლენების ჩაწერა ორგანიზებული JSON მონაცემების სახით უბრალო ტექსტის ნაცვლად. შესაძლებელს ხდის წარმოების პროცესში მიმდინარე მოვლენების მოძიებას, ფილტრაციას და ანალიზს.
  • დაკვირვებადობა: უნარი, გაიგოთ, თუ რა ხდება თქვენს გაშვებულ აპლიკაციაში გარედან, ჟურნალების, მეტრიკისა და მონიტორინგის დაფების მეშვეობით.
  • სერვერის გარეშე ფუნქციები: ბექენდ კოდი, რომელიც მუშაობს მოთხოვნის შესაბამისად, თქვენი სერვერის მართვის გარეშე. Vercel ავტომატურად გარდაქმნის თქვენს Express.js API მარშრუტებს სერვერის გარეშე ფუნქციებად.
  • მორგებული დომენი: პერსონალიზებული ვებ მისამართი (მაგალითად, tutormatch.app), რომელიც თქვენს საკუთრებაშია და მიუთითებს თქვენს Vercel-ის განლაგებაზე, ნაგულისხმევი .vercel.app URL-ის ნაცვლად.
  • DNS (დომენური სახელების სისტემა): სისტემა, რომელიც დომენურ სახელებს (მაგალითად, tutormatch.app) IP მისამართებად გარდაქმნის, რომლებსაც კომპიუტერები სერვერების მოსაძებნად იყენებენ. როდესაც თქვენ აკავშირებთ მორგებულ დომენს, თქვენ აკონფიგურირებთ DNS ჩანაწერებს Vercel-ზე მითითებისთვის.

დამატებითი რესურსები

განლაგება

უსაფრთხოება

მონიტორინგი

  • Vercel-ის გაშვების ლოგები : ფუნქციის ლოგების და გაშვების დროის გამომავალი მონაცემების გაგება
  • Vercel Observability : დაფა შესრულებისა და შეცდომების მონიტორინგისთვის
  • Vercel Web Analytics : გვერდის ნახვებისა და ვიზიტორების მონაცემების თვალყურის დევნება

ხარჯების მართვა

 

გაკვეთილის შინაარსი
წინა ვიქტორინა
კურსზე დაბრუნება
შემდეგი ვიქტორინა