I have successfully set up a VueJs project on AWS using Docker. Following the guidelines in the Real-World Example section of the documentation, I created a Dockerfile with instructions to copy my nginx conf file:
# 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;"]
After deployment, I noticed that my CSS was not loading correctly. My nginx configuration file looks 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;
}
}
}
Despite trying various solutions for nginx CSS issues, I have not been able to resolve the problem.
Some of the solutions I've attempted include:
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"