Reputation: 504
I'm trying to deploy my next 13 app. I don't see any errors while building. When I try to load the app, only HTML shows up, and it shows 404 error for Js, Css and images(as seen in the network tab).
Its trying to load from _next folder by default (and this path does not exist)
Eg: http://localhost:3000/_next/static/chunks/522-b7eb9fb4e38abfae.js
And images directly
Eg: http://localhost:3000/assets/login.png
Unfortunately I can't post the src code.
I have tried everything. Any help is appreciated.
Folder structure
My-app
|_ public
|_ assets/
|_[all my images]
|_ nodemodules
|_ .next
|_ out
|_ src
|_ app
|_ Dockerfile
|_ next.config.js
|_ package.json
Below are the scripts using
next.config.js
module.exports = {
basePath: "",
output: "standalone",
experimental: {
appDir: true,
},
images: {
domains: [
"localhost",
"localhost:3001",
"my-exapmle-domain.com",
],
},
};
dockerfile
#Using a different image, below is just an example
FROM node:16_alpine-3.16 AS prebuild
USER root
WORKDIR /app
ARG env
ENV NODE_ENV=${env}
RUN apk add --no-cache libc6-compat
RUN apk add --update npm
COPY package.json ./
COPY package-lock.json ./
RUN npm i --legacy-peer-deps
COPY . .
RUN npm run build
#Using a different image, below is just an example
FROM node:16_alpine-3.16
USER root
WORKDIR /app
ENV NEXT_TELEMETRY_DISABLED 1
ENV UID=10101
ENV GID=10101
## create & switch to non-root user
RUN apk add shadow
RUN /usr/sbin/groupadd -g ${GID} docker
RUN /usr/sbin/useradd -s /bin/sh -g ${GID} -u ${UID} limsuinext
USER 10101
COPY --from=prebuild /app/next.config.js ./
COPY --from=prebuild /app/package.json ./package.json
COPY --from=prebuild /app/.next ./.next
COPY --from=prebuild /app/node_modules ./node_modules
COPY --from=prebuild /app/public/ ./public
COPY --from=prebuild --chown=10101 /app/.next/standalone ./
COPY --from=prebuild --chown=10101 /app/.next/static ./.next/static
COPY --from=prebuild --chown=10101 /app/.next/static ./.next/standalone/static
COPY --from=prebuild --chown=10101 /app/.next/out ./.next/standalone/out
# Fire up node server
ENV PORT 3001
EXPOSE 3001
# CMD ["node", ".next/standalone/server.js"] Old approach
CMD ["node", "server.js"]
package.json
name: "my-app",
version: "0.1.0",
private: true,
scripts: {
"dev": "PORT=3001 npx next dev",
"build": "npx next build",
"start": "PORT=3001 next start",
"lint": "next lint"
},
dependencies: {...},
devDependencies: {...}
Upvotes: 1
Views: 1473
Reputation: 504
The Fix is Manually copy the _next folder in dockerfile
For js and css COPY --from=builder --chown=10101 /app/.next ./_next
For images COPY --from=builder --chown=10101 /app/public ./public
Upvotes: 1