Lokal işə salma, HTTPS tuneli və ChatGPT üçün əlçatanlıq

1. localhost — bu yalnız sizin üçündür, ChatGPT üçün yox

Gəlin bu modulun əsas kognitiv dissonansı ilə başlayaq. Siz brauzerdə http://localhost:3000 açırsınız, hər şey əla işləyir, Next.js gülümsəyir, vidcet render olunur. Məntiqli görünür: “Məndə URL var, elə isə onu sadəcə ChatGPT‑yə verək”.

Məsələ burasındadır ki, localhost “mənim kompüterimin internetdə sehrli domeni” deyil. Bu xüsusi addır və həmişə brauzer və ya müştəri harada işləyirsə elə həmin maşına işarə edir. Noutbukunuz özünə müraciət edir. OpenAI serverləri (orada ChatGPT işləyir) də localhost‑a müraciət edə bilir… amma öz maşınlarına — data mərkəzin içində. Sizin Next.js isə ev routeri, NAT və bəlkə də korporativ VPN arxasında şən‑şədəd gizlənib.

Bu mühazirədə biz:

• nəyə görə localhost‑un ChatGPT üçün əlçatan olmadığını anlayacağıq;
• cloudflared vasitəsilə localhost:3000‑dan açıq URL‑ə HTTPS tuneli quracağıq;
• bu URL‑i ChatGPT Dev Mode‑a qoşacağıq;
• “kod → tunel → ChatGPT” zəncirini vidcetdə sadə dəyişikliklə yoxlayacağıq və tipik “minaları” müzakirə edəcəyik.

Bundan iki sadə fakt çıxır:

1. ChatGPT sizin noutbukun harada olduğunu bilmir.
2. Hətta bilsə belə, ona birbaşa qoşula da bilməz — daxil olan bağlantılar bağlıdır.

Bundan əlavə, ChatGPT prinsip etibarilə yalnız açıq HTTPS endpoint‑ləri (giriş nöqtələri) ilə işləyir: normal domen və TLS sertifikatı lazımdır. Təhlükəsizlik səbəblərinə görə OpenAI serverləri şifrələməsiz təsadüfi HTTP ünvanlara getmir, ona görə də mütləq etibarlı sertifikatlı HTTPS domen lazımdır. Sadəcə http://xarici‑IP‑ünvanım:3000 ünvanını bayıra çıxarmaq artıq variant deyil.

Bu səbəbdən bizə vasitəçi lazımdır — aşağıdakıları edən bir servis:

1. İnternetdə normal HTTPS domeni ilə fəaliyyət göstərir.
2. Bu domendən sizin localhost:3000 ünvanınıza sorğuları təhlükəsiz şəkildə yönləndirə bilir.

Bu, HTTPS tunelidir.

2. HTTPS tuneli nədir: intuitiv model

Qorxulu sözləri kənara qoysaq, tunel — sizə müvəqqəti (və ya daimi) açıq bir URL verən və bütün sorğuları oradan sizin lokal portunuza ötürən servisdır. Şəbəkə terminlərində bu, buluda çıxan bağlantını saxlayan əks proksi‑serverdir (reverse‑proxy).

Intuitiv bənzətmə: siz bağlı qapının (ev routeri) arxasındasınız, tunel isə çöldə “bütün məktublar bura” yazılı lövhə ilə dayanan kuryerdir, o bəzən arxa qapıdan içəri girib məktubları əlinizə verir.

Sorğunun trayektoriyası təxminən belə görünür:

sequenceDiagram
    participant ChatGPT as ChatGPT (bulud)
    participant Tunnel as HTTPS tuneli
(Cloudflare / ngrok)
    participant Dev as Sizin dev‑serveriniz
(localhost:3000)

    ChatGPT->>Tunnel: HTTPS sorğusu https://xyz.trycloudflare.com ünvanına
    Tunnel->>Dev: HTTP sorğusu http://localhost:3000 ünvanına
    Dev-->>Tunnel: Next.js cavabı
    Tunnel-->>ChatGPT: HTTPS cavabı

