Nuxt JS fejlesztői szerver beállítása helyi hálózaton

Mennyire jó is lenne, ha nem kellene fejlesztés közben a mobil környezetet és eszközöket a helyi gépünkön szimulálnunk, hanem közvetlen az eszközön vagy akár több eszközön egyszerre tudnánk fejleszteni.

Szerencsére ez már könnyedén lehetséges. Továbbá a HTTPS beállításával érzékeny engedélyeket is kérhetünk a böngészőtől, amit enélkül letiltana számunkra.

Mivel csináljuk

Konkrét példánkban Nuxt JS-t fogunk használni és annak is az aktuálisan legfrissebb 2.9.2 verzióját, ami gyakorlatilag egy Vue JS-re épült kliens oldali keretrendszer sok extra lehetőséggel.

Az SSL bizonyítványunk kiállításához a Certbot-ot fogjuk használni, ami Let’s Encypt CA¹-tól igényli azokat nekünk.

DNS beállítása

Úgy találtam, hogy a legegyszerűbb módja a helyi hálózaton lévő fejlesztői környezet felépítésének, hogy ha azt egy külön aldomain-en keresztül elérhetővé teszem. Így minden eszközön könnyű beírni az URL-t és nem kell a szerver IP címére emlékezni senkinek. Előny persze ha a fejlesztői gépünk fix IP címmel rendelkezik a helyi hálózaton, így nem kell a bejegyzett aldomain A rekordját módosítani változás esetén.

Hozzunk tehát létre új aldomain-ünk számára egy A rekordot a DNS kiszolgálónk felületén, ami a fejlesztői gépünk helyi IP címére hivatkozik. (Pl: 192.168.0.110)

Miután ezzel megvagyunk nyissuk meg a nuxt.config.js fájlt a projektünk gyökérkönyvtárában és adjuk hozzá a fejlesztői szerver beállításait².

  server: {
    port: 3000, // default: 3000
    host: 'dev.mydomain.hu' // default: localhost
  },

Ezután indítsuk el a fejlesztői szervert az npm run dev paranccsal és navigáljunk egy másik eszközzel a helyi hálózaton az újonnan beállított aldomain-re és ne felejtsük le a beállított port számát a végéről (Pl: dev.mydomain.hu:3000). Ha mindent jól csináltunk, akkor a fejlesztői oldalunknak kell megjelennie a böngészőben (teljesen működőképes hot reload-al, azaz oldalfrissítés nélkül azonnal megjelennek a módosításaink).

Biztonságos kapcsolat

Van akinek már ez is elég és a nem biztonságos - egyszerű HTTP - kapcsolattal is tudja tesztelni oldalát az eszközein.

De mi van akkor ha engedélyeket akarunk kérni az eszköztől?

Nem biztonságos kapcsolat alatt majdnem minden blokkolva van automatikusan. Így ha ilyen környezetben például az eszköz kameráját akarjuk használni, akkor az nem fog sikerülni.

Mi a megoldás?

Adjunk biztonságos kapcsolatot a fejlesztői aldomain-ünknek és így elérhetjük ezeket az erzékeny engedélyeket is.

Cert ingénylése

Telepítsük³ fel a gépünkre a certbot-ot. Linux (Ubuntu) esetén a következő parancsokkal:

  // előkészületek
  sudo apt-get update
  sudo apt-get install software-properties-common
  sudo add-apt-repository universe
  sudo add-apt-repository ppa:certbot/certbot
  sudo apt-get update
  // telepítés
  sudo apt-get install certbot

Majd hozzuk létre a cert-ünket a következő paranccsal:

certbot -d dev.mydomain.hu --manual --preferred-challenges dns certonly

Fontos része a parancsnak a DNS validáció kényszerítése, így egy helyi szerverhez hivatkozó domain nevet is tudunk validálni egy egyszerű TXT rekord létrehozásával.

Miután beírtuk a parancsot és válaszoltunk a kérdésekre (fogadjuk el az IP címre vonatkozó kérdést) a certbot kiírja nekünk milyen TXT rekordot kell létrehoznunk.

  Please deploy a DNS TXT record under the name
  _acme-challenge.dev.mydomain.hu with the following value:

  667drNmQL3vX6bu8YZlgy0wKNBlCny8yrjF1lSaUndc

  Once this is deployed,
  Press ENTER to continue

Lépjünk tehát be a DNS szolgáltatónk felületére és hozzuk létre az új bejegyzést, majd nyomjunk entert a folytatáshoz.

Kapcsolat beállítása

Ha minden sikeres volt, akkor a letsencrypt könyvtárában megtalálhatjuk a cert és a key fájlt is, általában .pem kiterjesztéssel. (Linux alatt /etc/letsencrypt/live)

Másoljuk ezeket a fájlokat a projektünk könyvtára alá, majd nyissük meg a nuxt.config.js fájlt és módosítsuk a server részt, hogy ezekre a fájlokra mutasson.

  import path from 'path'
  import fs from 'fs'

  export default {
    // további beállítások ...
    server: {
      port: 3000,
      host: 'dev.mydomain.hu',
      https: {
        key: fs.readFileSync(path.resolve(__dirname, 'privkey.pem')),
        cert: fs.readFileSync(path.resolve(__dirname, 'fullchain.pem'))
      }
    }
  }

Miután elmentettünk módosításunk, indítsuk újra a fejlesztői szervert és tallózzuk be egy másik eszközön. Ha mindent jól csináltunk, akkor biztonságos kapcsolattal jelent meg a weboldalunk és már bátran kérhetünk érzékeny engedélyeket is a böngészőtől.