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

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

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:

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

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.

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.

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

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".

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

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:

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！