Next.js Discord

Discord Forum

Nextjs, Traefik and Docker

Answered
Philippine Crocodile posted this in #help-forum
Open in Discord
Avatar
Philippine CrocodileOP
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

Avatar
Toyger
what logs of traefik and nextjs show?
does it work in local dev environment?
Avatar
Philippine CrocodileOP
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: '/',
}
Avatar
Toyger
right now main problem that it not even run at localhost:3000 but it should without any problems
Avatar
Philippine CrocodileOP
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.
Avatar
Ray
look like you didn't copy the static file?
Avatar
Philippine CrocodileOP
I tried and it didn't do anything previously
how would you copy it @Ray ?
in the dockerfile with a COPY after build?
Avatar
Ray
COPY /app/.next/standalone ./
COPY /app/.next/static ./.next/static
EXPOSE 3000

ENV HOSTNAME "0.0.0.0"
# Use "node .next/standalone/server.js" instead of "npm run start"
CMD ["node", "server.js"]
try this
oh wait
Avatar
Philippine CrocodileOP
Mmh COPY /.next/static ./.next/static throws an error /next/static not found
because its workdir app
Avatar
Ray
just saw you have WORKDIR /app there
I changed the path, please try again
Avatar
Philippine CrocodileOP
failed to solve: failed to compute cache key: failed to calculate checksum of ref 33634c22-5c92-4150-a8b7-3b3ca89f7fe2::qd7kluifs8jzryn7bwng0dzx1: "/app/.next/static": not found
This was my issue all last night and eventually I gave up on copying, thinking I didn't even need to.
Avatar
Ray
FROM node:18-alpine

WORKDIR /app

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

COPY /app/.next/standalone ./
COPY /app/.next/static ./.next/static
EXPOSE 3000

ENV HOSTNAME "0.0.0.0"
# Use "node .next/standalone/server.js" instead of "npm run start"
CMD ["node", "server.js"]
where is the source file?
in the nextjs folder?
Avatar
Philippine CrocodileOP
Source files are mounted and then copied to /app/
and nextjs code in nextjs folder inside app
but that copy COPY ../nextjs ./ was supposed to move it to the app dir
Avatar
Ray
could you run ls on the container
Avatar
Philippine CrocodileOP
I am navigating the container using docker desktop and can see the file structure plainly
when it built previously
What I did to check the paths was comment out the copies and went looking int he folders, the code is absolute there but the path in the copy doesnt seem to work
that path is relative from the folder the docker-compose command was called in, is it not
Avatar
Ray
find the standalone folder after build
Avatar
Philippine CrocodileOP
I have it
1 sec ill snap a pic
Avatar
Ray
and copy the static folder to standalone/.next/static
Avatar
Philippine CrocodileOP
Okay, so standalone is being output in /app/.next/standalone, and I can see /app/.next/static
Avatar
Ray
then this should do it
Avatar
Philippine CrocodileOP
you're telling me to move static from /app/.next/static/ to /app/.next/standalone/.next/static.
Avatar
Ray
yes
then node /app/.next/standalone/server.js
ENV HOSTNAME "0.0.0.0"
remeber to set this env
Avatar
Philippine CrocodileOP
Mhm it really hates the copy commands, can't find the folder /app/.next/standalone despite the fact it's right there
I call docker-compose from inside the base project folder, referencing a docker-compose and dockerfile in a .docker subfolder
Avatar
Ray
oh well, since you are building on the same container, just test with npm run build && npm run start
remove the output: standalone
let clarify it does work first
Avatar
Philippine CrocodileOP
That means the cmd line changes again
Avatar
Ray
just comment it out first
Avatar
Philippine CrocodileOP
You might be on to something.

2024-01-18 12:20:40 traefik  | time="2024-01-18T17:20:40Z" level=error msg="service \"website\" error: unable to find the IP address for the container \"/website\": the server is ignored" providerName=docker container=website-docker-ef04432a0bc441c2b5a744aae2d82872076bc4148aecd2f67883fea9b293e39c
Avatar
Ray
how do you access it? ip or domain?
Avatar
Philippine CrocodileOP
Like in the 
      - "traefik.http.routers.website.rule=Host(`localhost`)"
