1. Hem
  2. Cloud
  3. Hur driftsätter jag Next.js i Oderland Cloud?

Hur driftsätter jag Next.js i Oderland Cloud?

Den här guiden är för avancerade användare som har en grundläggande förkunskap inom system som SSH, VPS:er och Docker, som kan vilja driftsätta Next.js eller andra Node.js-ramverk.

Vi kan inte lämna support på de applikationer som du sätter upp genom att följa denna guide.

Vad är Next.js / Nuxt.js / Gatsby / “JavaScript Ramverk”?

NextNuxtGatsby 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.

Vi har i den här guiden valt att använda Next.js som exempel, eftersom det är det i särklass populäraste av ramverken, men instruktionerna bör gå att följa relativt väl för Nuxt och Gatsby, med mera. Justera bara detaljer i er Dockerfile som NPM-kommandon och portvärden för att matcha egna behov!

Vad behöver jag för att följa guiden?

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 förutsätter här att din Next.js-app är uppladdad på den server du ska köra den från redan, med valfri metod.

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.

Om du följt vår guide om uppsättning av Portainer kommer detta köras i en egen docker-container, som inte har åtkomst till serverns filsystem. Vi kan därför inte använda oss av Dockerfile direktivet COPY för att få in filerna vi behöver i vår nya image, utan vi måste ladda in våra filer från exempelvis ett Github-repo genom git-kloning etc.

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:

(Tur vi inte jobbar med webbdesign!)

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.

Hjälpte den här guiden dig?

Relaterade guider

Behöver du mer hjälp?
Kan du inte hitta lösningen på ditt problem? Då kan du kontakta oss via e-post, chatt och telefon!
Kontakta oss