Burada əsas məqamlar bunlardır.

Birincisi, tunel servisinə bağlantını başlayan sizsiniz. Utilit ( cloudflared, ngrok və s.) özü buluda çıxan bağlantını yaradır. Bu, NAT/firewall arxasında belə demək olar ki, həmişə icazəlidir.

İkincisi, tunel servisi sizə etibarlı sertifikatlı HTTPS domen verir, ona görə əl ilə öz‑özünü imzalayan TLS qaldırmağa ehtiyac yoxdur.

Üçüncüsü, ChatGPT üçün App‑ınız adi HTTPS domenli veb‑servis kimi görünür. O, trafikin sonradan kimin isə noutbukuna getdiyindən xəbərsizdir.

3. Hansı tunellər var və kursda nəyi seçəcəyik

Veb‑inkişaf ekosistemində bu məsələ üçün bir neçə məşhur həll var:

• ngrok — janrın klassikası, “lokalı çölə necə göstərməli” mövzusunda uzun müddət de‑fakto standart olub.
• Cloudflare Tunnel (cloudflared) — Cloudflare‑dən müasir, pulsuz həll, qeydiyyatsız belə *.trycloudflare.com tipli domen verir; istəsəniz öz domeninizi də qoşa bilərsiniz.
• LocalTunnel — minimum sehr, sadəcə müvəqqəti HTTPS URL verən bir npm paket, məsələn https://something.loca.lt.

Onların hamısı eyni məsələnin həllidir: lokal serverə ChatGPT‑yə uyğun açıq HTTPS domen vermək.

Kursda diqqəti yayındırmamaq üçün “əsas” alət kimi Cloudflare Tunnel‑i cloudflared utiliti ilə götürəcəyik. Səbəblər sadədir: sürətli tunel üçün qeydiyyat tələb etmir, normal HTTPS verir, bir əmr ilə asanlıqla işə düşür.

Bununla belə, əgər siz artıq ngrok pərəstişkarısınızsa — problem deyil. Əmrlər bir az fərqli olacaq, amma konsepsiya eynidir: ngrok http 3000 əvəzinə cloudflared tunnel --url http://localhost:3000.

Naviqasiya asan olsun deyə, alətləri kiçik cədvəldə toplayaq.

https://*.trycloudflare.com

https://*.ngrok.app

https://*.loca.lt

Bu mühazirədə Cloudflare Tunnel‑in “sürətli birdəfəlik tunel” rejiminə fokuslanacağıq. Bu, Next.js‑inizi ChatGPT ilə Dev Mode‑da “dostlaşdırmaq” üçün artıqlaması ilə kifayətdir.

4. Lokal Next.js‑in işlədiyini yoxlayırıq

Hər hansı bir şeyi tunel ilə bayıra çıxarmadan əvvəl lokal serverin həqiqətən işlədiyinə əmin olun. Əks halda siz tuneli aylarla sazlayarsınız, halbuki problem sadəcə Next.js‑in işə düşməməsidir.

Standart ardıcıllığı xatırladım:

# layihənin kökündən, Apps SDK şablonu ilə
npm install      # bunu hələ etməmisinizsə
npm run dev      # Next.js dev serverini işə salma

Susmaya görə Next.js 16 http://localhost:3000 üzərindən qalxacaq (port məşğul deyilsə). Terminalda buna bənzər bir şey görəcəksiniz:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

Brauzerdə http://localhost:3000 açın və şablon səhifəsinin açıldığını yoxlayın. Bu, sizin “lokal laboratoriyanız”dır. Burada nəsə işləmir (yığma xətası, TypeScript şikayət edir, port məşğuldur) — əvvəlcə bunu düzəldin, sonra tunelə keçin.

5. Cloudflare Tunnel işə salırıq: localhost‑dan açıq HTTPS‑ə

