Miksi localhost:3000 toimii vain sinulla

Mitä localhost tarkoittaa

localhost on nimi omalle tietokoneellesi. Kun avaat osoitteen http://localhost:3000, selain hakee sovelluksen omalta koneeltasi portista 3000. Kun kaveri avaa saman linkin, hänen selaimensa hakee sovelluksen hänen omalta koneeltaan. Sovelluksesi ei ole siellä käynnissä, joten hän näkee virheen. Linkki osoittaa eri tietokoneeseen sen mukaan, kuka sen avaa.

Näin sovelluksen voi jakaa

Jaa näyttö puhelussa, jos toisen tarvitsee vain katsoa. Tunneli, kuten ngrok tai Cloudflare Tunnel, antaa väliaikaisen julkisen osoitteen niin kauan kuin tietokone ja tunneli ovat päällä. Ajantasaiset tiedot ovat osoitteissa ngrok.com ja cloudflare.com. Julkaise sovellus, jos linkin pitää toimia senkin jälkeen, kun suljet läppärin. Vinssi ajaa sovelluksen Euroopassa ja antaa osoitteen, jonka kuka tahansa voi avata.

Staattinen sivu tai Vite-koonti

Jos projektista syntyy pelkkiä tiedostoja, kuten Vite-sovelluksen dist-kansio, julkaise kansio Vinssi Pages -palvelussa. Vinssi Pages ei tarvitse pakettia. Komentorivityökalu tarvitsee Node 20:n tai uudemman.

npx vinssi login

Työkalu näyttää lyhyen koodin ja linkin. Avaa linkki millä tahansa laitteella, kirjaudu, tarkista että koodi on sama ja valitse Allow. Työtila syntyy ensimmäisellä kirjautumisella. Koodi vanhenee kymmenessä minuutissa. Komennon npm install -g vinssi jälkeen samat komennot toimivat muodossa vinssi.

npm run build
npx vinssi pages publish ./dist

Kansion juuressa pitää olla index.html. Lisää --json, niin saat site id:n, version id:n, osoitteen, koon ja tiedostojen määrän. Esimerkkiosoite näyttää tältä: https://<name>-<random characters>-<workspace>.pages.vinssi.ai. Juuri julkaistu sivu voi palauttaa 404 noin kymmenen sekuntia, joten odota hetki ja kokeile kerran uudelleen. Lisää --site ja site id, jos haluat pitää saman osoitteen.

Koko sovellus GitHubista

Seuraa pikaohjetta. Kirjaudu ja valitse Install GitHub App. Anna lupa vain niihin GitHub-repoihin, jotka haluat julkaista. Vinssi pyytää lukuoikeuden repon sisältöön ja metatietoihin. Valitse New app, anna nimi ja valitse yksi repo. Avaa Settings ja sitten Build, ja jätä Auto päälle, ellei sovellus ole alikansiossa tai ellei se lue PORT-arvoa. Lisää avaimet kohtaan Settings ja sitten Variables. Avaa Billing, valitse paketti, tee maksu loppuun ja paina Deploy. GitHubista julkaistu sovellus tarvitsee paketin, alkaen €5 kuukaudessa sovellusta kohden, ilman arvonlisäveroa. Katso hinnat.

Ensimmäinen julkaisu kestää yleensä kahdesta viiteen minuuttiin. Kun tila on Live, avaa osoite. Esimerkki näyttää tältä: https://<project-slug>-<4 random characters>.app.vinssi.ai. Jokainen push oletushaaraan julkaisee sovelluksen uudelleen. Aja komentoriviltä npx vinssi projects list ja sitten npx vinssi deploy <projectId>. Sovellus käyttää yhä porttia 3000. Vinssi asettaa PORT-arvoksi 3000 ja lähettää liikenteen sinne.

Näitä vaiheita ei kokeiltu kirjautuneella Vinssi-tilillä tätä opasta kirjoitettaessa.