Helyi oldal megosztása: ngrok és Cloudflare Tunnel

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 és a Cloudflare 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 találod.

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 ad útmutatót.

Indítás

Add meg a helyi webszerver portját:

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 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:

traffic-policy.yml

on_http_request:
  - actions:
      - type: add-headers
        config:
          headers:
            host: valami.test

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.

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) vagy OAuth-bejelentkezést (oauth) 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.

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 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á:

Terminál

cloudflared tunnel --url http://localhost:8080 --allowed-mail [email protected]

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

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:

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 a két érték a .env fájlban van:

.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 cikkben a keresés-csere is szerepel.

LocalWP

A 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
• ngrok: HTTP/S Agent Endpoints (Host fejléc átírása)
• ngrok: Test Webhooks Locally
• ngrok: Free Plan Limits
• Cloudflare: Quick Tunnels
• Cloudflare: cloudflared letöltése
• WordPress: Editing wp-config.php (WP_HOME, WP_SITEURL)