Oprettelse af en lokal server tilgængelig fra en offentlig adresse

Jeg har udviklet hjemmesider til den bedre del af 10 år, og et af mine største problemer var altid lokal udvikling og synkronisering af lokale websteder til live test. Brug af et lokalt miljø er fantastisk, fordi det er hurtigt, men det kan ikke ses fra fjernt og overføre et sted betyder databaseoperation, omdøbning af tabeller, værdier og så videre.

I denne artikel vil jeg vise dig en nem måde at Kør en lokal server som du kan adgang fra din telefon og andre mobile enheder nationalt, og også udsendes via internettet, hvilket betyder at dele dit arbejde med klienter, uden at forlade god lokal lokalhost.

Brug af vagrant til at skabe et lokalt miljø

For kort tid siden skrev jeg en artikel her på Hongkiat om at bruge Vagrant, så jeg vil kun gå over det grundlæggende her. For mere info, kig på artiklen!

For at komme i gang skal du tage fat i og installere VirtualBox og Vagrant. Begge er gratis og bruges til at oprette en virtuel maskine, som vil køre din server.

Opret nu en mappe til at gemme dine websites. Lad os bruge en navngivet mappe “websteder” i vores primære brugerkatalog. Det ville være / Brugere / [brugernavn] / Websites på OS X og C: / Brugere / [brugernavn] / Websites på Windows.

Opret en ny mappe med navnet wordpress. Her oprettes den virtuelle maskine. Ideen er, at hver mappe indenfor websteder huser en separat virtuel maskine. Mens du kan sætte så mange websites på en virtuel maskine som du vil, jeg kan lide at gruppere dem ud af platforme - fx: WordPress, Laravel, Custom

I forbindelse med denne øvelse skaber jeg et WordPress-websted.

Inde i WordPress mappe skal vi oprette to filer, Vagrantfile og install.sh. Disse vil blive brugt til at oprette vores virtuelle maskiner. Jeffrey Way har skabt to store startfiler; du kan få fat i hans Vagrantfile og install.sh filer.

Brug derefter terminalen til at navigere til WordPress mappe og type vagrant op. Det vil tage et stykke tid, da kassen skal downloades og derefter installeres. Tag en kop kaffe og tjek dette indlæg på 50 WordPress-tip, mens du venter.

Når processen er færdig, skal du kunne gå til 192.168.33.21 og se en korrekt tjent side. Din indholdsmappe skal være html-mappen i WordPress-mappen. Du kan nu begynde at tilføje filer, installere WordPress eller noget andet, du gerne vil have.

Glem ikke at læse hele Vagrant-vejledningen for mere information om oprettelse af virtuelle værter, kortlægning af domæner som mytest.dev og så videre.

Åbning af lokale websteder på samme netværk ved hjælp af Gulp

Mens du bygger et websted, skal du tænke på lydhørhed. Små skærme kan i nogen grad emuleres ved at indsnævre browservinduet, men det er bare ikke den samme oplevelse, især hvis du smider nethinden i mixen.

Ideelt set vil du åbne din lokale hjemmeside på dine mobile enheder. Dette er ikke for svært at gøre, forudsat at dine enheder er på samme netværk.

For at få dette gjort bruger vi Gulp and Browsersync. Gulp er et værktøj til automatisering af udvikling, Browsersync er et godt værktøj, der ikke kun kan oprette en lokal server, men synkronisere rullning, klik, formularer og mere på tværs af enheder.

Installation af Gulp

Det er meget nemt at installere Gulp. Gå videre til siden Kom godt i gang for vejledningen. En forudsætning er NPM (Node Package Manager). Den nemmeste måde at få dette på er at installere Node selv. Gå videre til nodens websted for instruktioner.

Når du har brugt npm install - global gulp kommando til at installere gulp globalt, skal du tilføje det til dit projekt. Måden at gøre dette på er at løbe npm installere - save-dev gulp i rodmappen til dit projekt, og tilføj derefter en gulpfile.js fil der.

I øjeblikket lad os tilføje en enkelt kode kode inde i den fil, hvilket indikerer at vi vil bruge Gulp selv.

var gulp = kræve ('gulp');

