frontend-collective/react-sortable-tree

Unable to render SortableTree when running through a nginx reverse proxy in docker

d23845jg opened this issue · 1 comments

Screen Shot 2022-01-11 at 15 15 13

Dockerfile:
`

Build stage

FROM node:16 as build
WORKDIR /app/web
COPY package*.json /app/web
RUN npm ci --production
COPY . /app/web
RUN npm run build

Nginx web server

FROM nginx:1.21 as prod
COPY --from=build /app/web/build /usr/share/nginx/html
COPY nginx/nginx.conf /etc/nginx/nginx.conf
`

nginx.conf file:
`
events {
}

http {
server {
listen 3000;

  location /CurationTool/ {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass http://fact-curation:8081/;
    proxy_ssl_session_reuse off;
    proxy_set_header Host $http_host;
    proxy_set_header content-type "application/json";
    proxy_cache_bypass $http_upgrade;
    proxy_redirect off;
  }

  location /ExplanationTreeAPI/ {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass http://search-engine:8080/;
    proxy_ssl_session_reuse off;
    proxy_set_header Host $http_host;
    proxy_set_header content-type "application/json";
    proxy_cache_bypass $http_upgrade;
    proxy_redirect off;
  }

  location / {
    root /usr/share/nginx/html;
    try_files $uri /index.html;
  }
}

}
`

It was a problem with the mime.type file. It was treating the .css files as text/plain instead of text/css.
https://www.nginx.com/resources/wiki/start/topics/examples/full/