Denne guide er til avancerede brugere, der har en grundlæggende forståelse af systemer som SSH, VPS’er og Docker, og som måske ønsker at implementere Next.js eller andre Node.js-frameworks.
Vi kan ikke yde support til de programmer, du opretter ved at følge denne vejledning.
Hvad er Next.js / Nuxt.js / Gatsby / „JavaScript Framework‟?
Næste, Nuxt, Gatsby og andre såkaldte JavaScript-frameworks er en paraplybetegnelse for en række interessante teknikker inden for moderne webudvikling, som gør det muligt for udviklere at skabe applikationer, der ser ud og opfører sig mere som en app på din iPhone/Android end en traditionel hjemmeside, hovedsageligt fordi siden aldrig „genindlæses‟, mens du klikker rundt – JavaScript ændrer den viste HTML afhængigt af den besøgendes input uden nogensinde at kalde serveren for at hente en ny html-fil!
Next.js, Nuxt.js og Gatsby.js bruger også en lang række andre teknikker til at forbedre UX, såsom rendering på serversiden, filbaseret routing og meget mere. Jo mere avancerede disse funktioner bliver i frameworket, jo mere skal man gennemgå, hvordan projektet implementeres på en server, og der kan det være en stor fordel at have et miljø, der er dedikeret til at køre Node-baserede projekter i stedet for en almindelig webhosting-konto, der ikke er egnet til det.
Vi har valgt at bruge Next.js som eksempel i denne guide, da det er langt det mest populære af frameworkene, men instruktionerne burde være relativt lette at følge for Nuxt og Gatsby osv. Du skal bare justere detaljer i din Dockerfil som NPM-kommandoer og portværdier, så de passer til dine egne behov!
Hvad skal jeg bruge for at følge guiden?
- En server sat op gennem Oderland Cloud med Docker Engine installeret. Du kan læse denne vejledning om, hvordan du installerer Docker Engine på en eksisterende server. Hvis du vil sætte en ny server op, der er forberedt til Docker, kan du følge disse instruktioner i stedet.
- Portainer installeret på den samme server.
- En Next.js-applikation, der er tilgængelig via et Git-repo, som du har adgang til på for eksempel Github.
Når du har det, er det tid til at gå i gang. Følg nedenstående trin.
Trin 1: Opret en Docker-fil til Next.js
Docker er et system til at pakke programmer i en „container‟: et lille, lukket Linux-miljø med visse betingelser, hvor dit program altid kører på nøjagtig samme måde uden at lade værtscomputeren påvirke dets udførelse. Da mange ting kan variere mellem forskellige operativsystemer, software og hardware, er Docker en fantastisk måde at sikre, at en applikation altid kan udføres på den „rigtige‟ måde, og at du som udvikler definerer, hvad der er den „rigtige måde‟ i din Docker-fil. Den dockerfil, vi bruger i guiden, kommer fra den officielle dokumentation for Next.js, dateret 2023-10-17.
Vi antager her, at din Next.js-app allerede er uploadet på den server, du vil køre den fra, uanset hvilken metode du bruger.
Vi starter med at åbne Portainer og klikke os ind i vores primære miljø, som i vores tilfælde hedder „primary‟:
Åbn fanen Images, og klik på Build a new image. Du vil nu se et felt, hvor du kan skrive navnet på dit billede – vi kan nøjes med„nextjs app‟ i vores tilfælde! Under dette har vi et felt til at definere vores Dockerfile, en liste med instruktioner til Portainer om, hvordan din app skal køres.
Hvis du har fulgt vores guide til opsætning af Portainer, vil den køre i sin egen docker-container, som ikke har adgang til serverens filsystem. Vi kan derfor ikke bruge Dockerfile COPY-direktivet til at få de filer, vi har brug for, ind i vores nye image, men vi er nødt til at indlæse vores filer fra f.eks. et Github repo gennem git cloning osv.
Her gennemgår vi indholdet af Docker-filen, og hvad de forskellige trin gør!
# Vi starter med at kopiere basispakken node:18 fra Dockerhub Fra node:18 # Alle kommandoer inde i Docker-containeren skal køre i "/app" WORKDIR /app # Download repoen fra f.eks. github - Bemærk mellemrummet og punktummet i slutningen, ellers vil npm-installationen fejle! KØR git clone https://LÄNK_TILL_DITT_GIT_REPO.tld/nextjs-docker-guide.git . # Installer afhængighederne for Next.js inde i containeren, så vi er klar til at gå i gang! KØR npm install # Kompiler JavaScript som normalt, når du arbejder med Next.js, og opret et build RUN npm run build # Åbn port 3000 i containeren, som er Next.js' standardport EXPOSE 3000 # Start Next.js-appen ved at køre kommandoen "npm start" CMD ["npm", "start"].
Tryk på Build the image, og hvis alt går godt, bør du få et output, der ligner dette:
Tillykke, du har nu et Docker-image, der kan køre din Next.js-side!
Trin 2: Opret en „stak‟ med docker-compose
Hvad skal jeg bruge for at følge guiden?
- Et domænenavn eller subdomæne, der peger på IP-adressen på din Oderland Cloud-server!
For at gøre vores Next.js-side tilgængelig via https (og uden at besøgende skal indtaste portnummer 3000), er vi nødt til at oprette en stack. En stack er en måde at deploye docker-compose i Portainer på, dvs. at forbinde flere af vores containere i et fælles miljø, så de kan interagere.
Hvis du har fulgt vores Portainer med Caddy-guide, har du allerede oprettet et netværk kaldet „caddy‟, hvor vi allerede kører Caddy http-serveren. Vi kan også nemt forbinde vores Next.js-app til Caddy ved at forbinde Next.js-appen til Caddy-netværket og ved at sætte etiketter i docker-compose.yml-konfigurationsfilen , der fortæller Caddy, hvordan Next.js skal håndteres!
Åbn Stacks i portainermenuen til venstre, og klik på Add stack. Vælg et navn til denne stak, og indsæt derefter følgende kode i feltet „Web editor‟:
version: '3'
tjenester:
nextjs:
image: nextjs-app:latest # Erstat nextjs-app med det navn, du gav dit image i forrige trin!
container_name: nextjs-app # Det navn, containeren skal have, når den kører
havne:
- "3000" # Åbn port 3000 på containeren. Hvis din Next.js-app kører på en anden port, skal du justere!
netværk: # Forbind denne service til disse netværk
- Caddy
etiketter:
caddy: 'subdomain.domain.tld' # Erstat med det domæne eller subdomæne, du vil have Caddy til at køre din Next.js-app med!
caddy.reverse_proxy: "{{upstreams 3000}}" # Instruktioner til at videresende opkald til dette domæne eller subdomæne til port 3000 i containeren
netværk:
Caddy:
external: true # Deltag i det eksisterende netværk "Caddy" i stedet for at forsøge at oprette et nyt netværk med samme navn.
Rul nu ned til bunden af siden, og klik på Deploy the stack. Hvis du ikke får nogen fejlmeddelelser, kan du prøve at indlæse det domæne, din Next.js-app peger på, med https og se, om siden indlæses. I vores tilfælde:
Tillykke, din Next.js-app kører nu med https i Oderland Cloud!
FAQ og tips til fejlfinding
Hvordan ser jeg ressourceforbruget i min Next.js-app?
Start med at klikke på Containers i menuen til venstre i Portainer. Her kan du se alle aktive containere. Vi leder efter vores, som hvis du har fulgt guiden hedder nextjs-app, på samme linje i kolonnen Quick Actions finder du Stats.
I dette værktøj kan du overvåge ressourceforbruget i RAM, CPU, I/O og båndbredde fra hver container live, samt se processer, der kører inde i containeren.
Kan jeg interagere med Next.js inde i containeren via CLI?
Start med at klikke på Containers i menuen til venstre i Portainer. Her kan du se alle aktive containere. Vi leder efter vores, som hvis du har fulgt guiden hedder nextjs-app, på samme linje i kolonnen Quick Actions finder du Exec Console. Hvis du vil have en interaktiv terminal inde i containeren, kan du vælge standardindstillingen og køre „/bin/bash‟. Du kan også angive dine egne kommandoer og hvad de skal bruges til i den container, du vil åbne terminalen som, men det er ikke dækket i denne vejledning.
Når du så klikker på Connect, åbnes en bash-terminal inde i containeren, og du kan udføre kommandoer som normalt, f.eks. ps aux som i eksemplet ovenfor.
Hvordan ser jeg logfiler fra mine containere til yderligere fejlfinding?
Start med at klikke på Containers i menuen til venstre i Portainer. Her kan du se alle aktive containere. Vi leder efter vores, som hvis du har fulgt guiden hedder nextjs-app, på samme linje i kolonnen Quick Actions finder du Logs.
I logværktøjet kan du se en live log over, hvad programmet udskriver, som du kan manipulere på forskellige måder, såsom at downloade kopier, sætte på pause og inspicere individuelle linjer osv.