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

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

NextJS container without nginx reverse proxy worked as expected.

Even more, I can log in to the nginx container with docker exec -it nginx sh and with curl read whose static files on Next.JS container. I also see static files in the folder from a 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 builder
# 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 ./ ./

RUN yarn install --frozen-lockfile
RUN yarn build

ENV NODE_ENV production
CMD chown -R node:node /app/.next

EXPOSE 3000

USER node

CMD [ "yarn", "start" ]

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

CodePudding user response：

So, the problem was in a wrong path for mime.types file in nginx.conf and default location paths in includes/general.conf file. After I changed it from: mime.types to /etc/nginx/mime.types it start working again.