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 failing to load CSS and JS files (MIME type error)?
Firebase "Resource interpreted as Stylesheet but transferred with MIME type text/html"
2
Answers
you must set "include /etc/nginx/mime.types" in the http section
your Nginx is configured to serve files from
it must also serve your css files
add these lines
assume that your css files are located in the folder called
css
inside the folder
/usr/share/nginx/html