Vad är Next.js / Nuxt.js / Gatsby / “JavaScript Ramverk”?
Next, Nuxt, Gatsby och andra så kallade Javascript-ramverk är en samlingsterm för en mängd intressanta tekniker inom modern webbutveckling, som låter utvecklare skapa applikationer som ser ut som och beter sig mer som en app i din iPhone / Android än en traditionell hemsida, framförallt genom att sidan aldrig “laddar om” medan du klickar runt – JavaScript ändrar den HTML som visas beroende på besökarens input, utan att någonsin anropa servern för att hämta en ny html-fil!
Next.js, Nuxt.js och Gatsby.js använder sig också av en omfattande mängd andra tekniker för att förhöja UX, som server-side rendering, file-based routing med mera. Desto mer avancerade dessa funktioner blir i ramverken, desto mer behöver man se över hur projektet driftsätts på en server och där kan det vara till stor fördel att ha en miljö som är dedikerad till att köra just Node-baserade projekt istället för ett vanligt webbhotellkonto som inte är lämpat för det.
Vad behöver jag för att följa guiden?
- En server uppsatt genom Oderland Cloud med Docker Engine installerat. Du kan läsa i denna guide om hur du installerar Docker Engine på en befintlig server. Vill du sätta upp en ny server förberedd för Docker kan du istället följa dessa instruktioner.
- Portainer installerat på samma server.
- En Next.js-applikation tillgänglig via ett Git-repo du har access till på exempelvis Github.
När du har detta är det dags att sätta igång. Följ stegen nedan.
Steg 1: Skapa en Dockerfile för Next.js
Docker är ett system för att paketera program i en “container”: en liten, sluten Linuxmiljö med vissa förutsättningar där din applikation alltid körs på exakt samma vis utan att låta värddatorn påverka dess körning. Eftersom mycket kan skilja sig mellan olika operativsystem, mjukvaror och hårdvara är Docker ett bra sätt att se till att en applikation alltid kan göras på “rätt” sätt och du som utvecklare definierar vad som är “rätt sätt” i din Dockerfile. Den dockerfile vi använder i guiden kommer från den officiella dokumentationen för Next.js, daterad 2023-10-17.
Vi börjar med att öppna Portainer och klicka oss in på vår primära miljö, i vårt fall heter den “primary”:
Öppna fliken Images
och tryck på Build a new image
. Du kommer nu se ett fält där du sätter namnet på din image – vi kan nöja oss med “nextjs-app” i vårt fall! Under detta har vi ett fält för att definiera vår Dockerfile, en lista med instruktioner för Portainer om hur din app ska köras.
Här går vi igenom Dockerfilens innehåll och vad de olika stegen gör!
# Vi börjar med att kopiera baspaketet node:18 från Dockerhub FROM node:18 # Alla kommandon inne i Docker-container ska köras i "/app" WORKDIR /app # Ladda ner repot från t.ex github - Observera mellanslaget och punkten på slutet, annars misslyckas npm installationen! RUN git clone https://LÄNK_TILL_DITT_GIT_REPO.tld/nextjs-docker-guide.git . # Installera dependencies för Next.js inuti containern, så att vi är körklara! RUN npm install # Kompilera JavaScript som vanligt när man arbetar med Next.js och skapa en build RUN npm run build # Öppna port 3000 i containern, som är Next.js standardport EXPOSE 3000 # Starta Next.js appen genom att köra kommandot "npm start" CMD ["npm", "start"]
Tryck på Build the image
och om allt går bra ska du få output som liknar det här:
Gratulerar, du har nu en Docker image som kan köra din Next.js-sida!
Steg 2: Skapa en “Stack” med docker-compose
Vad behöver jag för att följa guiden?
- Ett domännamn eller subdomän, pekad mot din Oderland Cloud-servers IP-adress!
För att göra vår Next.js-sida tillgänglig över https (och utan att besökarna ska behöva ange portnummer 3000) så behöver vi skapa en stack. En stack är ett sätt att driftsätta docker-compose i Portainer, det vill säga att knyta ihop flera av våra containers i en gemensam miljö så att de kan interagera.
Om du följt vår Portainer-med-Caddy-guide har du redan skapat ett nätverk som heter “caddy” där vi redan kör http-servern Caddy. Vi kan enkelt koppla vår Next.js-app till Caddy också, genom att knyta Next.js-appen till nätverket Caddy och genom att sätta labels i konfigurationsfilen docker-compose.yml som berättar för Caddy hur den ska hantera Next.js!
Öppna Stacks
i portainer menyn till vänster och tryck på Add stack
. Välj ett namn för denna stack och klistra sedan in följande kod i fältet “Web editor”:
version: '3' services: nextjs: image: nextjs-app:latest # Ersätt nextjs-app med det namn du gav till din image i förra steget! container_name: nextjs-app # Namnet containern ska ha när den körs ports: - "3000" # Öppna port 3000 på containern. Om din Next.js app kör på en annan port, justera! networks: # Anslut denna service till de här nätverken - caddy labels: caddy: 'subdomän.domän.tld' # Ersätt med den domän eller subdomän du vill att Caddy ska köra din Next.js app med! caddy.reverse_proxy: "{{upstreams 3000}}" # Instruktioner för att skicka vidare anrop efter den här domänen eller subdomänen till port 3000 i containern networks: caddy: external: true # Gå med i det existerande nätverket "Caddy" istället för att försöka skapa ett nytt nätverk med samma namn
Scrolla nu längst ner på sidan och tryck på Deploy the stack
. Om du inte får några felmeddelanden, försök att ladda domänen din Next.js app pekar mot med https och se om sidan laddar. I vårt fall:
Gratulerar, din Next.js-app körs nu med https i Oderland Cloud!
FAQ och felsökningstips
Hur ser jag resursanvändningen för min Next.js-app?
Börja med att trycka på Containers
i menyn till vänster i Portainer. Här ser du alla aktiva containers. Vi letar upp vår, som om du följt guiden heter nextjs-app
, på samma rad i kolumnen Quick Actions
hittar du Stats
.
I det här verktyget kan du övervaka resursbruket i RAM, CPU, I/O och bandbredd från varje container live, samt se processer som körs inne i containern.
Kan jag interagera med Next.js inuti containern via CLI?
Börja med att trycka på Containers
i menyn till vänster i Portainer. Här ser du alla aktiva containers. Vi letar upp vår, som om du följt guiden heter nextjs-app
, på samma rad i kolumnen Quick Actions
hittar du Exec Console
. Om du vill ha en interaktiv terminal inuti containern kan du välja förvalet och köra “/bin/bash”. Du kan även specificera egna kommandon och vilke använda i containern du vill öppna terminalen som, men detta täcks inte av denna guide.
När du sedan trycker på Connect
öppnas en bash-terminal inuti containern och du kan utföra kommandon som vanligt, exempelvis ps aux som i exemplet ovan.
Hur ser jag loggar från mina containers för vidare felsökning?
Börja med att trycka på Containers
i menyn till vänster i Portainer. Här ser du alla aktiva containers. Vi letar upp vår, som om du följt guiden heter nextjs-app
, på samma rad i kolumnen Quick Actions
hittar du Logs
.
I logs-verktyget kan du se en live-logg av vad programmet skriver ut, som du kan manipulera på olika vis, till exempel ladda ner kopior, pausa och inspektera individuella rader, med mera.