Denne veiledningen er for avanserte brukere som har en grunnleggende bakgrunn i systemer som SSH, VPS og Docker, som kanskje vil distribuere Next.js eller andre Node.js-rammeverk.
Vi kan ikke gi støtte for applikasjonene du setter opp ved å følge denne veiledningen.
Hva er Next.js / Nuxt.js / Gatsby / «JavaScript Framework»?
Neste , Nuxt , Gatsby og andre såkalte Javascript-rammeverk er en samlebetegnelse for en rekke interessante teknikker innen moderne nettutvikling, som lar utviklere lage applikasjoner som ser ut og oppfører seg mer som en app i din iPhone/Android enn en tradisjonell nettside, hovedsakelig fordi siden aldri «laster på nytt» mens du klikker rundt – JavaScript endrer HTML-en som vises avhengig av den besøkendes input, uten noen gang å ringe serveren for å hente en ny html-fil!
Next.js, Nuxt.js og Gatsby.js bruker også et bredt spekter av andre teknikker for å forbedre UX, som server-side-rendering, filbasert ruting og mer. Jo mer avanserte disse funksjonene blir i rammeverkene, desto mer må du gjennomgå hvordan prosjektet er distribuert på en server, og der kan det være en stor fordel å ha et miljø som er dedikert til å kjøre Node-baserte prosjekter i stedet for et vanlig. webhotellkonto som ikke er egnet for det.
I denne guiden har vi valgt å bruke Next.js som eksempel, da det er det desidert mest populære av rammeverket, men instruksjonene skal være relativt enkle å følge for Nuxt og Gatsby, med flere. Bare juster detaljer i Dockerfilen din som NPM-kommandoer og portverdier for å matche dine behov!
Hva trenger jeg for å følge veiledningen?
- En server satt opp gjennom Oderland Cloud med Docker Engine installert. Du kan lese i denne veiledningen hvordan du installerer Docker Engine på en eksisterende server. Hvis du ønsker å sette opp en ny server forberedt for Docker, kan du i stedet følge disse instruksjonene .
- Portainer installert på samme server .
- En Next.js-applikasjon tilgjengelig via en Git-repo du har tilgang til på for eksempel Github.
Når du har dette, er det på tide å komme i gang. Følg trinnene nedenfor.
Trinn 1: Lag en Dockerfile for Next.js
Docker er et system for å pakke programmer i en «container»: et lite, lukket Linux-miljø med visse forutsetninger der applikasjonen din alltid kjører nøyaktig på samme måte uten å la vertsdatamaskinen påvirke utførelsen. Siden mye kan variere mellom ulike operativsystemer, programvare og maskinvare, er Docker en god måte å sikre at en applikasjon alltid kan gjøres «riktig» og du som utvikler definerer hva som er «riktig måte» i Dockerfilen din. Docker-filen vi bruker i veiledningen kommer fra den offisielle Next.js-dokumentasjonen, datert 2023-10-17.
Vi antar her at Next.js-appen din allerede er lastet opp til serveren du skal kjøre den fra, ved hjelp av en hvilken som helst metode.
Vi starter med å åpne Portainer og klikke oss inn i vårt primære miljø, i vårt tilfelle kalles det «primært»:
Åpne fanenImages og trykkBuild a new image . Du vil nå se et felt der du legger inn navnet på bildet ditt – vi kan nøye oss med » nextjs-app « i vårt tilfelle! Under dette har vi et felt for å definere vår Dockerfile, en liste med instruksjoner for Portainer om hvordan du kjører appen din.
Hvis du fulgte vår veiledning for å sette opp Portainer, vil denne kjøre i sin egen docker-container, som ikke har tilgang til serverens filsystem. Vi kan derfor ikke bruke Dockerfile-direktivet COPY for å få filene vi trenger inn i det nye bildet vårt, men vi må laste inn filene våre fra for eksempel en Github-repo gjennom git-kloning etc.
Her går vi gjennom innholdet i Dockerfilen og hva de forskjellige trinnene gjør!
# Vi starter med å kopiere node:18-basispakken fra Dockerhub FRA node:18 # Alle kommandoer inne i Docker-beholderen skal kjøres i "/app" WORKDIR /app # Last ned repoen fra f.eks github - Merk mellomrommet og perioden på slutten, ellers vil npm-installasjonen mislykkes! KJØR git-klone https://LINK_TO_DITT_GIT_REPO.tld/nextjs-docker-guide.git . # Installer avhengigheter for Next.js inne i beholderen, så vi er klare til å gå! KJØR npm installasjon # Kompiler JavaScript som vanlig når du arbeider med Next.js og lag en build KJØR npm kjøre bygg # Åpne port 3000 i containeren, som er Next.js standardport EKSPONERING 3000 # Start Next.js-appen ved å kjøre kommandoen "npm start" CMD ["npm", "start"]
trykkBuild the image og hvis alt går bra, bør du få utdata som ligner på dette:
Gratulerer, du har nå et Docker-bilde som kan kjøre Next.js-siden din!
Trinn 2: Lag en «Stack» med docker-compose
Hva trenger jeg for å følge veiledningen?
- Et domenenavn eller underdomene peker på Oderland Cloud-serverens IP-adresse!
For å gjøre Next.js-siden vår tilgjengelig over https (og uten at besøkende trenger å angi portnummer 3000) må vi opprette en stack . En stack er en måte å distribuere docker-compose i Portainer, det vil si å knytte flere av våre containere sammen i et felles miljø slik at de kan samhandle.
Hvis du fulgte vår Portainer med Caddy-guide, har du allerede opprettet et nettverk kalt «caddy» hvor vi allerede kjører http-serveren Caddy. Vi kan enkelt koble Next.js-appen vår til Caddy også, ved å binde Next.js-appen til Caddy-nettverket og ved å sette etiketter i docker-compose.yml- konfigurasjonsfilen som forteller Caddy hvordan han skal håndtere Next.js!
ÅpenStacks i portalmenyen til venstre og trykkAdd stack . Velg et navn for denne stabelen, og lim deretter inn følgende kode i «Web editor»-feltet:
versjon: '3'
tjenester:
nextjs:
image: nextjs-app:latest # Erstatt nextjs-app med navnet du ga bildet ditt i forrige trinn!
container_name: nextjs-app # Navnet containeren skal ha når den kjører
porter:
- "3000" # Åpne port 3000 på containeren. Hvis Next.js-appen din kjører på en annen port, juster!
nettverk: # Koble denne tjenesten til disse nettverkene
- caddie
etiketter:
caddy: 'subdomain.domain.tld' # Erstatt med domenet eller underdomenet du vil at Caddy skal kjøre Next.js-appen din med!
caddy.reverse_proxy: "{{upstreams 3000}}" # Instruksjoner for å videresende anrop for dette domenet eller underdomenet til port 3000 i containeren
nettverk:
caddies:
ekstern: true # Bli med i det eksisterende nettverket "Caddy" i stedet for å prøve å opprette et nytt nettverk med samme navn
Bla nå til bunnen av siden og trykkDeploy the stack . Hvis du ikke får noen feilmeldinger, kan du prøve å laste inn domenet Next.js-appen peker på med https og se om siden laster. I vårt tilfelle:
Gratulerer, Next.js-appen din kjører nå med https i Oderland Cloud!
Vanlige spørsmål og feilsøkingstips
Hvordan ser jeg ressursbruken til Next.js-appen min?
Start med å trykkeContainers i menyen til venstre i Portainer. Her ser du alle aktive beholdere. Vi slår opp vår, som om du fulgte guiden som ble kaltnextjs-app , på samme rad i kolonnenQuick Actions finner duStats .
I dette verktøyet kan du overvåke ressursbruken i RAM, CPU, I/O og båndbredde fra hver container live, samt se prosesser som kjører inne i containeren.
Kan jeg samhandle med Next.js inne i beholderen via CLI?
Start med å trykkeContainers i menyen til venstre i Portainer. Her ser du alle aktive beholdere. Vi slår opp vår, som om du fulgte guiden som ble kaltnextjs-app , på samme rad i kolonnenQuick Actions finner duExec Console . Hvis du vil ha en interaktiv terminal inne i containeren, kan du velge standard og kjøre «/bin/bash». Du kan også spesifisere dine egne kommandoer og hvilke som skal brukes i containeren du vil åpne terminalen som, men dette er ikke dekket i denne veiledningen.
Når du så trykkerConnect en bash-terminal åpnes inne i beholderen og du kan utføre kommandoer som vanlig, for eksempel ps aux som i eksemplet ovenfor.
Hvordan ser jeg logger fra containerne mine for videre feilsøking?
Start med å trykkeContainers i menyen til venstre i Portainer. Her ser du alle aktive beholdere. Vi slår opp vår, som om du fulgte guiden som ble kaltnextjs-app , på samme rad i kolonnenQuick Actions finner duLogs .
I loggverktøyet kan du se en levende logg over hva programmet skriver ut, som du kan manipulere på ulike måter, som for eksempel å laste ned kopier, pause og inspisere individuelle linjer og mer.