Suomi

cloudflare
cloudflare-tunnel
https
paikallinen-debuggaus
mukautettu-isäntänimi

Kivuton paikallinen debuggaus: HTTPS:n ja mukautetun isäntänimen saavuttaminen Cloudflare Tunnelilla

Tässä artikkelissa esitellään, kuinka käyttää Cloudflare Tunneleita HTTPS:n ja mukautetun isäntänimen saavuttamiseksi kivuttomaan paikalliseen debuggaamiseen.

Yijun

Developer

12/26/2023

Lopeta viikkojen tuhlaaminen käyttäjien tunnistautumiseen

Julkaise turvallisia sovelluksia nopeammin Logtolla. Integroi käyttäjien tunnistautuminen minuuteissa ja keskity ydintuotteeseesi.

Aloita

Päivittäisessä kehityksessämme käytämme usein http://localhost sovellustemme käyttämiseen ja debuggaamiseen, mikä riittää useimmissa tapauksissa. Kuitenkin tilanteissa, kuten seuraavissa, saatamme tarvita HTTPS:ää ja mukautettua isäntänimeä sovellustemme debuggaamiseen:

Kun sovelluksesi käyttää APIa, joka vaatii HTTPS:ää (esim. Web Crypto API tai muut kolmannen osapuolen kirjastot, jotka vaativat HTTPS:ää)
Kun haluat integroida kolmannen osapuolen palvelun, joka vaatii sinua tarjoamaan globaalisti saatavilla olevan HTTPS-pohjaisen API-rajapinnan ja sinun täytyy debugata tätä rajapintaa

Markkinoilla on monia ratkaisuja näihin ongelmiin, mutta useimmat niistä ovat monimutkaisia ja alttiita virheille. Tässä haluaisin esitellä, kuinka käyttää Cloudflare Tunnelia nopeasti HTTPS:n ja mukautetun isäntänimen käyttämiseen paikallisessa kehityksessä.

Mikä on Cloudflare Tunnel

Cloudflare Tunnel on Cloudflaren tarjoama palvelu, joka mahdollistaa infrastruktuurisi turvallisen yhdistämisen Cloudflaren verkkoon. Se luo pohjimmiltaan turvallisen ja tehokkaan yhteyden palvelinten ja Cloudflaren globaalin verkon välille varmistaen, että verkkoliikenteesi on suojattua ja optimoitua.

Käyttämällä Cloudflare Tunnelia voit helposti yhdistää paikallisen kehityskoneesi Cloudflaren globaaliin verkkoon. Sen jälkeen voit isännöidä verkkotunnustasi Cloudflaressa ja ohjata kyseisen verkkotunnuksen pyynnöt paikalliselle koneellesi Cloudflare Tunnelin kautta.

Esivaatimukset

Ennen aloittamista varmista, että:

Sinulla on jo verkkotunnus ja olet poistanut DNSSEC käytöstä rekisterinpitäjälläsi (missä olet ostanut verkkotunnuksesi).
Olet aiemmin luonut Cloudflare-tilin.

Huomautus: Tässä opetusohjelmassa, havainnollistamistarkoituksissa, oletamme, että käytämme 'demo.com' verkkotunnustamme.

Lisää verkkosivusto Cloudflareen

Ensiksi sinun on kirjauduttava sisään Cloudflaren hallintapaneeliin Cloudflare-tililläsi ja valittava "Website"-vaihtoehto vasemmasta valikosta. Napsauta sitten "Get started" painiketta sivulla (jos siellä on jo merkintä, napsauta "Add website"). Seuraa kehotteita verkkosivuston lisäämisen viimeistelemiseksi omistamallasi verkkotunnuksella. Kun olet onnistuneesti lisännyt verkkosivuston, näet seuraavaa sisältöä:

Website (inactive)

