Kør din localhost på mobilen med ngrok

Kør din localhost på mobilen med ngrok: En guide for webudviklere

Som webudvikler har du sandsynligvis ofte ønsket at kunne tilgå og teste din lokale udviklingsserver direkte på din mobiltelefon. Denne funktionalitet er ikke blot en bekvemmelighed; den er en game-changer, især når det kommer til at teste din websides responsivitet eller at fejlfinde mobile-specifikke problemer. I denne artikel vil vi dykke ned i, hvordan du kan opnå netop dette ved hjælp af et kraftfuldt værktøj kaldet ngrok.

Før ngrok blev populært, var processen med at få adgang til din localhost på en mobil enhed ofte forbundet med visse udfordringer. Den traditionelle metode involverede at forbinde både din computer (hvor den lokale server kører) og din mobile enhed til det samme netværk. Derefter skulle du manuelt angive portnummeret på din lokale applikation, kombineret med din computers IP-adresse, for eksempel i formatet 192.168.1.2:3000. Selvom denne metode kunne fungere, var den ofte upålidelig og udsat for forbindelsesproblemer, hvilket gjorde den mindre effektiv til konsekvent testning. Desuden gjorde denne tilgang det umuligt at dele din localhost-server med andre, medmindre de befandt sig på det samme lokale netværk. Det er her, ngrok træder ind og revolutionerer processen.

Hvad er ngrok?

ngrok er en globalt distribueret reverse proxy, der er designet til at sikre, beskytte og accelerere dine applikationer og netværkstjenester, uanset hvor de kører. Værktøjet giver dig mulighed for at teste din appudvikling, oprette brugerdefinerede domæner, teste webhooks og meget mere. Kernen i ngrok's funktionalitet ligger i dens evne til at skabe sikre tunneler fra internettet til din lokale udviklingsserver. Dette betyder, at du kan dele din localhost-server med enhver på internettet, hvilket er uvurderligt for samarbejde og omfattende test.

Sammenlignet med traditionel hosting er ngrok utroligt nemt at bruge. Med en enkelt kommando kan du eksponere flere localhost-servere uden at forlade din terminal. Dette sparer tid og forenkler din udviklingsworkflow betydeligt.

Sådan kommer du i gang med ngrok

For at kunne køre din localhost online og dele den, skal du først generere en authtoken på ngrok.com. Opret en konto, hvis du ikke allerede har en.

Installation af ngrok

ngrok kan køre i forskellige miljøer, på forskellige maskiner og via forskellige SDK'er. For at konfigurere det til din specifikke maskine, kan du følge deres installationsguide. Installationen er typisk lige så enkel som at køre en enkelt kommando i din terminal:

macOS:

brew install ngrok # eller ngrok service install 

Windows:

choco install ngrok 

Linux:

curl -s https://ngrok-agent.s3.amazonaws.com/ngrok.asc | sudo tee /etc/apt/trusted.gpg.d/ngrok.asc > /dev/null \ && echo "deb https://ngrok-agent.s3.amazonaws.com buster main" | sudo tee /etc/apt/sources.list.d/ngrok.list \ && sudo apt update \ && sudo apt install ngrok 

Disse kommandoer kræver specifikke pakkehåndteringssystemer installeret på din maskine (Homebrew for macOS, Chocolatey for Windows). Alternativt kan du downloade ngrok-filen direkte fra ngrok-dashboardet.

Konfiguration af miljøvariabler (Windows)

Hvis du bruger Windows, og du har downloadet ngrok som en .exe-fil, er det en god idé at tilføje stien til ngrok-eksekverbare fil til dine miljøvariabler. Dette sikrer, at du kan køre ngrok-kommandoer fra enhver mappe i din kommandoprompt. Følg disse trin:

1. Opret en mappe: Opret en ny mappe på din computer, f.eks. `C:\Users\DitBrugernavn\ngrok`. Flyt den downloadede `ngrok.exe`-fil ind i denne mappe.
2. Åbn Systemegenskaber: Tryk på `Win + R`, skriv `sysdm.cpl` og tryk Enter.
3. Miljøvariabler: I vinduet Systemegenskaber, gå til fanen "Avanceret" og klik på knappen "Miljøvariabler".
4. Rediger PATH: I sektionen "Systemvariabler" (eller "Brugerdefinerede variabler for [DitBrugernavn]"), find variablen "Path" og klik på "Rediger...".
5. Tilføj sti: Klik på "Ny" og indsæt den fulde sti til den mappe, du oprettede i trin 1 (f.eks. `C:\Users\DitBrugernavn\ngrok`).
6. Gem ændringer: Klik "OK" på alle åbne vinduer for at gemme ændringerne.

