Css not working for Dockerized VueJs Project

Question

I've created a VueJs project and deployed it to AWS. I've dockerized the project according to the document (Real-World Example section). I've just added a line for copying my nginx conf file, like this:

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY confs/nginx/nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Then I've realized that my css does not working when I've checked the page url. I also have a conf file like this:

events {
  worker_connections  4096;  ## Default: 1024
}

http {

  server {

    listen 80;

    location / {
      root   /usr/share/nginx/html;
      index  index.html index.htm;
      include /etc/nginx/mime.types;
      try_files $uri $uri/ /index.html;
    }

    error_page   500 502 503 504  /50x.html;

    location = /50x.html {
      root   /usr/share/nginx/html;
    }

  }
}

I know that there is numerous answers for nginx css problems and I've tried a bunch of those, still could not get any solutions.

These are a couple of solutions that I've tried already.

Nginx fails to load css files

Nginx failing to load CSS and JS files (MIME type error)?

Firebase "Resource interpreted as Stylesheet but transferred with MIME type text/html"

Answer 1

you must set "include /etc/nginx/mime.types" in the http section

http {
  include /etc/nginx/mime.types;
  server {
    ...
  }
}

Answer 2

your Nginx is configured to serve files from

/usr/share/nginx/html;

it must also serve your css files

add these lines

location /css/ {
   alias /usr/share/nginx/html/css/;
}

assume that your css files are located in the folder called css inside the folder/usr/share/nginx/html