or you mean web browser?
Avatar
Ray
yes
Avatar
Philippine CrocodileOP
😭 confusing me here
When I try to build and run the containers locally now I see the website container infinitely restarting, while traefik throws this error
container for website is called website, traefik is traefik
when I want to test in web browser i've been checking localhost and traefik.localhost
could this be an issue with traefik.yml?
Avatar
Ray
try add networks to website and traefik
networks:
      - docker_services
Avatar
Philippine CrocodileOP
I had this in docker-compose.yml at the bottom

networks:
  docker_services:
    external: true


and I just added the networks label to both apps, will build and check.
I get an error
Error response from daemon: network docker_services not found
Avatar
Ray
ok try this and remove the networks we just add
networks:
  docker_services:
    external: true
    name: traefik-net

services:
  traefik:
    commands:
      ...
     - "--providers.docker.network=traefik-net"
Avatar
Philippine CrocodileOP
only on the traefik service and not the website service (I dont have any command section in the website section)
Avatar
Ray
yes
only traefik
Avatar
Philippine CrocodileOP
still restarts infinitely
same error message
Avatar
Ray
Error response from daemon: network docker_services not found
this error?
Avatar
Philippine CrocodileOP
2024-01-18 12:35:49 traefik  | time="2024-01-18T17:35:49Z" level=error msg="service \"website\" error: unable to find the IP address for the container \"/website\": the server is ignored" providerName=docker container=website-docker-7ee27285d2d2b5eeaf5c991839c391347d250fef095257ce95880bb9a29c01d8


Which is weird because its not traefik that's crashing
no
"/website":
could that be because im fucking on windows and not on linux testing, while I'm deploying to a linux box for prod?
Avatar
Ray
dont think so
Avatar
Philippine CrocodileOP
I see the backslashes and windows/unix nightmares come back to haunt me
docker ps shows:

CONTAINER ID   IMAGE                          COMMAND                  CREATED         STATUS                          PORTS                                                              NAMES
7ee27285d2d2   site-website:latest   "docker-entrypoint.s…"   2 minutes ago   Restarting (0) 42 seconds ago                                                                      website
c2e3f2786a5d   traefik:v2.5                   "/entrypoint.sh --ap…"   2 minutes ago   Up 2 minutes                    0.0.0.0:80->80/tcp, 0.0.0.0:443->443/tcp, 0.0.0.0:8080->8080/tcp   traefik
Avatar
Ray
add this networks section to website
networks:
   - traefik-net
Avatar
Philippine CrocodileOP
service "website" refers to undefined network traefik-net: invalid compose project
networks:
  docker_services:
    external: true
    name: traefik-net
at the bottom of the file still
Avatar
Ray
networks
  - docker_services

this not work?
on website
Avatar
Philippine CrocodileOP
    networks:
      - traefik-net
throws the error website refers to undefined network
Avatar
Ray
how about this?
networks
  - docker_services
Avatar
Philippine CrocodileOP
yes that worked, and it then lets me know

Error response from daemon: network traefik-net not found probably because we set name down at the bottom?
Error response from daemon: network docker_services not found
Avatar
Ray
hmm
well let me try
Avatar
Philippine CrocodileOP
running in circles here, hamster wheel getting tired lol
Avatar
Philippine CrocodileOP
@Ray networks available per docker network ls:

NETWORK ID     NAME             DRIVER    SCOPE
8aead7e9049f   bridge           bridge    local
fd87b9bacd25   docker_default   bridge    local
fd2e89139f1c   host             host      local
5871f92d3bed   none             null      local
Avatar
Ray
oh
create you run docker network create traefik-net
Avatar
Philippine CrocodileOP
I know I can do that, but shouldn't that get created by the yaml file or dockerfile?
Avatar
Ray
it should but look like it didn't create it for you?
Avatar
Philippine CrocodileOP
Yeah i don't know why. I get an invalid compose project when I do this:

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"
    networks:
      - traefik-net
    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"
      - "--providers.docker.network=traefik-net"
    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
    name: traefik-net