Du kan verificere, at installationen og konfigurationen er vellykket, ved at åbne en ny kommandoprompt og skrive `ngrok -v`. Hvis alt er korrekt, vil du se den installerede version af ngrok vist.

Start din lokale server med ngrok

Når ngrok er installeret og konfigureret, er det tid til at aktivere det. Sørg først for, at din lokale applikation kører på den ønskede port. Lad os antage, at din React-applikation kører på http://localhost:5173.

Åbn din terminal, naviger til roden af din computer (eller en vilkårlig placering, da ngrok nu er i din PATH), og kør følgende kommando:

ngrok http 5173 

Denne kommando opretter en sikker tunnel til din lokale server på port 5173. ngrok vil derefter vise dig en offentligt tilgængelig URL, som typisk vil se således ud: https://1093-102-89-47-254.ngrok-free.app/.

Nu kan du åbne denne URL i browseren på din mobiltelefon. Du vil se din lokale webapplikation, som om den var live på internettet. Enhver ændring, du foretager i din lokale udvikling, vil blive afspejlet med det samme på den offentlige URL, hvilket muliggør øjeblikkelig feedback og hurtig iteration.

Deling af din localhost

Den genererede ngrok URL kan deles med hvem som helst. Dette er perfekt til at vise dit arbejde til kolleger, kunder eller venner, uden at de behøver at være på samme netværk som dig. Husk, at den genererede URL er offentligt tilgængelig, så længe din ngrok-proces kører. Når du stopper ngrok-processen (typisk ved at trykke `Ctrl + C` i terminalen), vil URL'en ophøre med at fungere.

Fordele ved at bruge ngrok

• Nem deling: Del din lokale udvikling med andre uden kompleks netværkskonfiguration.
• Mobiltestning: Test din applikations responsivitet og funktionalitet direkte på mobile enheder.
• Webhook-testning: ngrok er ideelt til at teste webhooks fra tredjepartstjenester (f.eks. Stripe, GitHub), da disse tjenester kræver en offentligt tilgængelig URL for at kunne kommunikere med din lokale server.
• Sikkerhed: ngrok opretter sikre HTTPS-tunneler, hvilket beskytter dine data under overførsel.
• Fleksibilitet: Understøtter forskellige protokoller som HTTP, HTTPS og TCP.

Andre anvendelsesmuligheder for ngrok

Udover at køre din localhost på mobilen, tilbyder ngrok en række andre avancerede funktioner:

• Udvikling af Webhooks: Som nævnt er det et uundværligt værktøj til at modtage og teste webhooks fra eksterne services.
• Deployment af statiske applikationer: Du kan hurtigt deploye statiske HTML-, CSS- og JavaScript-filer ved at pege ngrok mod den mappe, hvor filerne ligger.
• Omgå CI/CD checks: I visse scenarier kan ngrok bruges til at omgå checks i Continuous Integration/Continuous Deployment pipelines.

Sammenligning: traditionel metode vs. ngrok

For at illustrere forskellen, lad os opsummere de primære forskelle:

Ofte Stillede Spørgsmål (FAQ)

Kan jeg køre min localhost på min mobiltelefon?

Ja, absolut. Med værktøjer som ngrok kan du nemt få adgang til og teste din lokale udviklingsserver direkte fra din mobiltelefon.

Er ngrok gratis?

ngrok tilbyder en gratis plan, der er tilstrækkelig for mange udviklere. Der findes også betalte planer med flere funktioner og højere grænser.

Hvordan stopper jeg ngrok-tunnelen?

Du kan stoppe tunnelen ved at trykke `Ctrl + C` i den terminal, hvor ngrok-processen kører.

Hvad hvis min lokale server kører på en anden port?

Du skal blot erstatte portnummeret i ngrok-kommandoen med den port, din server bruger. For eksempel, hvis din server kører på port 8080, vil kommandoen være ngrok http 8080.

Kan jeg bruge ngrok til at teste API'er?

Ja, ngrok er et fremragende værktøj til at teste API'er, da det giver dig en offentlig endpoint, som dine API-klienter kan kommunikere med.

Er der alternativer til ngrok?

Ja, der findes alternativer som Cloudflare Tunnel, LocalTunnel og Serveo, men ngrok er et af de mest populære og brugervenlige.

Vi håber, at denne artikel har givet dig en grundig forståelse af, hvordan du kan udnytte ngrok til at forbedre din udviklingsproces. Ved at kunne teste din localhost direkte på mobile enheder, sparer du tid og sikrer en bedre brugeroplevelse for dine slutbrugere. Del gerne denne viden med andre udviklere, der kunne have gavn af den!

Hvis du vil læse andre artikler, der ligner Kør din localhost på mobilen med ngrok, kan du besøge kategorien Teknologi.