# Helyi oldal megosztása: ngrok és Cloudflare Tunnel > Így teheted elérhetővé a saját gépen futó WordPress-oldalt az interneten ngrokkal vagy Cloudflare Tunnellel ügyfélbemutatóhoz és webhook-teszteléshez. Ha a WordPress-oldal a saját gépeden fut, kívülről nem éri el senki. Az ügyfél nem látja a bemutatót, a fizetési szolgáltató pedig nem tud webhookot küldeni neki. Az [ngrok](https://ngrok.com/) és a [Cloudflare Tunnel](https://developers.cloudflare.com/tunnel/) erre való: a gépeden futó program kifelé kapcsolódik a szolgáltatóhoz, és kapsz egy nyilvános HTTPS-címet, amely a helyi oldaladra mutat. Nem kell portot nyitnod a routeren. > **A megosztott oldal nyilvános** > > A cím ismeretében bárki megnyithatja az oldalt, amíg az alagút fut. A saját gépeden futó oldal adatbázisa, admin felülete és bővítményei is elérhetők rajta keresztül. Éles ügyféladatot ne tegyél a megosztott példányra, az admin jelszava legyen erős, és az alagutat állítsd le, amint végeztél. ## ngrok ### Telepítés és fiók Az ngrokhoz fiók kell. Az auth tokent a [dashboardon](https://dashboard.ngrok.com/get-started/your-authtoken) találod. ```bash title="Terminál" brew install ngrok ngrok config add-authtoken $TOKENED ``` A `brew` a macOS-es mód. Linuxra és Windowsra a [letöltési oldal](https://download.ngrok.com) ad útmutatót. ### Indítás Add meg a helyi webszerver portját: ```bash title="Terminál" ngrok http 8080 ``` A parancs kiírja a nyilvános címet. Minden fiók kap egy fix, ingyenes „dev domain” címet (például `valami.ngrok-free.dev`), amely újraindításkor nem változik. Ha a helyi oldalad HTTPS-en fut, a cél lehet teljes cím is, például `ngrok http https://localhost:443`. Az ngrok alapból nem ellenőrzi a helyi szerver tanúsítványát. ### Mit érdemes tudni az ingyenes csomagról - Böngészőből érkező HTML-forgalom előtt egy közbeékelt oldal jelenik meg, amely jelzi, hogy a tartalmat az ngrok szolgálja ki. A látogató a **Visit** gombbal lép tovább. Ügyfélbemutatónál szólj előre. A programozott kéréseket (API, webhook) ez nem érinti. - Az ingyenes csomagnak havi keretei vannak (például 1 GB kimenő forgalom és 20 000 HTTP-kérés), és egyetlen dev domainje. A pontos és aktuális korlátokat az [ngrok doksija](https://ngrok.com/docs/pricing-limits/free-plan-limits) sorolja fel. ### Host fejléc átírása Egyes helyi környezetekben több oldal fut egy szerveren, és a szerver a `Host` fejléc alapján választ közülük (például a `valami.local` vagy `valami.test` név). Az ngrok átírhatja ezt a fejlécet egy Traffic Policy fájllal: ```yaml title="traffic-policy.yml" on_http_request: - actions: - type: add-headers config: headers: host: valami.test ``` ```bash title="Terminál" ngrok http 8080 --traffic-policy-file traffic-policy.yml ``` A `Host` fejléc a megadott értékre cserélődik (nem kerül mellé második). Az ngrok a válaszok `Location` fejlécét is átírja az alagút címére. Az oldalon belüli hivatkozásokat ez nem javítja, azokhoz lásd a WordPress-részt lent. ### Webhook-tesztelés Fizetési szolgáltató vagy más külső rendszer webhookját így fogadhatod a helyi gépeden: 1. Indítsd el az oldalt és az ngrokot. 2. A szolgáltató beállításai között add meg webhook-címként az ngrok HTTPS-címét az oldalad webhook-végpontjának útvonalával. 3. Váltsd ki az eseményt a szolgáltató tesztfelületén. 4. Nézd meg a beérkezett kérést az ngrok dashboard **Traffic Inspector** oldalán. Itt a **Replay** gombbal újra elküldheted ugyanazt a kérést a helyi gépedre, így nem kell minden hibajavítás után új eseményt kiváltanod. Az ngrok a `verify-webhook` Traffic Policy akcióval a webhook aláírását is ellenőrzi a szolgáltatónként megadott titokkal (a támogatott szolgáltatók között ott van a Stripe, a GitHub, a Shopify és a Twilio). A részletekért lásd az [ngrok webhook-oldalát](https://ngrok.com/docs/share-localhost/webhooks). ### Hozzáférés korlátozása Ügyfélbemutatónál érdemes bejelentkezéshez kötni az elérést. Az ngrok Traffic Policy-vel jelszót ([`basic-auth`](https://ngrok.com/docs/gateway/traffic-policy/actions/basic-auth)) vagy OAuth-bejelentkezést ([`oauth`](https://ngrok.com/docs/share-localhost/auth)) kérhet az oldal előtt. Webhook-tesztelésnél ne kapcsold be: a szolgáltató szervere nem tud bejelentkezni, így a kérései elbuknak. ## Cloudflare Tunnel (Quick Tunnel) A gyors, fiók nélküli változat a **Quick Tunnel**. Nem kell Cloudflare-fiók és saját domain sem. A Cloudflare tesztelésre és fejlesztésre szánja, éles használatra nem. ```bash title="Terminál" brew install cloudflared cloudflared tunnel --url http://localhost:8080 ``` A `brew` itt is a macOS-es mód, más rendszerekre a [letöltési oldal](https://developers.cloudflare.com/tunnel/downloads/) ad útmutatót. A parancs kiír egy `trycloudflare.com` végű címet. Az alagút a `cloudflared` leállításáig él. A Quick Tunnel korlátai: - a cím minden indításkor új; - nincs rendelkezésre állási garancia; - legfeljebb 200 egyidejű kérést bír, a többi `429` választ kap; - a Server-Sent Events nem működik. Hozzáférést az `--allowed-mail` kapcsolóval korlátozhatsz. A látogató megadja az e-mail-címét, és egyszeri PIN-kódot kap rá: ```bash title="Terminál" cloudflared tunnel --url http://localhost:8080 --allowed-mail alice@example.com ``` Az e-mailes azonosításhoz interaktív böngésző kell, programozott kérésekkel (például webhookkal) nem működik. Webhook-teszthez ezért ne használd. Ha állandó címre van szükséged, a Cloudflare dokumentációja szerint hozz létre egy rendes Cloudflare Tunnelt. Ahhoz Cloudflare-fiók és saját domain kell, a beállítás pedig túlmutat ezen a cikken. ## WordPress: a cím átírása A WordPress a `home` és a `siteurl` beállítás alapján generálja a hivatkozásokat, így az oldal a megosztott címen a helyi címre mutató linkekkel és CSS-fájlokkal töltődne be. Ezt a két értéket kell ideiglenesen az alagút címére állítani. A WordPress hivatalos dokumentációja szerint a `WP_HOME` és a `WP_SITEURL` konstans felülírja az adatbázisban tárolt értéket anélkül, hogy azt módosítaná. Ha kiveszed a sorokat, visszaáll a korábbi érték. ### Hagyományos WordPress ```php title="wp-config.php" define( 'WP_HOME', 'https://valami.ngrok-free.dev' ); define( 'WP_SITEURL', 'https://valami.ngrok-free.dev' ); ``` Az érték `https://`-sel kezdődik, a végén nincs perjel. Az alagút leállítása után töröld vagy kommenteld ki a két sort. Ha a cím minden indításkor változik (Quick Tunnel), a dokumentáció szerint megadható a fejlécből is, `$_SERVER['HTTP_HOST']` alapján: ```php title="wp-config.php" define( 'WP_HOME', 'https://' . $_SERVER['HTTP_HOST'] ); define( 'WP_SITEURL', 'https://' . $_SERVER['HTTP_HOST'] ); ``` A dokumentáció megjegyzi, hogy a `SERVER_NAME` biztonságosabb, mert a `HTTP_HOST` a kérés küldőjétől függ. Ezt a megoldást csak ideiglenesen, a megosztás idejére használd, és a kódot utána vedd ki. ### Bedrock [Bedrockban](https://hub.hellowp.io/hu/knowledge-base/developer-tools/bedrock/) a két érték a [`.env` fájlban](https://hub.hellowp.io/hu/knowledge-base/developer-tools/dotenv/) van: ```env title=".env" WP_HOME='https://valami.ngrok-free.dev' WP_SITEURL="${WP_HOME}/wp" ``` A megosztás végén írd vissza a helyi címet. ### Amit a konstans nem javít A konstans csak a `home` és `siteurl` értékét írja felül. Ami teljes címként el van mentve a tartalomban vagy egy bővítmény beállításában, az a régi címre mutat. Ha ilyen hivatkozás elromlik, azt külön kell javítani. Az adatbázis tartós átírása (például `wp search-replace`) helyett inkább maradj a konstansnál, mert az visszafordítható. A [WP-CLI](https://hub.hellowp.io/hu/knowledge-base/developer-tools/wp-cli/) cikkben a keresés-csere is szerepel. ### LocalWP A [LocalWP](https://hub.hellowp.io/hu/knowledge-base/developer-tools/localwp/) saját megosztási funkcióval is rendelkezik, a **Live Links**-szel. Ha nem akarsz külön eszközt, először azt próbáld ki. ## Mire figyelj - Webhook-teszthez a szolgáltató tesztkörnyezetét (sandbox) használd, ne éles kulcsot. - Az ideiglenes `WP_HOME` és `WP_SITEURL` ne kerüljön commitba. - Az ügyfélnek küldött cím nem titok: bárki, akinek továbbítja, megnyithatja. Fontosabb tartalomnál kérj bejelentkezést. ## Hasznos linkek - [ngrok: Share Localhost Quickstart](https://ngrok.com/docs/share-localhost/quickstart) - [ngrok: HTTP/S Agent Endpoints (Host fejléc átírása)](https://ngrok.com/docs/gateway/endpoints/http) - [ngrok: Test Webhooks Locally](https://ngrok.com/docs/share-localhost/webhooks) - [ngrok: Free Plan Limits](https://ngrok.com/docs/pricing-limits/free-plan-limits) - [Cloudflare: Quick Tunnels](https://developers.cloudflare.com/cloudflare-one/networks/connectors/cloudflare-tunnel/do-more-with-tunnels/trycloudflare/) - [Cloudflare: cloudflared letöltése](https://developers.cloudflare.com/tunnel/downloads/) - [WordPress: Editing wp-config.php (WP_HOME, WP_SITEURL)](https://developer.wordpress.org/advanced-administration/wordpress/wp-config/)