Strapi admin fails to load after being served from nginx

Questions and Answers Strapi Admin
1
System Information
  • Strapi Version: 3.6.8
  • Operating System: macOS BigSur
  • Database: SQLITE
  • Node Version: 14.18.1
  • NPM Version: 8.1.0
  • Yarn Version: 1.22.17

Hi! I am trying to locally deploy a dockerized application consisting of a React app, Strapi & Nginx.
My aim is to serve at root http://localhost:4000 front end application and at serve http://localhost:4000/dashboard Strapi Admin panel.

I can get React app served at http://localhost:4000; however, when i navigate to /dashboard admin panel does not show (only a loading indicator)

image
image2874×1348 171 KB

image
image2876×1426 249 KB

I tried using Sub-Folder split as explained in the documentation here

Dockerfile.dev for Strapi

FROM strapi/base

WORKDIR /app
COPY package.json .
COPY yarn.lock .

RUN yarn install --frozen-lockfile

COPY . .

RUN yarn build

EXPOSE 1337

CMD ["yarn", "develop"]

Server config for Strapi

module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  url: 'http://localhost:1337/api',
  admin: {
    auth: {
      secret: env('ADMIN_JWT_SECRET', 'somerandomsecret'),
    },
    url: 'http://localhost:1337/dashboard',
  },
});

default.conf for nginx

upstream frontend {
    server frontend:3000;
}

upstream strapi {
    server strapi:1337;
}

server {
    listen 80;

    location / {
        proxy_pass http://frontend;
    }

    # Strapi API
    location /api/ {
        rewrite ^/api/?(.*)$ /$1 break;
        proxy_pass http://strapi;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_pass_request_headers on;
    }

    # Strapi Dashboard
    location /dashboard {
        proxy_pass http://strapi/dashboard;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_pass_request_headers on;
    }
}

Dockerfile.dev for Nginx

FROM nginx:1.20.2-alpine

COPY ./default.conf /etc/nginx/conf.d/default.conf

Docker-compose-dev.yml

version: '3'
services:
  nginx:
    restart: always
    image: nginx:dev
    container_name: nginx-dev
    build:
      dockerfile: Dockerfile.dev
      context: ./nginx
    ports:
      - 4000:80
    depends_on:
      - strapi
      - frontend

  strapi:
    build:
      dockerfile: Dockerfile.dev
      context: ./backend
    image: strapi:dev
    container_name: strapi-dev
    volumes:
      - /app/node_modules
      - ./backend:/app
    ports:
      - 1337:1337

  frontend:
    build:
      dockerfile: Dockerfile.dev
      context: ./frontend
    image: frontend:dev
    container_name: frontend-dev
    volumes:
      - ./frontend:/app
      - /app/node_modules
    ports:
      - 3000:3000

Things I have tried:
Delete .cache, node_modules, run yarn build --clean and run the server again - same result

There are threads mentioning similar issue; however, nothing is working in this case. Any help would be greatly appreciated.