While running my docker image and routing the requests through nginx, I encounter issues with the styling.
Although I can see all the html-tags and locate the css and js files in the network tab of the browser, the styling is not being applied. Even though the css appears correct to me, there seems to be no styling visible. Essentially, all html-tags appear generic and bland.
During development, I do not face any problems with the styling and I can view the styling when simply executing npm run build.
The project has been developed using vue/cli, but I have tried other templates with earlier webpack versions which resulted in the same issue.
In .vue files, I utilize the single-file-component structure and specify lang="scss".
Here is a snippet from my nginx.conf:
load_module /usr/lib/nginx/modules/ngx_stream_module.so;
stream...
http {
server {
listen 80;
charset utf-8;
server_name vue-node;
gzip on;
gzip_proxied any;
gzip_http_version 1.1;
gzip_comp_level 5;
gzip_min_length 256;
gzip_vary on;
gzip_types text/css text/javascript text/xml text/plain application/javascript application/x-javascript application/json;
root /opt/vue-node/dist;
index index.html;
location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
access_log off;
expires max;
add_header Cache-Control "public, must-revalidate, proxy-revalidate";
}
location /api {
proxy_pass http://vuenode:8000;
}
location / {
try_files $uri $uri/ @rewrites;
}
location @rewrites {
rewrite ^(.+)$ /index.html last;
}
}
}
This is how my Dockerfile looks:
FROM node:9-stretch
RUN apt-get update -y && apt-get install -y --no-install-recommends \
vim \
nginx
COPY . /opt/vue-node/
WORKDIR /opt/vue-node/
RUN rm -v /etc/nginx/nginx.conf
ADD packaging/nginx.conf /etc/nginx/
RUN echo "daemon off;" >> /etc/nginx/nginx.conf
RUN npm install -g npm \
&& npm install -g @vue/cli \
&& npm install \
&& npm run build
CMD [ "node", "server.js" ]
EXPOSE 80
I have set NODE_ENV=production in my docker-compose.yml file.
Most everything else remains unchanged from what was initially configured by vue/cli.
If you require additional information, please do not hesitate to ask. Any assistance provided would be greatly appreciated!