Nextjs, Traefik and Docker
Answered
Philippine Crocodile posted this in #help-forum
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...
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:
I don't use any prefix middleware, nothing. Just set blank base path.
My Dockerfile has one change:
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!
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!
209 Replies
Toyger
what logs of traefik and nextjs show?
does it work in local dev environment?
does it work in local dev environment?
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.
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.
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
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
right now main problem that it not even run at localhost:3000 but it should without any problems
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.
look like you didn't copy the static file?
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?
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
Philippine CrocodileOP
Mmh
COPY /.next/static ./.next/static
throws an error /next/static not foundbecause its workdir app
just saw you have WORKDIR /app there
I changed the path, please try again
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.
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?
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 dircould you run ls on the container
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
find the standalone folder after build
Philippine CrocodileOP
I have it
1 sec ill snap a pic
and copy the static folder to
standalone/.next/static
Philippine CrocodileOP
Okay, so standalone is being output in /app/.next/standalone, and I can see /app/.next/static
then this should do it
Philippine CrocodileOP
you're telling me to move static from /app/.next/static/ to /app/.next/standalone/.next/static.
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
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
Philippine CrocodileOP
That means the cmd line changes again
just comment it out first
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
how do you access it? ip or domain?
Philippine CrocodileOP
Like in the
- "traefik.http.routers.website.rule=Host(`localhost`)"
or you mean web browser?
yes
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?
try add
networks
to website
and traefik
networks:
- docker_services
Philippine CrocodileOP
I had this in docker-compose.yml at the bottom
and I just added the networks label to both apps, will build and check.
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
ok try this and remove the
networks
we just addnetworks:
docker_services:
external: true
name: traefik-net
services:
traefik:
commands:
...
- "--providers.docker.network=traefik-net"
Philippine CrocodileOP
only on the traefik service and not the website service (I dont have any command section in the website section)
yes
only traefik
Philippine CrocodileOP
still restarts infinitely
same error message
Error response from daemon: network docker_services not found
this error?
this error?
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?
dont think so
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
add this networks section to
website
networks:
- traefik-net
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 stillnetworks
- docker_services
this not work?
on
website
Philippine CrocodileOP
networks:
- traefik-net
throws the error website refers to undefined networkhow about this?
networks
- docker_services
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
hmm
well let me try
Philippine CrocodileOP
running in circles here, hamster wheel getting tired lol
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
oh
create you run
docker network create traefik-net
Philippine CrocodileOP
I know I can do that, but shouldn't that get created by the yaml file or dockerfile?
it should but look like it didn't create it for you?
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
change this on website
networks:
- docker_services
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
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
Philippine CrocodileOP
Interesting
what is your
traefik.yml
i dont have it yet
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
also a typo here
exposedbydefault
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 errorneeds 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
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
Philippine CrocodileOP
I dont get the site at localhost
404 no style at all
the css downloaded but not applied
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
no its up
Philippine CrocodileOP
show me your traefik dashboard
Philippine CrocodileOP
because mine doesnt show the route properly at all
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
docker logs 54
Philippine CrocodileOP
blank
what is the dockerfile?
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
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"]
Philippine CrocodileOP
mhm
lol
Philippine CrocodileOP
Okay at least the server is up
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
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.
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.
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
Philippine CrocodileOP
My issue is where is your dockerfile and docker-compose.yml file in your project structure?
or remove
basePath
and assetPrefix
herePhilippine CrocodileOP
is traefik your nodejs app?
no just the volumne mapping
Philippine CrocodileOP
is my structure, with nextjs as the app source code and .docker where my dockerfile and docker-compose.yml are
so i use ../ in context and ./.docker/Dockerfile for the dockerfile reference
could that break things?
no it should be fine
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
Philippine CrocodileOP
I've got that in my local directory
teah
Weird it's creating directories instead of files for me
try
docker-compose up --build
it was creating directory for me too lol
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
on port 80?
Philippine CrocodileOP
localhost renders fancy 404 page
localhost:3000 shows same thing
localhost:8080 brings up traefik dashboard
ok docker ps
need to see how the folder structure look like inside the container
Philippine CrocodileOP
I know it's building /app/.next/.... that's where all the content is generated during build
docker exec -it id ls
just run ls inside
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
actions context entrypoint.sh next.config.js package-lock.json postcss.config.js renew_cert.sh tailwind.config.ts
thats inside website
Philippine CrocodileOP
yeah next 404
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
Philippine CrocodileOP
so that means we need to do what
well not sure, haven't used taefik for a while
I gotta go, I will test it later and let you know
Philippine CrocodileOP
Thanks for your time @Ray !
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.
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
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?
Philippine CrocodileOP
@Ray i kept fiddling and got html with no css just like you did earlier
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:
This is with:
const nextConfig = {
output: "standalone",
basePath: "/.next/standalone",
assetPrefix: '/',
}
Philippine CrocodileOP
@Ray I finally got it, going to post this last message as an answer.
I set my next.config.json values to:
I don't use any prefix middleware, nothing. Just set blank base path.
My Dockerfile has one change:
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!
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