7

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"

2 Answers 2

0

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

http {
  include /etc/nginx/mime.types;
  server {
    ...
  }
}
Sign up to request clarification or add additional context in comments.

Comments

0

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.