Wéi ee webpack-Entwécklungsserver op enger VPN-Adress zerwéieren

En Entwécklungsserver, deen um Laptop äntwert an nëmmen do, ass meeschtens un déi falsch Adress gebonnen. En Server, deen d'Verbindung unhëlt awer d'Säit refuséiert, feelt meeschtens bei enger Hostnumm-Préifung. Dat sinn ënnerschiddlech Feeler mat ënnerschiddlechen Korrekturen, an d'Wahl vun der richteger Konfiguratioun hänkt dovun of, wien de Wäitschafraum erreeche muss a wéi hie kënnt.

Dräi Froen entscheeden d'Äntwert: wien sech verbënnt, wéi eng Adress hie kënnt erreechen, an ob Live-Reload fir hie muss funktionéieren.

Fänkt mam Socket un, net mat der Konfiguratiounsdatei

Liest, un wat de lafende Prozess tatsächlech gebonnen ass, am selwechten Netzwierkkontext, deen en gestart huet, well e Container oder en Nummraum e Socket ka besëtzen, deen d'Host-Shell net gesäit. D'Lauschspalte beäntwert déi éischt Fro: nëmmen de lokalen Wee, eng bestëmmten Interface oder all Interface.

ss -ltn '( sport = :8080 )'
ss -ltnp | grep node

Eng Loopback-Adress ass de séchere Standard an notzlos fir en entferten Client. Eng Wildcard-Bindung ass bequem an deckt de Port op all Interface mat enger Route op, wat méi breet ass wéi déi meescht Leit op enger Maschinn wëllen, déi och en Tunnel dréit. Eng bestëmmten Adress ass déi mëttel Optioun, a si funktionéiert nëmmen, wann d'Interface déi Adress am Ament vum Socket erstéllt. Den Ënnerscheed ass wichteg, well zwou vun dësen dräi Bindung am Browser d'selwecht ausgesinn an sech komplett anescht behuelen, soubal eng zweet Interface existéiert.

Passt Iech un déi Observatioun, ier Dir Route oder Firewall-Regele beréiert. Wann de Prozess op der falscher Adress lauschtert, bréngt keen Policy-Routing de Client dohinner.

Wielt d'Bindadress jee no wien se muss erreechen

Wann nëmmen Dir op dëser Maschinn d'Säit braucht, behält d'Loopback-Bindung a stoppt. Wann ee Kolleg um selwechten Tunnel se brauch, bind t'Interface-Adress vum Tunnel a loosst d'Firewall nëmmen déi Quell erlaben. En Entwécklungsserver iwwer d'Leit eraus publizéieren, déi en aktiv testen ass eng Gewunnecht, déi de Wäitschafraum schlussendlech dem Internet aussetzt.

Wann e Browser an engem Container de Server muss erreechen, muss d'Bindadress eng sinn, op déi den Netzwierk vum Container route kann, an dat ass dacks net d'Adress, déi den Host fir sech selwer opléist. Entscheet de Fall, ier Dir d'Konfiguratioun ännert, well déi dräi Fäll ginn dräi ënnerschiddlech Wäerter a nëmmen een ass richteg. Hei ze roden verschwënnt méi Zäit wéi all aneren Deel vun der Installatioun.

Da setzt d'Adress an der Form, déi Äre Startprogramm tatsächlech liest. Eng Konfiguratiounsdatei an e Skript, deen de Server programmatesch baut, verbrauchen net déiselwecht Optiounen:

devServer: {
  host: "10.77.0.20",
  port: 8080,
  allowedHosts: ["dev.corp.example"],
}

D'Adress an deem Fragment ass illustrativ a steet fir d'VPN-Adress, déi den Host besëtzt. Wann de Projet de Server mat new WebpackDevServer(options, compiler) baut, gitt d'Optiounen duerch d'Konstruktorargument weider, well déi separat devServer Eegeschaft an der webpack-Konfiguratioun op deem Wee net consultéiert gëtt. Dee Ënnerscheed tëscht der Konfiguratiounsdatei an der Node API fänkt Leit, déi e Fragment an e Projet kopéieren, deen en ni liest. D'dev-server-Dokumentatioun trennt déi zwou Startstiler an ass d'Referenz, géint déi d'benotzten Versioun gepréift muss ginn.

Passt d'Hostnumm-Préifung un d'Nimm un, déi Dir approuvéiert

D'Hostnumm-Préifung existéiert, fir ze verhënneren, datt eng Säit, déi vun engem vum Ugräifer kontrolléierten Numm zerwéiert gëtt, iwwer de Browser mat Ärem Entwécklungsserver schwätzt. Si mat allowedHosts: "all" ausschalten hëlt dee Schutz ewech, an de Komfort ass op enger Maschinn, déi intern Servicer erreeche kann, selten dee Wäert. D'Préifung ass bëlleg richteg ze erfëllen, soubal Dir wësst, wéi eng Nimm de Browser schéckt.

Lëscht déi genee Nimm op, déi Dir benotzt, inklusiv de privaten Numm, deen op d'Tunneladress opléist. Wann de Client en Numm op eng aner Adress opléist wéi déi, un déi Dir gebonnen hutt, hutt Dir e Nummopléisungsproblem an net e Serverkonfiguratiounsproblem, an den Numm op d'Erlaabnislëscht ze setzen hëlleft net. Bestätegt d'Opléisung vum Client, net vum Server.

Halt déi dräi Kontrollen am Kapp getrennt: d'Bindadress entscheet, wéi eng Interface d'Verbindung unhuelen, d'Erlaabnislëscht entscheet, wéi eng Host-Header akzeptéiert ginn, an d'Authentifikatioun entscheet, wien erageet. Nëmmen déi drëtt ass Zougriffskontroll, an en Entwécklungsserver huet meeschtens keng. Eng Tunneladress ass och keen Authentifikatiounsmechanismus, well jiddereen, deen dohinner route kann, schonn bannent der Grenz ass, op déi Dir Iech verlooss hutt.

Iwwerpréift d'Säit an de Live-Reload-Socket zesummen

Luet eng frësch Ufro vum virgesinnene Client mat dem konfiguréierte Schema, a liest d'Resultat amplaz vum Cache. Fir HTTPS behält den erwaarten Hostnumm an d'Zertifikatsvalidéierung, well eng Browserwarnung keen erfollegräichen Akzeptanztest ass. Eng Säit, déi ugewise gëtt, wärend Live-Reload stëll feelt, ass hei dee heefegsten deelweisen Erfolleg, an et ass bei enger schneller Kontroll einfach ze iwwersinn.

curl -sS -o /dev/null -w "%{http_code} %{remote_ip}\n" http://dev.corp.example:8080/
curl -sS -i http://10.77.0.20:8080/ | head -n 5

Dann opmaacht dem Browser seng Netzwierkdiagnostik a kuckt d'WebSocket-Verbindung. Eng Säit ka iwwer een Hostnumm, Port a Schema luede wärend de Reload-Socket en aneren notzt, dofir musse béid getrennt gepréift ginn. Konfiguréiert déi dokumentéiert Client-URL nëmme wann dee gesaten Wee wierklech en anere Wäert brauch, a verbessert léiwer de Wee wéi dem Client en Ëmwee bäizebréngen.

Notéiert d'Lauschteradress, den akzeptéierten Numm, d'erlaabt Quell an déi zwou Resultater an den Projetsnotizen. Dee Rekord iwwerlieft déi nächst Persoun, déi de Wäitschafraum startet a sech freet, firwat d'Säit luet awer ni aktualiséiert gëtt.