Serverløs utrulling av Next.js med SST

Jeg bruker et verktøy som heter SST for å rulle nettstedet mitt ut på AWS. Les videre hvis du vil ha en lengre forklaring om serverløs utrulling, eller hopp til «Slik kommer du i gang med SST» hvis du vil vite hvordan du kan bruke SST til å rulle ut et nettsted som bruker Next.js.

«Serverløs» forklart

Ethvert nettsted trenger hosting. Et eller annet sted står det en datamaskin tilkoblet internett som responderer på en nettadresse, og som sender tilbake koden og ressursene som nettstedet er bygd opp av. Nettleseren renderer så denne koden, og dermed ser du et nettsted. Enkelt og greit.

Beskrivelsen ovenfor er riktig nok, men er selvfølgelig en grov forenkling. Dykker du litt dypere i materien kommer du over begreper som virtuelle servere, database­servere, innholds­leverings­nettverk, skalering, last­balansering, serverløs … Vent litt: Serverløs? Seriøst?

«Serverløs» er et begrep som brukes om noen typer skyløsninger, deriblant såkalt funksjon som en tjeneste (FaaS, function as a service). Det er på en måte et misvisende navn, for du må jo bruke en server, men den fungerer litt annerledes enn en vanlig webserver.

Med en vanlig webserver har du et program som kjører som en tjeneste på en (virtuell) maskin. Programmet lytter etter innkommende trafikk på en port (f.eks. port 80) og responderer på denne trafikken. Med funksjon som en tjeneste har du også programkode som responderer på innkommende trafikk. Men denne koden kjører ikke hele tiden. Koden kjører i en runtime (tenk på det som en liten virtuell maskin) som kan tas ned når den ikke er i bruk. Runtimen er rask nok å starte opp til at man nesten ikke merker forskjell på om den hadde vært oppe og kjøre. Såkalt «kaldstart» tar litt lenger tid, men vanligvis er det bare snakk om noen hundredeler av et sekund.

Utrulling av Next.js

Next.js, som er rammeverket jeg bruker til dette nettstedet, er lagd av et firma som heter Vercel. Vercel har en egen løsning for å hoste nettsteder bygd med Next.js. Du skriver en enkelt kommando, og nettstedet bygges og publiseres til hosting hos Vercel. Det er veldig praktisk og brukervennlig, og kan absolutt anbefales som den enkleste måten å hoste et nettsted som kjører Next.js på. De har også et gratis alternativ for personlig bruk.

Hva så hvis du ønsker å bruke Next.js, men ikke ønsker å bruke Vercel til hosting? Dokumentasjonen for Next.js har en god oversikt over alternativer for hosting. Du kan for eksempel bruke en vanlig Node.js-server, en Docker-container eller statisk eksport. Her vil jeg fortelle om SST, som er løsningen jeg endte opp med.

SST gjør serverløs utrulling enkelt for noobs

AWS er stort og komplekst, og består av mange forskjellige tjenester. Det er en hel jungel å finne fram i. Derfor var jeg litt skeptisk til å publisere webapplikasjoner til AWS. Og det er en viss læringskurve her. Likevel vil jeg si at SST gjør jobben min overraskende enkel.

SST er ifølge deres egen dokumentasjon «et rammeverk som gjør det enkelt å bygge moderne full-stack-applikasjoner på din egen infrastruktur». Du definerer applikasjonen i kode gjennom konfigurasjonsfilen sst.config.ts.

SST består av ulike komponenter, og de har en egen komponent for Next.js. Dokumentasjonen for Next.js forklarer hvordan du kommer i gang, og den følgende veiledningen er i hovedsak basert på den.

Slik kommer du i gang med SST

Først av alt må du ha en AWS-legitimasjon konfigurert. Dette er forklart nærmere i dokumentasjonen om IAM-legitimasjon.

Hvis du starter et nytt prosjekt, kan du lage en tom mappe, navigere til den i konsollen og kjøre følgende to kommandoer:

npx create-next-app@latest .
npx sst@latest init

Hvis du allerede har et Next.js-prosjekt, trenger du bare den siste kommandoen.

Konfigurasjonsfilen sst.config.ts vil se slik ut:

/// <reference path="./.sst/platform/config.d.ts" />

export default $config({
  app(input) {
    return {
      name: 'sst-nextjs-test',
      removal: input?.stage === 'production' ? 'retain' : 'remove',
      protect: ['production'].includes(input?.stage),
      home: 'aws',
    }
  },
  async run() {
    new sst.aws.Nextjs('MyWeb')
  },
})

Konfigurasjonen er enkel og lett forståelig, men bakom ligger det en avansert løsning. Når du kjører sst deploy, opprettes det ulike AWS-tjenester. Alt av tillatelser ordnes også automatisk.

Til utvikling kan du bruke dev-modus, som starter SST og Next.js-appen:

npx sst dev

Du kan konfigurere et eget domene til bruk i produksjon ved å legge til domenet i konfigurasjonsfilen:

/// <reference path="./.sst/platform/config.d.ts" />

export default $config({
  app(input) {
    return {
      name: 'sst-nextjs-test',
      removal: input?.stage === 'production' ? 'retain' : 'remove',
      protect: ['production'].includes(input?.stage),
      home: 'aws',
    }
  },
  async run() {
    new sst.aws.Nextjs('MyWeb', {
      domain:
        $app.stage === 'production'
          ? {
              name: 'example.com',
              redirects: ['www.example.com'],
            }
          : undefined,
    })
  },
})

Hvis du bruker Amazon Route 53 til å konfigurere domenet ditt, er dette alt som skal til for å automatisk opprette DNS-oppføringer for domenet. Egne domener er nærmere forklart i dokumentasjonen om egne domener.

Når du er klar til å publisere til produksjon, kjører du:

npx sst deploy --stage production

Du kan bruke flagget --stage til å skille mellom ulike utrullinger. Navnet kan være hva som helst – her bruker vi navnet production til å rulle ut i produksjon.

Avsluttende tanker

Jeg er svært fornøyd med hvordan SST gjør det mulig å publisere et Next.js-nettsted direkte til AWS, uten å måtte kunne masse om de ulike tjenestene som kjører under panseret. Konseptet med komponenter som kan kombineres i konfigurasjonen gjør det enklere å bygge skytjenester. Mer om dette kommer i neste artikkel.

Hva med deg? Ble du inspirert? Har du tilbakemeldinger? I så fall vil jeg gjerne høre fra deg.