Kuten kuvassa on esitetty, lisättyä verkkosivustoa ei ole vielä aktivoitu. Sinun on seurattava sivun ohjattua käyttöä kirjautuaksesi verkkotunnuksesi rekisterinpitäjään ja päivittämällä verkkotunnuksesi nimipalvelimet verkkosivustosi aktivoimiseksi.

GoDaddyn verkkotunnuksen ottaminen esimerkiksi:

Siirry verkkotunnuksen asetussivulle, käytä "Nameservers"-vaihtoehtoa DNS-välilehden alla ja muuta nimipalvelimet oppaan osoittamiin arvoihin:

Nameservers settings

Muutoksen jälkeen odota hetki, ja vastaava verkkosivusto Cloudflaressa aktivoituu:

Website active

Kun olet konfiguroinut nämä sisällöt, verkkotunnuksesi isännöidään Cloudflaressa, ja Cloudflare ottaa automaattisesti käyttöön HTTPS:n verkkotunnukselle.

Luo tunnel

Palaa Cloudflaren hallintapaneelin etusivulle, valitse "Zero Trust" vasemmasta valikosta ja valitse "Tunnels" 'Access'-hakemistosta. Napsauta sitten "Add a tunnel" sivulla ja kirjoita mikä tahansa tunnelin nimi (esim. my-dev-tunnel). Yhdistä paikallinen kehityskoneesi Cloudflare-tunneliin sivun ohjeiden mukaan.

Install tunnel

MacOS:n ottaminen esimerkiksi, avaa terminaali ja suorita sivulla esitetty komento:

Jos koneellesi on jo aiemmin asennettu "cloudflared", sinun ei tarvitse suorittaa brew install cloudflare/cloudflare/cloudflared.

Tunnel installed

Sen jälkeen suorita cloudflared tunnel list terminaalissasi, ja näet, että koneesi on jo yhdistetty tunneliin:

List tunnels

Reititä liikenne luotuun tunneliin

Tunnelin luomisen jälkeen konfiguroimme tunnelille reittisääntöjä.

Oletetaan, että paikallinen sovelluksemme on käynnissä portissa http://localhost:3000, ja haluamme ohjata kaikki https://dev.demo.com osoitteeseen kohdistuvat pyynnöt porttiin, jossa paikallinen sovellus on käynnissä.

Palaamme ensin tunnelisivullemme, etsimme juuri luodun tunnelin, napsautamme oikealla olevaa kolmen pisteen painiketta ja valitsemme "Config".

Config entry

Täytä asiaankuuluvat määritykset vaatimustemme mukaan:

Add public hostname page

Tämä määritys reitittää osoitteen dev.demo.com osoitteeseen http://localhost:3000 koneellamme. Napsauta sitten "Save hostname".

Pienen odottelun jälkeen pääset https://dev.demo.com, ja näet sovelluksen, joka toimii paikallisella koneellamme:

Local app

Yhteenveto

Tämän opetusohjelman avulla sinun pitäisi nyt pystyä helposti toteuttamaan HTTPS ja mukautetun isäntänimen paikallisessa kehitysympäristössäsi ilman, että sinun tarvitsee huolehtia monimutkaisista määrityksistä ja virheistä. Toivon, että voit hyötyä tästä opetusohjelmasta！

Mikä on Cloudflare Tunnel#

Esivaatimukset#

Lisää verkkosivusto Cloudflareen#

Luo tunnel#

Reititä liikenne luotuun tunneliin#

Yhteenveto#

Mikä on Cloudflare Tunnel#

Esivaatimukset#

Lisää verkkosivusto Cloudflareen#

Luo tunnel#

Reititä liikenne luotuun tunneliin#

Yhteenveto#

Mikä on Cloudflare Tunnel

Esivaatimukset

Lisää verkkosivusto Cloudflareen

Luo tunnel

Reititä liikenne luotuun tunneliin

Yhteenveto

Mikä on Cloudflare Tunnel

Esivaatimukset

Lisää verkkosivusto Cloudflareen

Luo tunnel

Reititä liikenne luotuun tunneliin

Yhteenveto