Nextjs, Traefik and Docker

Answered

Philippine Crocodile posted this in #help-forum

Philippine CrocodileOP

2024-01-18T15:27:08.000Z

Trying to get my reverse proxy working just to display a simple nextjs website, but something between standalone mode output and the configuration settings of traefik, or the volumes available to the container are not correctly available such that connecting to the url shows a styled 404 error.

The console on browser is throwing errors 404 page not found and pointing to _next/static/chunks instead of ./next/static/chunks which is the actual folder structure based on the standalone output.

Can someone explain or point out what could be causing this?

In my docker-compose.yml file I have the volume mounted, and I copy the contents of my project folder into the /app workdir and build in /app/.next/standalone...

Answered by Philippine Crocodile

@Ray I finally got it, going to post this last message as an answer.

I set my next.config.json values to:

const nextConfig = {
    output: "standalone",
    basePath: "",
}

I don't use any prefix middleware, nothing. Just set blank base path.

My Dockerfile has one change:

CMD ["npm", "run", "start"]

Instead of standalone I just run start. That works for some reason. Running standalone misses things. I'm concerned it's because I can't use certain features with standalone output. Could this be the case for things like Server Actions and animations?

Anyway I'm sure I"m still doing everything wrong but at least now I can secure it with SSL and be done.

Thank you for the help!

View full answer

209 Replies

Toyger

2024-01-18T16:19:09.000Z

what logs of traefik and nextjs show?
does it work in local dev environment?

Philippine CrocodileOP

2024-01-18T16:40:09.000Z

docker-compose logs traefik doesn't say much, it's referencing some tls stuff because im still localhost testing. I can reach the traefik dashboard just fine, and attempting to connect to the routed page takes me to a stylized 404 page, whereas just localhost is a basic html 404 error page no style.

I'm assuming my style and dependencies are properly loaded on the 3000 port as described in my config files.

Note I am trying to build a standalone nextjs project, deployed using docker, sitting behind a traefik reverse proxy. I want my nextjs project to be routed to example.com versus the dashboard at traefik.example.com. The traefik dashboard is routed correctly.

My website build also completed and ran no problem, referencing the standalone server.js

FROM node:18-alpine

WORKDIR /app

# Install dependencies based on the preferred package manager
COPY ../nextjs ./
RUN npm install
RUN npm run build

#COPY nextjs/.next/standalone/ /nextjs/
#COPY ../.next/static/ /nextjs/
EXPOSE 3000

# Use "node .next/standalone/server.js" instead of "npm run start"
CMD ["node", ".next/standalone/server.js"]

here is the dockerfile

version: '3.9'

services:
  website:
    build:
      context: ../
      dockerfile: ./.docker/Dockerfile
    image: website:latest
    container_name: website
    ports:
      - 3000:3000  # Expose the port your Next.js app is running on
    volumes: #
      - ../nextjs/:/nextjs
    restart: always

    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.website.entrypoints=web"
      - "traefik.http.routers.website.rule=Host(`localhost`)"
      - "traefik.http.services.website.loadbalancer.server.port=3000"
      - "traefik.http.routers.website.middlewares=nextjs-static"
      - "traefik.http.middlewares.nextjs-static.file.directory=/app/.next/static/"
    depends_on:
      - traefik
  traefik:
    container_name: traefik
    image: traefik:v2.5
    command:
      - "--api.insecure=true"
      - "--providers.docker=true"
      - "--providers.docker.exoosedbydefault=false"
      - "--entrypoints.web.address=:80"
      - "--entrypoints.websecure.address=:443"
      - "--certificatesresolvers.myresolver.acme.tlschallenge=true"
      - "--certificatesresolvers.myresolver.acme.httpchallenge=true"
      - "--certificatesresolvers.myresolver.acme.email=email@email.com"
      - "--certificatesresolvers.myresolver.acme.storage=/letsencrypt/acme.json"
    ports:
      - "80:80"
      - "443:443"
      - "8080:8080"  # Traefik dashboard
    volumes:
      - "./letsencrypt:/letsencrypt"
      - /var/run/docker.sock:/var/run/docker.sock
      - ./traefik/traefik.yml:/etc/traefik/traefik.yml
      - ./traefik/acme.json:/acme.json
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.traefik.rule=Host(`traefik.localhost`)"  # Traefik dashboard domain
      - "traefik.http.routers.traefik.entrypoints=web"
      - "traefik.http.routers.traefik.service=api@internal"
      - "traefik.http.services.traefik.loadbalancer.server.port=8080"

networks:
  docker_services:
    external: true

I tried adding the middleware assuming it was part of the problem but had no luck.

When I go to the browser and attempt to go to the page I am greeted by a bunch of missing chunk files in console:

GET http://localhost:3000/_next/static/dhzut4wh3yiCZE7zS2vFW/_ssgManifest.js net::ERR_ABORTED 404 (Not Found)

My assumption is something to do with the nextjs server running and traefik's routing is not talking to each other properly, when using standalone output.

I haven't found very many good examples of a nextjs app sitting behind traefik reverse proxy to pull from, the few examples I did find don't seem to have my issue.

In summary:

localhost -> basic html 404 error
localhost:3000 -> shows styled 404 error page
localhost:8080 -> shows traefik dashboard working

My next.config file:

const nextConfig = {
    output: "standalone",
    basePath: '',
    assetPrefix: '/',
}

Toyger

2024-01-18T16:52:52.000Z

right now main problem that it not even run at localhost:3000 but it should without any problems

Philippine CrocodileOP

2024-01-18T16:55:07.000Z

Yeah and I don't quite understand why myself and am hitting my head against a wall. it can't get anything from the static folder for some reason.