Ən maraqlı hissəyə keçək — internetdə istənilən kəsin (o cümlədən ChatGPT) Next.js‑inizi HTTPS URL ilə aça bilməsi üçün şərait yaradırıq.

cloudflared quraşdırılması

Quraşdırma üsulu OS‑dən asılıdır. macOS üçün ən sadə yol Homebrew vasitəsilədir:

brew install cloudflare/cloudflare/cloudflared

Windows və Linux‑da hazır binar yükləyə və ya Cloudflare sənədləşməsində tövsiyə olunan paket menecerindən istifadə edə bilərsiniz (keçidlər modulun əlavə materiallarında var).

Quraşdırmanı aşağıdakı əmrlə yoxlamaq olar:

cloudflared --version

Utilit tapılmadısa, PATH dəyişənini və ya terminalı yenidən başladın.

Sürətli birdəfəlik tunel

Hazırda məqsədimiz minimal işlək tuneldir — hesab, domen və mürəkkəb konfiqlərsiz. Bunun üçün cloudflared‑in quick tunnel rejimi var və o, sizə trycloudflare.com domenində URL verir.

npm run dev işlək ikən başqa bir terminalda icra edin:

cloudflared tunnel --url http://localhost:3000

Sadə bir qaydanı yadda saxlayın: HTTPS — çöldə, HTTP — içəridə. cloudflared sizə çöldə HTTPS domen verir, amma sizin localhost:3000 ünvanınıza adi HTTP ilə gedir.

Qısa bir loqdan sonra bu cür sətir görəcəksiniz:

INF +-------------------------------------------------------------+
INF |  Your quick Tunnel has been created!                        |
INF |  https://giftgenius-1234.trycloudflare.com                  |
INF +-------------------------------------------------------------+

https://giftgenius-1234.trycloudflare.com — lokal tətbiqinizin yeni açıq ünvanıdır. Tunel bu domenə gələn HTTPS sorğuları qəbul edir və onları http://localhost:3000 ünvanına ötürür.

Bir neçə vacib məqam.

Birincisi, cloudflared işləyən terminal açıq qalmalıdır, tunel sizə lazım olduğu müddətdə. Siz onu bağlayan kimi (və ya Ctrl+C basanda) tunel dayanır, URL işləməkdən dayanır.

İkincisi, hər quick tunnel işə salınanda URL dəyişə bilər. Bizim tədris inkişafı üçün bu normaldır: indiki modulun məqsədi — ChatGPT‑yə lokal Next.js‑inizə işlək HTTPS ünvanı vasitəsilə giriş verməkdir. Amma bu o deməkdir ki, bəzən ChatGPT Dev Mode‑da URL‑i yeniləməli olacaqsınız. 7‑ci modulda tunellər mövzusuna qayıdacağıq və artıq sabit dev domen quracağıq ki, ünvan dalınca qaçmayaq.

Tuneli adi sayt kimi yoxlayırıq

Hamısını ChatGPT‑yə qoşmazdan qabaq, tunelin həqiqətən internetdən açıq olduğunu yoxlayaq.

1. Aldığınız https://...trycloudflare.com ünvanını brauzerdə açın.
2. Elə həmin UI‑ni görməlisiniz ki, http://localhost:3000 üzərində var.
3. npm run dev işləyən konsolda yeni sorğular görünəcək — yəni Next.js həqiqətən xarici müraciəti işləyir.

Səhifə açılmırsa və ya xəta varsa, əvvəlcə bunu yoxlayın:

