'Docker Container not loading static files from Django-React Project

I've been trying to get my main.js file and css static files to load in my container and on google cloud for the past 4 days.

Here is my file tree:

main/
  - frontend/
    - node_modules/
    - src/
      -components/
      - index.js
    - static/
      - frontend/
        - css/
        - main.js
    - templates/
      - frontend/
        - index.html
    - package.json
    - pack-lock.json
  - nginx/
  - main_project/
  - Dockerfile
  - docker-compose.yml
  - requirements.txt

My docker file has the following:

FROM python:3.9-alpine
ENV PYTHONUNBUFFERED 1

WORKDIR /pathfinder
COPY requirements.txt .
RUN pip install -r requirements.txt
COPY . .
COPY ./entrypoint.sh /
ENTRYPOINT ["sh", "entrypoint.sh"]

RUN apk update
RUN apk add
RUN apk add npm
COPY ./frontend/package.json /frontend/package.json
COPY ./frontend/package-lock.json  /frontend/package-lock.json
RUN cd frontend/ && npm install

my docker-compose.yml folder looks like the following:

version: "3.8"
services:
  pathfinder_gunicorn:
    build:
      context: .
    volumes:
      - static:/static
      - ./frontend/static/:/pathfinder/frontend/static/
    ports:
      - "8080:8080"
    image: pathfinder_gunicorn:v1
    container_name: pathfinder_gunicorn
  
  nginx:
    build: ./nginx
    volumes:
      - static:/static
    ports:
      - "80:80"
    depends_on:
      - pathfinder_gunicorn

volumes:
  static:

Can someone please tell me what is going on and why can't I load my js and css files onto my index.html page?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source