Next.js, Nuxt.js och Gatsby.js anv\u00e4nder sig ocks\u00e5 av en omfattande m\u00e4ngd andra tekniker f\u00f6r att f\u00f6rh\u00f6ja UX, som server-side rendering, file-based routing med mera. Desto mer avancerade dessa funktioner blir i ramverken, desto mer beh\u00f6ver man se \u00f6ver hur projektet drifts\u00e4tts p\u00e5 en server och d\u00e4r kan det vara till stor f\u00f6rdel att ha en milj\u00f6 som \u00e4r dedikerad till att k\u00f6ra just Node-baserade projekt ist\u00e4llet f\u00f6r ett vanligt webbhotellkonto som inte \u00e4r l\u00e4mpat f\u00f6r det.<\/p>\n\n\n\n
Vad beh\u00f6ver jag f\u00f6r att f\u00f6lja guiden?<\/h3>\n\n\n\n\n- En server uppsatt genom Oderland <\/a>Cloud<\/a> med Docker Engine installerat. Du kan l\u00e4sa i denna guide<\/a> om hur du installerar Docker Engine p\u00e5 en befintlig server. Vill du s\u00e4tta upp en ny server f\u00f6rberedd f\u00f6r Docker kan du ist\u00e4llet f\u00f6lja dessa instruktioner<\/a>.<\/li>\n\n\n\n
- Portainer installerat p\u00e5 samma server<\/a>.<\/li>\n\n\n\n
- En Next.js-applikation tillg\u00e4nglig via ett Git-repo du har access till p\u00e5 exempelvis Github.<\/li>\n<\/ul>\n\n\n\n
N\u00e4r du har detta \u00e4r det dags att s\u00e4tta ig\u00e5ng. F\u00f6lj stegen nedan.<\/p>\n\n\n\n
Steg 1: <\/strong>Skapa en Dockerfile f\u00f6r Next.js<\/h2>\n\n\n\nDocker \u00e4r ett system f\u00f6r att paketera program i en ”container”: en liten, sluten Linuxmilj\u00f6 med vissa f\u00f6ruts\u00e4ttningar d\u00e4r din applikation alltid k\u00f6rs p\u00e5 exakt samma vis utan att l\u00e5ta v\u00e4rddatorn p\u00e5verka dess k\u00f6rning. Eftersom mycket kan skilja sig mellan olika operativsystem, mjukvaror och h\u00e5rdvara \u00e4r Docker ett bra s\u00e4tt att se till att en applikation alltid kan g\u00f6ras p\u00e5 ”r\u00e4tt” s\u00e4tt och du som utvecklare definierar vad som \u00e4r ”r\u00e4tt s\u00e4tt” i din Dockerfile<\/strong>. Den dockerfile vi anv\u00e4nder i guiden kommer fr\u00e5n den officiella dokumentationen f\u00f6r Next.js<\/a>, daterad 2023-10-17.<\/p>\n\n\n\nVi b\u00f6rjar med att \u00f6ppna Portainer och klicka oss in p\u00e5 v\u00e5r prim\u00e4ra milj\u00f6, i v\u00e5rt fall heter den ”primary”:<\/p>\n\n\n\n![\"\"](\"https:\/\/www.oderland.se\/support\/wp-content\/uploads\/2023\/10\/image-2023-10-9_13-54-16-1024x183.png\")
<\/a><\/figure>\n\n\n\n\u00d6ppna fliken Images<\/code> och tryck p\u00e5 Build a new image<\/code>. Du kommer nu se ett f\u00e4lt d\u00e4r du s\u00e4tter namnet p\u00e5 din image – vi kan n\u00f6ja oss med ”nextjs-app<\/strong>” i v\u00e5rt fall! Under detta har vi ett f\u00e4lt f\u00f6r att definiera v\u00e5r Dockerfile, en lista med instruktioner f\u00f6r Portainer om hur din app ska k\u00f6ras.<\/p>\n\n\n\nOm du f\u00f6ljt v\u00e5r guide om upps\u00e4ttning av Portainer<\/a> kommer detta k\u00f6ras i en egen docker-container, som inte har \u00e5tkomst till serverns filsystem. Vi kan d\u00e4rf\u00f6r inte anv\u00e4nda oss av Dockerfile direktivet COPY f\u00f6r att f\u00e5 in filerna vi beh\u00f6ver i v\u00e5r nya image, utan vi m\u00e5ste ladda in v\u00e5ra filer fr\u00e5n exempelvis ett Github-repo genom git-kloning etc.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.oderland.se\/support\/wp-content\/uploads\/2023\/10\/image-2023-10-9_13-57-46-1024x457.png\")
<\/a><\/figure>\n\n\n\nH\u00e4r g\u00e5r vi igenom Dockerfilens inneh\u00e5ll och vad de olika stegen g\u00f6r!<\/p>\n\n\n\n
# Vi b\u00f6rjar med att kopiera baspaketet node:18 fr\u00e5n Dockerhub\nFROM node:18\n\n# Alla kommandon inne i Docker-container ska k\u00f6ras i \"\/app\"\nWORKDIR \/app\n\n# Ladda ner repot fr\u00e5n t.ex github - Observera mellanslaget och punkten p\u00e5 slutet, annars misslyckas npm installationen!\nRUN git clone https:\/\/L\u00c4NK_TILL_DITT_GIT_REPO.tld\/nextjs-docker-guide.git .\n\n# Installera dependencies f\u00f6r Next.js inuti containern, s\u00e5 att vi \u00e4r k\u00f6rklara!\nRUN npm install\n\n# Kompilera JavaScript som vanligt n\u00e4r man arbetar med Next.js och skapa en build\nRUN npm run build\n\n# \u00d6ppna port 3000 i containern, som \u00e4r Next.js standardport\nEXPOSE 3000\n\n# Starta Next.js appen genom att k\u00f6ra kommandot \"npm start\"\nCMD [\"npm\", \"start\"]<\/pre>\n\n\n\nTryck p\u00e5 Build the image<\/code> och om allt g\u00e5r bra ska du f\u00e5 output som liknar det h\u00e4r:<\/p>\n\n\n\n![\"\"](\"https:\/\/www.oderland.se\/support\/wp-content\/uploads\/2023\/10\/image-2023-10-9_14-18-28.png\")
<\/a><\/figure>\n\n\n\nGratulerar, du har nu en Docker image som kan k\u00f6ra din Next.js-sida!<\/p>\n\n\n\n
Steg 2: Skapa en ”Stack” med docker-compose<\/h2>\n\n\n\nVad beh\u00f6ver jag f\u00f6r att f\u00f6lja guiden?<\/h4>\n\n\n\n\n- Ett dom\u00e4nnamn eller subdom\u00e4n, pekad mot din Oderland Cloud-servers IP-adress!<\/li>\n<\/ul>\n\n\n\n
F\u00f6r att g\u00f6ra v\u00e5r Next.js-sida tillg\u00e4nglig \u00f6ver https (och utan att bes\u00f6karna ska beh\u00f6va ange portnummer 3000) s\u00e5 beh\u00f6ver vi skapa en stack<\/em>. En stack \u00e4r ett s\u00e4tt att drifts\u00e4tta docker-compose<\/strong> i Portainer, det vill s\u00e4ga att knyta ihop flera av v\u00e5ra containers i en gemensam milj\u00f6 s\u00e5 att de kan interagera.<\/p>\n\n\n\nOm du f\u00f6ljt v\u00e5r Portainer-med-Caddy-guide<\/a> har du redan skapat ett n\u00e4tverk som heter ”caddy” d\u00e4r vi redan k\u00f6r http-servern Caddy. Vi kan enkelt koppla v\u00e5r Next.js-app till Caddy ocks\u00e5, genom att knyta Next.js-appen till n\u00e4tverket Caddy och genom att s\u00e4tta labels i konfigurationsfilen docker-compose.yml <\/strong>som ber\u00e4ttar f\u00f6r Caddy hur den ska hantera Next.js!<\/p>\n\n\n\n\u00d6ppna Stacks<\/code> i portainer menyn till v\u00e4nster och tryck p\u00e5 Add stack<\/code>. V\u00e4lj ett namn f\u00f6r denna stack och klistra sedan in f\u00f6ljande kod i f\u00e4ltet ”Web editor”:<\/p>\n\n\n\nversion: '3'\nservices:\n nextjs:\n image: nextjs-app:latest # Ers\u00e4tt nextjs-app med det namn du gav till din image i f\u00f6rra steget!\n container_name: nextjs-app # Namnet containern ska ha n\u00e4r den k\u00f6rs\n ports:\n - \"3000\" # \u00d6ppna port 3000 p\u00e5 containern. Om din Next.js app k\u00f6r p\u00e5 en annan port, justera!\n networks: # Anslut denna service till de h\u00e4r n\u00e4tverken\n - caddy\n labels:\n caddy: 'subdom\u00e4n.dom\u00e4n.tld' # Ers\u00e4tt med den dom\u00e4n eller subdom\u00e4n du vill att Caddy ska k\u00f6ra din Next.js app med!\n caddy.reverse_proxy: \"{{upstreams 3000}}\" # Instruktioner f\u00f6r att skicka vidare anrop efter den h\u00e4r dom\u00e4nen eller subdom\u00e4nen till port 3000 i containern\n \nnetworks:\n caddy:\n external: true # G\u00e5 med i det existerande n\u00e4tverket \"Caddy\" ist\u00e4llet f\u00f6r att f\u00f6rs\u00f6ka skapa ett nytt n\u00e4tverk med samma namn<\/pre>\n\n\n\n![\"\"](\"https:\/\/www.oderland.se\/support\/wp-content\/uploads\/2023\/10\/image-2023-10-10_11-13-6-1024x561.png\")
<\/a><\/figure>\n\n\n\nScrolla nu l\u00e4ngst ner p\u00e5 sidan och tryck p\u00e5 Deploy the stack<\/code>. Om du inte f\u00e5r n\u00e5gra felmeddelanden, f\u00f6rs\u00f6k att ladda dom\u00e4nen din Next.js app pekar mot med https och se om sidan laddar. I v\u00e5rt fall:<\/p>\n\n\n\n![\"\"](\"https:\/\/www.oderland.se\/support\/wp-content\/uploads\/2023\/10\/image-2023-10-10_11-14-41-1024x145.png\")
<\/a>(Tur vi inte jobbar med webbdesign!)<\/figcaption><\/figure>\n\n\n\nGratulerar, din Next.js-app k\u00f6rs nu med https i Oderland Cloud!<\/p>\n\n\n\n
FAQ och fels\u00f6kningstips<\/h2>\n\n\n\nHur ser jag resursanv\u00e4ndningen f\u00f6r min Next.js-app?<\/em><\/h5>\n\n\n\n![\"\"](\"https:\/\/www.oderland.se\/support\/wp-content\/uploads\/2023\/10\/image-2023-10-11_10-19-19-872x1024.png\")
<\/a><\/figure>\n\n\n\nB\u00f6rja med att trycka p\u00e5 Containers<\/code> i menyn till v\u00e4nster i Portainer. H\u00e4r ser du alla aktiva containers. Vi letar upp v\u00e5r, som om du f\u00f6ljt guiden heter nextjs-app<\/code>, p\u00e5 samma rad i kolumnen Quick Actions<\/code> hittar du Stats<\/code>.<\/p>\n\n\n\nI det h\u00e4r verktyget kan du \u00f6vervaka resursbruket i RAM, CPU, I\/O och bandbredd fr\u00e5n varje container live, samt se processer som k\u00f6rs inne i containern.<\/p>\n\n\n\n
Kan jag interagera med Next.js inuti containern via CLI?<\/em><\/h5>\n\n\n\n![\"\"](\"https:\/\/www.oderland.se\/support\/wp-content\/uploads\/2023\/10\/image-2023-10-11_10-22-17.png\")
<\/a><\/figure>\n\n\n\nB\u00f6rja med att trycka p\u00e5 Containers<\/code> i menyn till v\u00e4nster i Portainer. H\u00e4r ser du alla aktiva containers. Vi letar upp v\u00e5r, som om du f\u00f6ljt guiden heter nextjs-app<\/code>, p\u00e5 samma rad i kolumnen Quick Actions<\/code> hittar du Exec Console<\/code>. Om du vill ha en interaktiv terminal inuti containern kan du v\u00e4lja f\u00f6rvalet och k\u00f6ra ”\/bin\/bash”. Du kan \u00e4ven specificera egna kommandon och vilke anv\u00e4nda i containern du vill \u00f6ppna terminalen som, men detta t\u00e4cks inte av denna guide.<\/p>\n\n\n\nN\u00e4r du sedan trycker p\u00e5 Connect<\/code> \u00f6ppnas en bash-terminal inuti containern och du kan utf\u00f6ra kommandon som vanligt, exempelvis ps aux<\/strong> som i exemplet ovan.<\/p>\n\n\n\nHur ser jag loggar fr\u00e5n mina containers f\u00f6r vidare fels\u00f6kning?<\/em><\/h5>\n\n\n\n![\"\"](\"https:\/\/www.oderland.se\/support\/wp-content\/uploads\/2023\/10\/image-2023-10-11_10-21-17.png\")
<\/a><\/figure>\n\n\n\nB\u00f6rja med att trycka p\u00e5 Containers<\/code> i menyn till v\u00e4nster i Portainer. H\u00e4r ser du alla aktiva containers. Vi letar upp v\u00e5r, som om du f\u00f6ljt guiden heter nextjs-app<\/code>, p\u00e5 samma rad i kolumnen Quick Actions<\/code> hittar du Logs<\/code>.<\/p>\n\n\n\nI logs-verktyget kan du se en live-logg av vad programmet skriver ut, som du kan manipulera p\u00e5 olika vis, till exempel ladda ner kopior, pausa och inspektera individuella rader, med mera.<\/p>\n","protected":false},"excerpt":{"rendered":"
Vad \u00e4r Next.js \/ Nuxt.js \/ Gatsby \/ ”JavaScript Ramverk”? Next, Nuxt, Gatsby och andra s\u00e5 kallade Javascript-ramverk \u00e4r en samlingsterm f\u00f6r en m\u00e4ngd intressanta tekniker inom modern webbutveckling, som l\u00e5ter utvecklare skapa applikationer som ser ut som och beter sig mer som en app i din iPhone \/ Android \u00e4n en traditionell…<\/p>\n","protected":false},"author":42,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"ht-kb-category":[681],"ht-kb-tag":[],"class_list":["post-19996","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-cloud"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/ht-kb\/19996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/comments?post=19996"}],"version-history":[{"count":17,"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/ht-kb\/19996\/revisions"}],"predecessor-version":[{"id":20060,"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/ht-kb\/19996\/revisions\/20060"}],"wp:attachment":[{"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/media?parent=19996"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/ht-kb-category?post=19996"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/ht-kb-tag?post=19996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
N\u00e4r du har detta \u00e4r det dags att s\u00e4tta ig\u00e5ng. F\u00f6lj stegen nedan.<\/p>\n\n\n\n
Steg 1: <\/strong>Skapa en Dockerfile f\u00f6r Next.js<\/h2>\n\n\n\nDocker \u00e4r ett system f\u00f6r att paketera program i en ”container”: en liten, sluten Linuxmilj\u00f6 med vissa f\u00f6ruts\u00e4ttningar d\u00e4r din applikation alltid k\u00f6rs p\u00e5 exakt samma vis utan att l\u00e5ta v\u00e4rddatorn p\u00e5verka dess k\u00f6rning. Eftersom mycket kan skilja sig mellan olika operativsystem, mjukvaror och h\u00e5rdvara \u00e4r Docker ett bra s\u00e4tt att se till att en applikation alltid kan g\u00f6ras p\u00e5 ”r\u00e4tt” s\u00e4tt och du som utvecklare definierar vad som \u00e4r ”r\u00e4tt s\u00e4tt” i din Dockerfile<\/strong>. Den dockerfile vi anv\u00e4nder i guiden kommer fr\u00e5n den officiella dokumentationen f\u00f6r Next.js<\/a>, daterad 2023-10-17.<\/p>\n\n\n\nVi b\u00f6rjar med att \u00f6ppna Portainer och klicka oss in p\u00e5 v\u00e5r prim\u00e4ra milj\u00f6, i v\u00e5rt fall heter den ”primary”:<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n\u00d6ppna fliken Images<\/code> och tryck p\u00e5 Build a new image<\/code>. Du kommer nu se ett f\u00e4lt d\u00e4r du s\u00e4tter namnet p\u00e5 din image – vi kan n\u00f6ja oss med ”nextjs-app<\/strong>” i v\u00e5rt fall! Under detta har vi ett f\u00e4lt f\u00f6r att definiera v\u00e5r Dockerfile, en lista med instruktioner f\u00f6r Portainer om hur din app ska k\u00f6ras.<\/p>\n\n\n\nOm du f\u00f6ljt v\u00e5r guide om upps\u00e4ttning av Portainer<\/a> kommer detta k\u00f6ras i en egen docker-container, som inte har \u00e5tkomst till serverns filsystem. Vi kan d\u00e4rf\u00f6r inte anv\u00e4nda oss av Dockerfile direktivet COPY f\u00f6r att f\u00e5 in filerna vi beh\u00f6ver i v\u00e5r nya image, utan vi m\u00e5ste ladda in v\u00e5ra filer fr\u00e5n exempelvis ett Github-repo genom git-kloning etc.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nH\u00e4r g\u00e5r vi igenom Dockerfilens inneh\u00e5ll och vad de olika stegen g\u00f6r!<\/p>\n\n\n\n
# Vi b\u00f6rjar med att kopiera baspaketet node:18 fr\u00e5n Dockerhub\nFROM node:18\n\n# Alla kommandon inne i Docker-container ska k\u00f6ras i \"\/app\"\nWORKDIR \/app\n\n# Ladda ner repot fr\u00e5n t.ex github - Observera mellanslaget och punkten p\u00e5 slutet, annars misslyckas npm installationen!\nRUN git clone https:\/\/L\u00c4NK_TILL_DITT_GIT_REPO.tld\/nextjs-docker-guide.git .\n\n# Installera dependencies f\u00f6r Next.js inuti containern, s\u00e5 att vi \u00e4r k\u00f6rklara!\nRUN npm install\n\n# Kompilera JavaScript som vanligt n\u00e4r man arbetar med Next.js och skapa en build\nRUN npm run build\n\n# \u00d6ppna port 3000 i containern, som \u00e4r Next.js standardport\nEXPOSE 3000\n\n# Starta Next.js appen genom att k\u00f6ra kommandot \"npm start\"\nCMD [\"npm\", \"start\"]<\/pre>\n\n\n\nTryck p\u00e5 Build the image<\/code> och om allt g\u00e5r bra ska du f\u00e5 output som liknar det h\u00e4r:<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nGratulerar, du har nu en Docker image som kan k\u00f6ra din Next.js-sida!<\/p>\n\n\n\n
Steg 2: Skapa en ”Stack” med docker-compose<\/h2>\n\n\n\nVad beh\u00f6ver jag f\u00f6r att f\u00f6lja guiden?<\/h4>\n\n\n\n\n- Ett dom\u00e4nnamn eller subdom\u00e4n, pekad mot din Oderland Cloud-servers IP-adress!<\/li>\n<\/ul>\n\n\n\n
F\u00f6r att g\u00f6ra v\u00e5r Next.js-sida tillg\u00e4nglig \u00f6ver https (och utan att bes\u00f6karna ska beh\u00f6va ange portnummer 3000) s\u00e5 beh\u00f6ver vi skapa en stack<\/em>. En stack \u00e4r ett s\u00e4tt att drifts\u00e4tta docker-compose<\/strong> i Portainer, det vill s\u00e4ga att knyta ihop flera av v\u00e5ra containers i en gemensam milj\u00f6 s\u00e5 att de kan interagera.<\/p>\n\n\n\nOm du f\u00f6ljt v\u00e5r Portainer-med-Caddy-guide<\/a> har du redan skapat ett n\u00e4tverk som heter ”caddy” d\u00e4r vi redan k\u00f6r http-servern Caddy. Vi kan enkelt koppla v\u00e5r Next.js-app till Caddy ocks\u00e5, genom att knyta Next.js-appen till n\u00e4tverket Caddy och genom att s\u00e4tta labels i konfigurationsfilen docker-compose.yml <\/strong>som ber\u00e4ttar f\u00f6r Caddy hur den ska hantera Next.js!<\/p>\n\n\n\n\u00d6ppna Stacks<\/code> i portainer menyn till v\u00e4nster och tryck p\u00e5 Add stack<\/code>. V\u00e4lj ett namn f\u00f6r denna stack och klistra sedan in f\u00f6ljande kod i f\u00e4ltet ”Web editor”:<\/p>\n\n\n\nversion: '3'\nservices:\n nextjs:\n image: nextjs-app:latest # Ers\u00e4tt nextjs-app med det namn du gav till din image i f\u00f6rra steget!\n container_name: nextjs-app # Namnet containern ska ha n\u00e4r den k\u00f6rs\n ports:\n - \"3000\" # \u00d6ppna port 3000 p\u00e5 containern. Om din Next.js app k\u00f6r p\u00e5 en annan port, justera!\n networks: # Anslut denna service till de h\u00e4r n\u00e4tverken\n - caddy\n labels:\n caddy: 'subdom\u00e4n.dom\u00e4n.tld' # Ers\u00e4tt med den dom\u00e4n eller subdom\u00e4n du vill att Caddy ska k\u00f6ra din Next.js app med!\n caddy.reverse_proxy: \"{{upstreams 3000}}\" # Instruktioner f\u00f6r att skicka vidare anrop efter den h\u00e4r dom\u00e4nen eller subdom\u00e4nen till port 3000 i containern\n \nnetworks:\n caddy:\n external: true # G\u00e5 med i det existerande n\u00e4tverket \"Caddy\" ist\u00e4llet f\u00f6r att f\u00f6rs\u00f6ka skapa ett nytt n\u00e4tverk med samma namn<\/pre>\n\n\n\n<\/a><\/figure>\n\n\n\nScrolla nu l\u00e4ngst ner p\u00e5 sidan och tryck p\u00e5 Deploy the stack<\/code>. Om du inte f\u00e5r n\u00e5gra felmeddelanden, f\u00f6rs\u00f6k att ladda dom\u00e4nen din Next.js app pekar mot med https och se om sidan laddar. I v\u00e5rt fall:<\/p>\n\n\n\n<\/a>(Tur vi inte jobbar med webbdesign!)<\/figcaption><\/figure>\n\n\n\nGratulerar, din Next.js-app k\u00f6rs nu med https i Oderland Cloud!<\/p>\n\n\n\n
FAQ och fels\u00f6kningstips<\/h2>\n\n\n\nHur ser jag resursanv\u00e4ndningen f\u00f6r min Next.js-app?<\/em><\/h5>\n\n\n\n<\/a><\/figure>\n\n\n\nB\u00f6rja med att trycka p\u00e5 Containers<\/code> i menyn till v\u00e4nster i Portainer. H\u00e4r ser du alla aktiva containers. Vi letar upp v\u00e5r, som om du f\u00f6ljt guiden heter nextjs-app<\/code>, p\u00e5 samma rad i kolumnen Quick Actions<\/code> hittar du Stats<\/code>.<\/p>\n\n\n\nI det h\u00e4r verktyget kan du \u00f6vervaka resursbruket i RAM, CPU, I\/O och bandbredd fr\u00e5n varje container live, samt se processer som k\u00f6rs inne i containern.<\/p>\n\n\n\n
Kan jag interagera med Next.js inuti containern via CLI?<\/em><\/h5>\n\n\n\n<\/a><\/figure>\n\n\n\nB\u00f6rja med att trycka p\u00e5 Containers<\/code> i menyn till v\u00e4nster i Portainer. H\u00e4r ser du alla aktiva containers. Vi letar upp v\u00e5r, som om du f\u00f6ljt guiden heter nextjs-app<\/code>, p\u00e5 samma rad i kolumnen Quick Actions<\/code> hittar du Exec Console<\/code>. Om du vill ha en interaktiv terminal inuti containern kan du v\u00e4lja f\u00f6rvalet och k\u00f6ra ”\/bin\/bash”. Du kan \u00e4ven specificera egna kommandon och vilke anv\u00e4nda i containern du vill \u00f6ppna terminalen som, men detta t\u00e4cks inte av denna guide.<\/p>\n\n\n\nN\u00e4r du sedan trycker p\u00e5 Connect<\/code> \u00f6ppnas en bash-terminal inuti containern och du kan utf\u00f6ra kommandon som vanligt, exempelvis ps aux<\/strong> som i exemplet ovan.<\/p>\n\n\n\nHur ser jag loggar fr\u00e5n mina containers f\u00f6r vidare fels\u00f6kning?<\/em><\/h5>\n\n\n\n<\/a><\/figure>\n\n\n\nB\u00f6rja med att trycka p\u00e5 Containers<\/code> i menyn till v\u00e4nster i Portainer. H\u00e4r ser du alla aktiva containers. Vi letar upp v\u00e5r, som om du f\u00f6ljt guiden heter nextjs-app<\/code>, p\u00e5 samma rad i kolumnen Quick Actions<\/code> hittar du Logs<\/code>.<\/p>\n\n\n\nI logs-verktyget kan du se en live-logg av vad programmet skriver ut, som du kan manipulera p\u00e5 olika vis, till exempel ladda ner kopior, pausa och inspektera individuella rader, med mera.<\/p>\n","protected":false},"excerpt":{"rendered":"
Vad \u00e4r Next.js \/ Nuxt.js \/ Gatsby \/ ”JavaScript Ramverk”? Next, Nuxt, Gatsby och andra s\u00e5 kallade Javascript-ramverk \u00e4r en samlingsterm f\u00f6r en m\u00e4ngd intressanta tekniker inom modern webbutveckling, som l\u00e5ter utvecklare skapa applikationer som ser ut som och beter sig mer som en app i din iPhone \/ Android \u00e4n en traditionell…<\/p>\n","protected":false},"author":42,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"ht-kb-category":[681],"ht-kb-tag":[],"class_list":["post-19996","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-cloud"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/ht-kb\/19996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/comments?post=19996"}],"version-history":[{"count":17,"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/ht-kb\/19996\/revisions"}],"predecessor-version":[{"id":20060,"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/ht-kb\/19996\/revisions\/20060"}],"wp:attachment":[{"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/media?parent=19996"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/ht-kb-category?post=19996"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/ht-kb-tag?post=19996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Vi b\u00f6rjar med att \u00f6ppna Portainer och klicka oss in p\u00e5 v\u00e5r prim\u00e4ra milj\u00f6, i v\u00e5rt fall heter den ”primary”:<\/p>\n\n\n\n \u00d6ppna fliken Om du f\u00f6ljt v\u00e5r guide om upps\u00e4ttning av Portainer<\/a> kommer detta k\u00f6ras i en egen docker-container, som inte har \u00e5tkomst till serverns filsystem. Vi kan d\u00e4rf\u00f6r inte anv\u00e4nda oss av Dockerfile direktivet COPY f\u00f6r att f\u00e5 in filerna vi beh\u00f6ver i v\u00e5r nya image, utan vi m\u00e5ste ladda in v\u00e5ra filer fr\u00e5n exempelvis ett Github-repo genom git-kloning etc.<\/p>\n\n\n\n H\u00e4r g\u00e5r vi igenom Dockerfilens inneh\u00e5ll och vad de olika stegen g\u00f6r!<\/p>\n\n\n\n Tryck p\u00e5 Gratulerar, du har nu en Docker image som kan k\u00f6ra din Next.js-sida!<\/p>\n\n\n\n F\u00f6r att g\u00f6ra v\u00e5r Next.js-sida tillg\u00e4nglig \u00f6ver https (och utan att bes\u00f6karna ska beh\u00f6va ange portnummer 3000) s\u00e5 beh\u00f6ver vi skapa en stack<\/em>. En stack \u00e4r ett s\u00e4tt att drifts\u00e4tta docker-compose<\/strong> i Portainer, det vill s\u00e4ga att knyta ihop flera av v\u00e5ra containers i en gemensam milj\u00f6 s\u00e5 att de kan interagera.<\/p>\n\n\n\n Om du f\u00f6ljt v\u00e5r Portainer-med-Caddy-guide<\/a> har du redan skapat ett n\u00e4tverk som heter ”caddy” d\u00e4r vi redan k\u00f6r http-servern Caddy. Vi kan enkelt koppla v\u00e5r Next.js-app till Caddy ocks\u00e5, genom att knyta Next.js-appen till n\u00e4tverket Caddy och genom att s\u00e4tta labels i konfigurationsfilen docker-compose.yml <\/strong>som ber\u00e4ttar f\u00f6r Caddy hur den ska hantera Next.js!<\/p>\n\n\n\n \u00d6ppna Scrolla nu l\u00e4ngst ner p\u00e5 sidan och tryck p\u00e5 Gratulerar, din Next.js-app k\u00f6rs nu med https i Oderland Cloud!<\/p>\n\n\n\n B\u00f6rja med att trycka p\u00e5 I det h\u00e4r verktyget kan du \u00f6vervaka resursbruket i RAM, CPU, I\/O och bandbredd fr\u00e5n varje container live, samt se processer som k\u00f6rs inne i containern.<\/p>\n\n\n\n B\u00f6rja med att trycka p\u00e5 N\u00e4r du sedan trycker p\u00e5 B\u00f6rja med att trycka p\u00e5 I logs-verktyget kan du se en live-logg av vad programmet skriver ut, som du kan manipulera p\u00e5 olika vis, till exempel ladda ner kopior, pausa och inspektera individuella rader, med mera.<\/p>\n","protected":false},"excerpt":{"rendered":" Vad \u00e4r Next.js \/ Nuxt.js \/ Gatsby \/ ”JavaScript Ramverk”? Next, Nuxt, Gatsby och andra s\u00e5 kallade Javascript-ramverk \u00e4r en samlingsterm f\u00f6r en m\u00e4ngd intressanta tekniker inom modern webbutveckling, som l\u00e5ter utvecklare skapa applikationer som ser ut som och beter sig mer som en app i din iPhone \/ Android \u00e4n en traditionell…<\/p>\n","protected":false},"author":42,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"ht-kb-category":[681],"ht-kb-tag":[],"class_list":["post-19996","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-cloud"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/ht-kb\/19996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/comments?post=19996"}],"version-history":[{"count":17,"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/ht-kb\/19996\/revisions"}],"predecessor-version":[{"id":20060,"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/ht-kb\/19996\/revisions\/20060"}],"wp:attachment":[{"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/media?parent=19996"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/ht-kb-category?post=19996"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.oderland.se\/support\/wp-json\/wp\/v2\/ht-kb-tag?post=19996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<\/a><\/figure>\n\n\n\nImages<\/code> och tryck p\u00e5 Build a new image<\/code>. Du kommer nu se ett f\u00e4lt d\u00e4r du s\u00e4tter namnet p\u00e5 din image – vi kan n\u00f6ja oss med ”nextjs-app<\/strong>” i v\u00e5rt fall! Under detta har vi ett f\u00e4lt f\u00f6r att definiera v\u00e5r Dockerfile, en lista med instruktioner f\u00f6r Portainer om hur din app ska k\u00f6ras.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n# Vi b\u00f6rjar med att kopiera baspaketet node:18 fr\u00e5n Dockerhub\nFROM node:18\n\n# Alla kommandon inne i Docker-container ska k\u00f6ras i \"\/app\"\nWORKDIR \/app\n\n# Ladda ner repot fr\u00e5n t.ex github - Observera mellanslaget och punkten p\u00e5 slutet, annars misslyckas npm installationen!\nRUN git clone https:\/\/L\u00c4NK_TILL_DITT_GIT_REPO.tld\/nextjs-docker-guide.git .\n\n# Installera dependencies f\u00f6r Next.js inuti containern, s\u00e5 att vi \u00e4r k\u00f6rklara!\nRUN npm install\n\n# Kompilera JavaScript som vanligt n\u00e4r man arbetar med Next.js och skapa en build\nRUN npm run build\n\n# \u00d6ppna port 3000 i containern, som \u00e4r Next.js standardport\nEXPOSE 3000\n\n# Starta Next.js appen genom att k\u00f6ra kommandot \"npm start\"\nCMD [\"npm\", \"start\"]<\/pre>\n\n\n\n
Build the image<\/code> och om allt g\u00e5r bra ska du f\u00e5 output som liknar det h\u00e4r:<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nSteg 2: Skapa en ”Stack” med docker-compose<\/h2>\n\n\n\n
Vad beh\u00f6ver jag f\u00f6r att f\u00f6lja guiden?<\/h4>\n\n\n\n
\n
Stacks<\/code> i portainer menyn till v\u00e4nster och tryck p\u00e5 Add stack<\/code>. V\u00e4lj ett namn f\u00f6r denna stack och klistra sedan in f\u00f6ljande kod i f\u00e4ltet ”Web editor”:<\/p>\n\n\n\nversion: '3'\nservices:\n nextjs:\n image: nextjs-app:latest # Ers\u00e4tt nextjs-app med det namn du gav till din image i f\u00f6rra steget!\n container_name: nextjs-app # Namnet containern ska ha n\u00e4r den k\u00f6rs\n ports:\n - \"3000\" # \u00d6ppna port 3000 p\u00e5 containern. Om din Next.js app k\u00f6r p\u00e5 en annan port, justera!\n networks: # Anslut denna service till de h\u00e4r n\u00e4tverken\n - caddy\n labels:\n caddy: 'subdom\u00e4n.dom\u00e4n.tld' # Ers\u00e4tt med den dom\u00e4n eller subdom\u00e4n du vill att Caddy ska k\u00f6ra din Next.js app med!\n caddy.reverse_proxy: \"{{upstreams 3000}}\" # Instruktioner f\u00f6r att skicka vidare anrop efter den h\u00e4r dom\u00e4nen eller subdom\u00e4nen till port 3000 i containern\n \nnetworks:\n caddy:\n external: true # G\u00e5 med i det existerande n\u00e4tverket \"Caddy\" ist\u00e4llet f\u00f6r att f\u00f6rs\u00f6ka skapa ett nytt n\u00e4tverk med samma namn<\/pre>\n\n\n\n<\/a><\/figure>\n\n\n\nDeploy the stack<\/code>. Om du inte f\u00e5r n\u00e5gra felmeddelanden, f\u00f6rs\u00f6k att ladda dom\u00e4nen din Next.js app pekar mot med https och se om sidan laddar. I v\u00e5rt fall:<\/p>\n\n\n\n<\/a>FAQ och fels\u00f6kningstips<\/h2>\n\n\n\n
Hur ser jag resursanv\u00e4ndningen f\u00f6r min Next.js-app?<\/em><\/h5>\n\n\n\n
<\/a><\/figure>\n\n\n\nContainers<\/code> i menyn till v\u00e4nster i Portainer. H\u00e4r ser du alla aktiva containers. Vi letar upp v\u00e5r, som om du f\u00f6ljt guiden heter nextjs-app<\/code>, p\u00e5 samma rad i kolumnen Quick Actions<\/code> hittar du Stats<\/code>.<\/p>\n\n\n\nKan jag interagera med Next.js inuti containern via CLI?<\/em><\/h5>\n\n\n\n
<\/a><\/figure>\n\n\n\nContainers<\/code> i menyn till v\u00e4nster i Portainer. H\u00e4r ser du alla aktiva containers. Vi letar upp v\u00e5r, som om du f\u00f6ljt guiden heter nextjs-app<\/code>, p\u00e5 samma rad i kolumnen Quick Actions<\/code> hittar du Exec Console<\/code>. Om du vill ha en interaktiv terminal inuti containern kan du v\u00e4lja f\u00f6rvalet och k\u00f6ra ”\/bin\/bash”. Du kan \u00e4ven specificera egna kommandon och vilke anv\u00e4nda i containern du vill \u00f6ppna terminalen som, men detta t\u00e4cks inte av denna guide.<\/p>\n\n\n\nConnect<\/code> \u00f6ppnas en bash-terminal inuti containern och du kan utf\u00f6ra kommandon som vanligt, exempelvis ps aux<\/strong> som i exemplet ovan.<\/p>\n\n\n\nHur ser jag loggar fr\u00e5n mina containers f\u00f6r vidare fels\u00f6kning?<\/em><\/h5>\n\n\n\n
<\/a><\/figure>\n\n\n\nContainers<\/code> i menyn till v\u00e4nster i Portainer. H\u00e4r ser du alla aktiva containers. Vi letar upp v\u00e5r, som om du f\u00f6ljt guiden heter nextjs-app<\/code>, p\u00e5 samma rad i kolumnen Quick Actions<\/code> hittar du Logs<\/code>.<\/p>\n\n\n\n