Unable to load Vue app's js and css files with Nginx

Question

I'm trying to deploy a Vue js app using docker-compose and Nginx. I'm pretty beginner with Nginx and after searching through StackOverflow and blogs, the website returns blank page (containing vue's index.html page, but unable to load any js or CSS file).

Here is my config:

# docker-compose.yml
version: "3.8"

services:
  web:
    build: ./web
    ports:
      - 8080:8080
    volumes:
      - ./dist:/app
    depends_on:
      - nginx

  nginx:
    build: ./nginx
    ports:
      - 80:80
    volumes:
      - ./dist:/app
    restart: always

# ./web/Dockerfile

FROM node:lts-alpine as build-stage

RUN npm install -g http-server

WORKDIR /app

COPY package*.json ./

RUN npm cache clean --force && npm install

COPY . .

RUN npm run build

EXPOSE 8080
CMD [ "http-server", "dist" ]

# ./nginx/Dockerfile

FROM nginx:1.21-alpine

RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d

upstream client {
    server web:8080;
}

server {
    listen 80;

    include /etc/nginx/mime.types;
    
    location / {
        proxy_pass http://client;
        root   /app;
        index index.html;
        try_files $uri $uri/ /index.html;
        
        include  /etc/nginx/mime.types;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }

    location ~ \.css {
        add_header  Content-Type    text/css;
    }
    location ~ \.js {
        add_header  Content-Type    application/x-javascript;
    }    
}

Brower console when I open the website:

And nginx log show the following error:

 [error] 22#22: *12 open() "/etc/nginx/html/css/app.68c1e752.css" failed (2: No such file or directory),

What should I do to fix this issue?

It's not really clear why you're using Docker Compose for this. A typical Docker deploy is detailed here ~ v2.vuejs.org/v2/cookbook/dockerize-vuejs-app.html — Phil
– Phil, Commented Mar 24, 2022 at 22:24
@Phil I have a few other services (backend, redis, database) on the docker-compose and for the sake of simplicity didn't mention them. I try to keep all the services in one place. — Saeed Esmaili
– Saeed Esmaili, Commented Mar 24, 2022 at 22:27

Phil · Accepted Answer · 2022-03-24 22:40:07Z

2

What you'd typically do is have a single, multi-stage frontend image like in the Dockerize Vue.js App Real-World Example that builds your app and copies the dist contents into NGINX's webroot. You don't need separate NGINX and http-server images because NGINX is already a server (and a much better one)

# docker-compose.yml
version: "3.8"

services:
  nginx:
    build: ./nginx
    ports:
      - 80:80
    restart: always

# ./nginx/Dockerfile

# 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 nginx.conf /etc/nginx/conf.d/default.conf

COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Your NGINX config really only needs the try_files declaration for HTML5 History Mode.

answered Mar 24, 2022 at 22:40

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Saeed Esmaili Over a year ago

I'm trying this now, and a 403 forbidden error shows up, and this is the error in the nginx log: directory index of "/etc/nginx/html/" is forbidden

Collectives™ on Stack Overflow

Unable to load Vue app's js and css files with Nginx

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related