Avatar
Ray
change this on website
networks:
  - docker_services
Avatar
Philippine CrocodileOP
How the hell does traefik-net exist after running the command but build can't find it?
still with - "--providers.docker.network=traefik-net" in commands on traefik?
oh interesting that built
still broken tho
website infinitely restarting
[+] Running 3/3
 ✔ Network docker_default  Created                                                                                                                                                                                                                              0.0s 
 ✔ Container traefik       Started                                                                                                                                                                                                                              0.1s 
 ✔ Container website       Started
That doesn't seem right
Avatar
Ray
well I got it work without setting network stuff
version: "3.9"

services:
  website:
    build:
      context: .
      dockerfile: ./Dockerfile
    image: website:latest
    container_name: website
    ports:
      - 3000:3000 # Expose the port your Next.js app is running on
    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"
      # - "--providers.docker.network=docker_services"
    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
    # name: traefik-net
Avatar
Philippine CrocodileOP
Interesting
Avatar
Ray
what is your traefik.yml
i dont have it yet
Avatar
Philippine CrocodileOP
api:
  insecure: true
  dashboard: true

entryPoints:
  web:
    address: ":80"

providers:
  docker:
    exposedByDefault: false

certificatesResolvers:
  myresolver:  # Use a unique name for your resolver
    acme:
      email: email@email.com  # replace with your email address
      storage: acme.json
      tlsChallenge: true  # Enable TLS challenge
      httpChallenge:
        entryPoint: web
Avatar
Ray
also a typo here exposedbydefault
Avatar
Philippine CrocodileOP
I noticed that typo recently too thanks
When I comment # - /var/run/docker.sock:/var/run/docker.sock in volumes on traefik it causes builds but website repeatedly crashes with a new error
needs that line
2024-01-18 13:10:31 traefik  | time="2024-01-18T18:10:31Z" level=error msg="field not found, node: file" providerName=docker container=website-docker-09429ba2c53eaf8e8000b58be62b3d9aaa02b4edb63dc848776f682da8da5d8d
Avatar
Ray
yeah I need that line too
I have this error too
 time="2024-01-18T18:07:43Z" level=error msg="field not found, node: file" container=website-traefik-e5326ef9cb933ae0d1a50001ac7ef38d73e6f15b46e6f3d86392a9181db137c0 providerName=docker
but the site is up
Avatar
Philippine CrocodileOP
I dont get the site at localhost
404 no style at all
Avatar
Ray
I get this
Image
the css downloaded but not applied
Avatar
Philippine CrocodileOP
in your container is website continually restarting?
Mine is.
And I cant see any logs from it, only logs from traefik
2024-01-18 13:14:59 traefik  | time="2024-01-18T18:14:59Z" level=error msg="field not found, node: file" providerName=docker container=website-docker-54da96e4ef0c619bfc55e8f7092c7efc4247e5055be879ebbaf9334ca29ec7c8
Avatar
Ray
no its up
Avatar
Philippine CrocodileOP
show me your traefik dashboard
Avatar
Ray
Image
Avatar
Philippine CrocodileOP
because mine doesnt show the route properly at all
Avatar
Ray
the mount cause error
Image
Avatar
Philippine CrocodileOP
CONTAINER ID   IMAGE            COMMAND                  CREATED         STATUS                          PORTS                                                              NAMES
54da96e4ef0c   website:latest   "docker-entrypoint.s…"   4 minutes ago   Restarting (0) 14 seconds ago                                                                      website
94b9f25beb71   traefik:v2.5     "/entrypoint.sh --ap…"   4 minutes ago   Up 4 minutes                    0.0.0.0:80->80/tcp, 0.0.0.0:443->443/tcp, 0.0.0.0:8080->8080/tcp   traefik
Avatar
Ray
docker logs 54
Avatar
Philippine CrocodileOP
blank
Avatar
Ray
what is the dockerfile?
Avatar
Philippine CrocodileOP
FROM node:18-alpine

WORKDIR /app

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