Hvis du er interesseret i alle de flotte ting, Gulp kan gøre som sammenfattende scripts, kompilere Sass og LESS, optimere billeder og så videre, læs vores Guide To Gulp. I denne artikel vil vi fokusere på at oprette en server.

Brug af Browsersync

Browsersync har en Gulp-udvidelse, som vi kan installere i to trin. Lad os først bruge npm til at downloade det, så tilføjer vi det til vores Gulpfile.

Udsted den npm installere browser-sync gulp - save-dev kommando i projektets rod i terminalen; dette vil downloade udvidelsen. Derefter åbner du Gulpfile og tilføjer følgende linje til den:

var browserSync = kræver ('browser-sync'). Opret ();

Dette gør at Gulp ved, at vi bruger Browsersync. Dernæst definerer vi en opgave, der styrer, hvordan Browsersync vil fungere.

gulp.task ('browser-sync', funktion () browserSync.init (proxy: "192.168.33.21"););

Når du har tilføjet det, kan du skrive gulp browser-synkronisering ind i terminalen for at starte en server. Du skal se noget som billedet nedenfor.

Der er fire separate webadresser der, her er hvad de mener:

Lokal: Den lokale URL er, hvor du kan nå serveren på den maskine, du kører den på. I vores tilfælde kan du bruge 192.168.33.21 eller du kan bruge den, der leveres af Borwsersync.
Udvendig: Dette er den webadresse, du kan bruge på enhver enhed, der er tilsluttet netværket, for at nå hjemmesiden. Det vil fungere på din lokale maskine, din telefon, tablet og så videre.
UI: Denne URL peger på mulighederne for den aktuelt kørende server. Du kan se forbindelser, konfigurere netværksgasregulering, se historik eller synkroniseringsindstillinger.
Ekstern brugergrænseflade: Dette er det samme som brugergrænsefladen, men tilgængeligt fra enhver enhed på netværket.

Hvorfor bruge Browsersync?

Nu da vi er færdige med denne fase, tænker du muligvis: Hvorfor bruger Browsersync overhovedet? URL'en 192.168.33.21 kan også nås fra en hvilken som helst enhed. Mens dette er tilfældet, skal du installere WordPress til denne URL.

Jeg bruger normalt virtualhosts og har domæner som wordpress.local eller myproject.dev. Disse løser lokalt, så du ikke kan besøge wordpress.local på din mobiltelefon og se det samme resultat som på din lokale computer.

Hidtil så godt har vi nu et teststed, der kan fås fra enhver enhed på netværket. Nu er det tid til at gå globalt og udsende vores arbejde via internettet.

Brug af ngrok til at dele vores Localhost

ngrok er et værktøj, du kan bruge til at oprette sikre tunneler til dit lokalehost. Hvis du tilmelder dig (stadig fri), får du adgangskodebeskyttede tunneler, TCP og flere samtidige tunneler.

Installation af ngrok

Gå til ngrok download siden og tag den version, du har brug for. Du kan køre den fra den mappe, den er i, eller flytte den til et sted, der giver dig mulighed for at køre det fra hvor som helst. På Mac / Linux kan du køre følgende kommando:

sudo mv ngrok / usr / local / bin / ngrok

Hvis du får en fejl, at denne placering ikke eksisterer, skal du blot oprette de manglende mapper.

Brug af ngrok

Heldigvis er denne del ekstremt enkel. Når du kører din server via Gulp, skal du kigge på den port, den bruger. I eksemplet ovenfor kører den lokale server på http: // localhost: 3000 hvilket betyder at det bruger port 3000. I en ny terminal fan skal du køre følgende kommando:

ngrok http 3000

Dette vil skabe en tilgængelig tunnel til dit lokalehost, resultatet skal være sådan noget:

Den webadresse, du ser ved siden af “Videresending” er det, du kan bruge til at få adgang til din hjemmeside fra hvor som helst.

Konklusion

I slutningen af dagen kan vi nu gøre tre ting:

Se og arbejde på vores projekt lokalt
Se vores hjemmeside via en hvilken som helst enhed på netværket
Lad andre se vores arbejde overalt med en simpel link

Dette giver dig mulighed for at fokusere på udvikling i stedet for at køre for at holde lokale og testservere synkroniseret, migrere databaser og andre bekymrende opgaver.

Hvis du har en anden metode til at arbejde lokalt og dele resultatet, så lad os vide!