• npm run dev işləyirmi.
• Tuneli işə salarkən lokal URL‑də səhv etməmisiniz ki (http://localhost:3000, https:// yox və port 3001 yox).
• Hər hansısa şey çıxan bağlantıları bloklamır ki (nadir hallarda sərt korporativ şəbəkələrdə ola bilər).

6. Bu URL‑i ChatGPT Dev Mode‑a ötürürük

İndi zənciri birləşdirmək üçün hər şeyimiz var:

ChatGPT (bulud) → sizin HTTPS tunel → lokal Next.js.

Dev Mode interfeysinin bir hissəsini əvvəlki mühazirədə görmüsünüz, indi isə eyni şeyi real HTTPS URL ilə edirik, nəzəri olanla yox.

ChatGPT‑də ümumi ardıcıllıq belədir.

Əvvəlcə brauzerdə ChatGPT‑ni açın və inkişafçılar bölməsinə keçin (adətən “Developer”, “Apps”, “My apps” kimi — UI yenilənəndə konkret adlar dəyişə bilər).

Yeni tətbiq yaradın və ya artıq yaratmısınızsa mövcud dev tətbiqi redaktə edin.

App URL‑inizi daxil etməli olduğunuz sahəyə tunelin kök ünvanını yazın, məsələn:

https://giftgenius-1234.trycloudflare.com/mcp

Giriş nöqtəsi bizim /route/mcp.ts faylıdır. ChatGPT qoşularkən onunla başlayacaq və sonra lazım olan bütün məlumatları çəkəcək. Şablonun README‑sində başqa yol tələb olunursa göstərilə bilər (xüsusən bir neçə tətbiq varsa); amma hələlik tunelin kök URL‑i + /mcp — sizə lazım olan budur.

Tətbiqin konfiqurasiyasını yadda saxlayın. Bu anda ChatGPT tunel vasitəsilə tətbiqinizə bir neçə sorğu edir:

• App manifestini (metaməlumatlar, alətlər və s.) oxuyur.
• MCP endpointinin əlçatanlığını yoxlayır.
• Bütün alətlərin (tools) və resursların siyahısını alır.
• Bütün vidcetlərin HTML kodunu keşləyir(!)

Hər şey qaydasındadırsa, tətbiqinizi Dev‑Apps siyahısında görəcəksiniz. Nəsə pozulubsa (manifest yalnışdır, server cavab vermir, tunel düşüb), ChatGPT “App unavailable” və ya ona bənzər bir xəta göstərəcək.

Vacibdir: bu eyni HTTPS URL‑i ChatGPT həm alət çağırışları (MCP), həm də vidcet və statikanı yükləmək üçün istifadə edəcək. Növbəti bölmədə bu iki rolu ayrıca izah edəcəyik.

7. İndi sorğular necə gedir: tunelinizin iki rolu

Vacibdir dəqiq başa düşmək, ChatGPT bu URL ilə nə edir. Apps SDK arxitekturasında iki əsas giriş nöqtəsi var: MCP endpointi və UI vidcet.

Sadələşdirilmiş zəncir belədir:

flowchart LR
    ChatGPT["ChatGPT (model)"] 
    subgraph Internet
        Tunnel[HTTPS tuneli
giftgenius-1234.trycloudflare.com]
    end
    Local["Next.js dev‑server http://localhost:3000"]

    ChatGPT -- HTTP(S) sorğuları /mcp ünvanına --> Tunnel
    ChatGPT -- iframe yüklənməsi /widget --> Tunnel
    Tunnel --> Local

Tunelin faktiki olaraq iki əsas rolu var:

• Rol 1: MCP endpointi (alətlər). Model aləti (tool) çağırmağa qərar verəndə, həmin domen üzrə MCP endpointinə HTTP POST edir (şablonda bu Next.js‑də app/mcp/route.ts marşrutudur).
• Rol 2: UI vidcet və statika. Model vidcet göstərməyə qərar verəndə, sizin URL ilə iframe daxil edir (adətən /widget və ya manifestdə göstərilən yol) və yükləmə yenə tunel vasitəsilə gedir.

Bu mənada tunel “tək nəsə üçün” deyil, o sizin lokal App‑a vahid qapıdır: UI, MCP, statika — hamısı eyni açıq HTTPS domeni üzərindən gedir.

8. Təcrübə: “kod → tunel → ChatGPT” zəncirini yoxlayırıq

Hər şeyin həqiqətən işlədiyinə əmin olmaq üçün, sxemlərdə gözəl çəkilmiş olmasından başqa, minimal praktik ssenari icra edin.

Birincisi, npm run dev işə salın və http://localhost:3000 brauzerdə açıldığını yoxlayın.

İkincisi, cloudflared tunnel --url http://localhost:3000 işə salın və açıq HTTPS URL alın. Onu başqa brauzerdə və ya hətta başqa cihazda (məsələn, mobil internetlə telefonda) yoxlayın — beləliklə, sorğuların internetdən keçdiyinə, yalnız öz kompüterinizdə fırlanmadığına əmin olacaqsınız.

Üçüncüsü, ChatGPT‑ni açın, Dev Mode‑a keçin və App‑ınızın bu URL‑ə qoşulu olduğunu yoxlayın. ChatGPT‑də Composer bölməsində App‑ınızı seçin, dialoqa başlayın və baxın, ChatGPT vidceti daxil edirmi, UI‑nizi yükləyirmi.

Məhz sizin kod olduğunun aydın görünməsi üçün, vidcetdə çox sadə bir şeyi dəyişin, məsələn başlığı:

// app/widget/page.tsx (nümunə)
'use client';

export default function GiftGeniusWidget() {
  return <h1>GiftGenius tunel vasitəsilə 🚇</h1>;
}

Faylı saxladıqdan sonra:

1. Next.js‑in fast refresh tamamlanmasını gözləyin,
2. ChatGPT‑də tətbiqi əlavə etdiyiniz bölməyə keçin və onu yeniləyin (refresh),
3. ChatGPT‑də App ilə sessiyanı açın/yaxud yeniləyin,
4. Vidcetinizin göstərilməsini xahiş edən yeni sorğu yazın,
5. Yeni başlıq mətninin artıq ChatGPT daxilində göründüyünə əmin olun.

Bu, kiçik də olsa həqiqət anıdır: siz az öncə öz maşınınızdakı kodu dəyişdiniz və bu dəyişiklik tunel vasitəsilə buluddakı ChatGPT interfeysində əks olundu.

9. Təhlükəsizlik və “nəyi dəqiq olaraq çölə çıxardınız” haqqında bir az

İstənilən tunel oyuncaq deyil, həqiqi açıq girişdir maşınınıza. Bizim tədris ssenarisində yalnız localhost:3000‑u (orada Next.js tətbiqi işləyir) yönləndiririk. Bu, nisbətən təhlükəsizdir, əgər:

• bu port başqa heç nəyə xidmət etmirsə;
• sizin “canavar‑tətbiqiniz” yoxdursa ki, nə bilim ora niyəsə verilənlər bazası admin paneli, phpMyAdmin və daha dörd demo servis tikmisiniz.

Bir neçə vacib praktiki qayda.

Tunel bir inkişaf (dev) alətidir, döyüş prodaksionu deyil. Biz onu qəsdən Dev Mode‑da istifadə edirik, real istifadəçilər üçün yox, və əlbəttə ki, ödəniş qəbul etmək üçün heç vaxt yox.

Eyni portda (3000) heç bir admin panel, parolsuz bazalar və oxşar şeyləri işə salmamağa çalışın. Tunel işlədiyi müddətdə bu portda cavab verən hər şey internetdən görünür.

trycloudflare.com URL‑inizi hər yerə paylaşmayın. Bəli, tədris layihəsi edərkən kimsənin onu aktiv skan edəcəyi ehtimalı yüksək deyil. Amma “dev server linkini hər yerə atırıq” vərdişi prodaksionda pis nəticələr verə bilər.

Sonra, Vercel və production mühitləri mövzularına çatanda sabit domenli normal hostinq və prodaksion təhlükəsizliyini istifadə edəcəyik, tunel isə sırf dev aləti olaraq qalacaq.

10. Lokal işə salma və tunellə işləyərkən tipik səhvlər

Artıq bizdə lokal Next.js, işlək HTTPS tunel və ChatGPT‑də qoşulmuş Dev Mode var. Sonda — demək olar ki, hamıda ilk iterasiyalarda görünən bir neçə tipik səhv və onları necə tez diaqnostika etmək olar.

Səhv №1: http://localhost:3000 ünvanını birbaşa ChatGPT‑də istifadə etmək cəhdi.
Bəzən yeni başlayanlar bu URL‑i sadəcə Dev Mode konfiqinə kopyalayır və ChatGPT‑nin nəyə görə App‑a çata bilmədiyinə təəccüblənirlər. Xatırladım: localhost — sorğunu edən üçün “özüm” deməkdir. ChatGPT üçün bu, OpenAI serverləridir, sizin noutbuk deyil. Siz bununla bağlı özünüzdə xüsusi loqlar görməyəcəksiniz, çünki sorğular ümumiyyətlə maşınınıza çatmır.

Səhv №2: mövcud olmayan və ya yalnış porta tunel açmaq.
Tez‑tez belə olur: vaxtilə npm run dev‑i 3000 portunda işlətmisiniz, server artıq dayanıb, amma ikinci terminalda adət üzrə cloudflared tunnel --url http://localhost:3000 işə salırsınız. Cloudflare sizə gözəl HTTPS domen verir, amma açanda — xəta. Diaqnoz sadədir: lokal server işləmir. Həmişə əvvəlcə brauzerdə http://localhost:3000 yoxlayın, sonra tuneli qoşun.

Səhv №3: tuneli işə salarkən http:// və https:// arasında qarışıqlıq.
Tunel sizə çöldə HTTPS verir, amma lokal serverə HTTP ilə getməlidir, məsələn http://localhost:3000. https://localhost:3000 yazmaq tez‑tez daxildə TLS ilə qəribə xətalara və ya ümumiyyətlə əlçatmazlığa səbəb olur. Qaydanı unutmayın: HTTPS — çöldə, HTTP — içəridə.

Səhv №4: ChatGPT‑də aktiv test zamanı tunelin olduğu terminalın bağlanması.
Daha bir klassik hal: hər şeyi sazladınız, App ChatGPT‑də işləyir, sonra təsadüfən cloudflared olan terminal pəncərəsini bağlayırsınız. 10 dəqiqə sonra ChatGPT‑yə qayıdırsınız — “App unavailable”. Səbəb sadədir: URL App ayarlarında qalıb, amma tunelin özü söndürülüb. Sadə qaydanı yadda saxlayın: Dev Mode‑da App‑ı test etdiyiniz müddətdə tunelin olduğu terminal daima açıq qalmalıdır.

Səhv №5: tunel yenidən işə salındıqdan sonra yeni URL‑dən xəbərsiz istifadə.
Quick tunnel rejimində Cloudflare hər işə salmada yeni *.trycloudflare.com verir. cloudflared‑i dayandırıb yenidən işə salmısınızsa, amma ChatGPT‑də hələ də köhnə URL göstərilibsə, ChatGPT ora gedəcək və taym‑autlar və ya yad servis görəcək. Tunelin URL‑i dəyişəndə onu həmişə Dev Mode ayarlarında yeniləyin. Daha sonra sabit dev domen qurmağın yolundan danışacağıq ki, URL dalınca qaçmayasınız.

Səhv №6: eyni portda artıq və ya riskli servislərin yönləndirilməsi.
Bəzən rahatlıq üçün inkişafçılar 3000 portunda təkcə Next.js deyil, müxtəlif “xidmətləri” də işə salırlar: debug panel, avtorizasiyasız eksperimental API və s. Siz bu portu tunel ilə bayıra çıxaran kimi, bütün bu şeylər də çöldən görünür. Tədris layihəsi üçün bəlkə ciddi heç nə olmaz, amma real layihələrdə belə vərdiş sızmaların və sındırılmaların riskini xeyli artırır. Həmişə yadınızda saxlayın: tuneldə göstərdiyiniz portda cavab verən hər şey internetə baxır.