#COPY /app/.next/standalone ./
#COPY /app/.next/static ./.next/static
EXPOSE 3000
ENV HOSTNAME "0.0.0.0"
# Use "node .next/standalone/server.js" instead of "npm run start"
#CMD ["node", ".next/standalone/server.js"]


I havent started the nodejs server
Avatar
Ray
FROM node:20-alpine

WORKDIR /app

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

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

ENV hostname "0.0.0.0"

# Use "node .next/standalone/server.js" instead of "npm run start"
CMD ["npm", "start"]
Avatar
Philippine CrocodileOP
mhm
Avatar
Ray
lol
Avatar
Philippine CrocodileOP
Okay at least the server is up
next start

â–² Next.js 14.0.4
- Local: http://localhost:3000

✓ Ready in 436ms
when i log the server
when I go to either url
I got 404 not found
>.>
localhost throws unstylized 404, localhost:3000 has style
I dont see any http route representing website on the traefik http listings
Avatar
Philippine CrocodileOP
Yeah @Ray this sucks, my app works perfectly fine without docker, works perfectly fine without traefik, but combining them all seems to break it. I am getting a stylized 404 page which seems to be provided by the nextjs app running on server, but it cant map to my service website.

My files exist in the system, we're not even mounting a volume anymore so that doesn't seem to matter. We're not even building this in production with standalone and nothing shows.

I think I'm just going to abandon docker and traefik and just serve my app with nginx like a pleb because this fucking blows and it's getting me angry. 3 days of no progress due to docker and traefik.
Image
Avatar
Ray
version: "3.9"

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

    labels:
      - "traefik.enable=true"
      - "traefik.docker.network=docker_services"
      - "traefik.http.routers.your_router.entrypoints=web"
      - "traefik.http.routers.your_router.rule=Host(`localhost`)"
      - "traefik.http.services.your_router.loadbalancer.server.port=3000" # I'm setting up the reverse proxy to target 3000 as we defined in the Dockerfile.
      - "traefik.port=80"
    depends_on:
      - traefik

  traefik:
    container_name: traefik
    image: traefik:v2.5
    command:
      - "--api.insecure=true"
      - "--providers.docker=true"
      - "--providers.docker.exposedbydefault=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"
      # - "--providers.docker.network=docker_services"
    ports:
      - "80:80"
      - "443:443"
      - "8080:8080" # Traefik dashboard
    volumes:
      #   - "./letsencrypt:/letsencrypt"
      - /var/run/docker.sock:/var/run/docker.sock
      - ./traefik/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
this config work on port 80 and 3000
with styles
Avatar
Philippine CrocodileOP
My issue is where is your dockerfile and docker-compose.yml file in your project structure?
Avatar
Ray
or remove basePath and assetPrefix here
Image
Avatar
Philippine CrocodileOP
is traefik your nodejs app?
Avatar
Ray
no just the volumne mapping
Image
Avatar
Philippine CrocodileOP
is my structure, with nextjs as the app source code and .docker where my dockerfile and docker-compose.yml are
Image
so i use ../ in context and ./.docker/Dockerfile for the dockerfile reference
could that break things?
Avatar
Ray
no it should be fine
Avatar
Philippine CrocodileOP
Yeah I'm starting to think it's folder structure. You have everything in base project directory and my nextjs config stuff is in my nextjs folder
oh weird I got an interesting error building using your version of the docker-compose:

2024-01-18 13:49:54 traefik | 2024/01/18 18:49:54 command traefik error: read /etc/traefik/traefik.yml: is a directory
in the volumes section: - ./traefik/traefik/traefik.yml:/etc/traefik/traefik.yml
Avatar
Ray
yeah I had error before, so I move it into a folder
Image
Avatar
Philippine CrocodileOP
I've got that in my local directory
teah
Weird it's creating directories instead of files for me
Avatar
Ray
try docker-compose up --build
it was creating directory for me too lol
Avatar
Philippine CrocodileOP
i use docker-compose up -f .docker/docker-compose.yml up -d --build
I got it to build and run but still 404 page not found
Avatar
Ray
on port 80?
Avatar
Philippine CrocodileOP
localhost renders fancy 404 page
localhost:3000 shows same thing
localhost:8080 brings up traefik dashboard
Avatar
Ray
ok docker ps
need to see how the folder structure look like inside the container
Avatar
Philippine CrocodileOP
I know it's building /app/.next/.... that's where all the content is generated during build
Avatar
Ray
docker exec -it id ls
just run ls inside
Avatar
Philippine CrocodileOP
README.md app email next-env.d.ts node_modules package.json public src tsconfig.json
actions context entrypoint.sh next.config.js package-lock.json postcss.config.js renew_cert.sh tailwind.config.ts
thats inside website
Avatar
Ray
look good
what is the 404 page?
is it the next one?
Avatar
Philippine CrocodileOP
yeah next 404
Image
thats in my traefik routers
shouldn't your_router@docker be website or something?
your_router was your named version of my website, shouldnt matter I guess
Avatar
Ray
ok I create a page and try to navigate it and got 404
lol
only load the index
Avatar
Philippine CrocodileOP
so that means we need to do what
Avatar
Ray
well not sure, haven't used taefik for a while
I gotta go, I will test it later and let you know
Avatar
Philippine CrocodileOP
Thanks for your time @Ray !
Avatar
Philippine CrocodileOP
Still struggling to get a working site to run, I had it routing the service before properly but it couldn't find the files and still 404ed but at least I saw requests in chrome, now I get no requests to missing files and instead just page not found.
Avatar
Philippine CrocodileOP
GET http://localhost:3000/_next/static/Vvrq9pMd-ckDIs-A8gwI6/_ssgManifest.js net::ERR_ABORTED 404 (Not Found)

How do I specifically get traefik to serve the next resources it needs to connect to my internal app? This seems to be related to the standalone output issue where the route pointing to my website isn't actually able to access the resources it's looking for
Avatar
Philippine CrocodileOP
I think it has something to do with basePath and assetPrefix, if my nextjs project is in a nested folder shouldn't it need to have middleware to remove the prefix? I ended up making a little more progress but it's failing to grab a bunch of stuff apparently.

localhost/:1 
        
        
       GET http://localhost/ 404 (Not Found)
16:38:07.184 localhost/:1 
        
        
       GET http://localhost/.next/_next/static/chunks/webpack-0d652fb1256ad864.js net::ERR_ABORTED 404 (Not Found)
16:38:07.184 localhost/:1 
        
        
       GET http://localhost/.next/_next/static/chunks/framework-8883d1e9be70c3da.js net::ERR_ABORTED 404 (Not Found)
16:38:07.200 localhost/:1 
        
        
       GET http://localhost/.next/_next/static/chunks/pages/_error-e87e5963ec1b8011.js net::ERR_ABORTED 404 (Not Found)
16:38:07.200 localhost/:1 
        
        
       GET http://localhost/.next/_next/static/chunks/pages/_app-98cb51ec6f9f135f.js net::ERR_ABORTED 404 (Not Found)
16:38:07.203 localhost/:1 
        
        
       GET http://localhost/.next/_next/static/chunks/main-13d2c739ce81c512.js net::ERR_ABORTED 404 (Not Found)
16:38:07.204 localhost/:1 
        
        
       GET http://localhost/.next/_next/static/9NHy7arHbrHG0uOULGVIO/_buildManifest.js net::ERR_ABORTED 404 (Not Found)
16:38:07.205 localhost/:1 
        
        
       GET http://localhost/.next/_next/static/9NHy7arHbrHG0uOULGVIO/_ssgManifest.js net::ERR_ABORTED 404 (Not Found)
it also doesnt strip the .next path from the url for assets?
Avatar
Philippine CrocodileOP
@Ray i kept fiddling and got html with no css just like you did earlier
Avatar
Philippine CrocodileOP
I got it to render at localhost:3000 with some features but not all?!
it looks like this, still missing files apparently according to console.

This is with:
const nextConfig = {
    output: "standalone",
    basePath: "/.next/standalone",
    assetPrefix: '/',
}
Image
Avatar
Philippine CrocodileOP
@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!
Answer