docker nginx does't serve static files through upstream Next.JS

Question

I couldn't find an answer to my question from other similar questions.

So, I have two docker containers:

Next.JS web-app
nginx reverse proxy

If I'll connect to nginx container via docker exec -it... I can see my static files bound from the shared volume.

I run them with docker-compose:

volumes:
  nextjs-build:

version: '3.9'

services:
  nginx:
    image: arm64v8/nginx:alpine
    container_name: nginx
    ports:
      - "80:80"
      - "443:443"
    networks:
      - blog
    restart: unless-stopped
    depends_on:
      - website-front
    volumes:
      - type: volume
        source: nextjs-build
        target: /nextjs
        read_only: true
      - type: bind
        source: /etc/ssl/private/blog-ssl
        target: /etc/ssl/private/
        read_only: true
      - type: bind
        source: ./nginx/includes
        target: /etc/nginx/includes
        read_only: true
      - type: bind
        source: ./nginx/conf.d
        target: /etc/nginx/conf.d
        read_only: true
      - type: bind
        source: ./nginx/dhparam.pem
        target: /etc/nginx/dhparam.pem
        read_only: true
      - type: bind
        source: ./nginx/nginx.conf
        target: /etc/nginx/nginx.conf
        read_only: true

  website-front:
    build: ./website
    container_name: website-front
    ports:
      - "3000"
    networks:
      - blog
    restart: unless-stopped
    volumes:
      - nextjs-build:/app/.next

networks:
  blog:
    external:
      name: nat

my nginx configs:

upstream nextjs_upstream {
  server website-front:3000;
}

server {
    listen       443 http2 ssl;
    listen       [::]:443 http2 ssl;


    server_name  website_url;

    ssl_certificate         /etc/ssl/private/chain.crt;
    ssl_certificate_key     /etc/ssl/private/server.key;
    ssl_trusted_certificate /etc/ssl/private/ca.ca-bundle;

    # access_log  /var/log/nginx/host.access.log  main;

    # security
    include     includes/security.conf;
    include     includes/general.conf;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;

    location /_next {
        proxy_pass http://nextjs_upstream/.next;
    }

    location / {
        proxy_pass http://nextjs_upstream;
    }

}

Tried multiple nginx configurations for static route:

localhost /_next {
   root /nextjs;
}

NextJS dockerfile:

FROM node:alpine AS deps
# this ensures we fix simlinks for npx, Yarn, and PnPm
RUN apk add --no-cache libc6-compat
RUN corepack disable && corepack enable
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

# builder
FROM node:alpine AS builder
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN yarn build

# runner
FROM node:alpine AS runner
WORKDIR /app

ENV NODE_ENV production

COPY --from=builder /app/public ./public
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/yarn.lock ./yarn.lock

RUN chown -R node:node /app/.next

USER node

EXPOSE 3000

CMD [ "yarn", "start" ]

With that config I can see my website, but for static files I got 404 through upstream.

docker nginx does't serve static files through upstream Next.JS

0 Answers0