I cannot build vitejs + vue docker-compose

Question

I am writing here a new question, because i can't find solution of my problem. I am trying to build this for two days.

TLDR: I am building a vue project with vite. Everything is fine, when i use npm run dev Also, everything looks fine when i build docker-compose inside frontend directory. I need to place docker-compose outside of this dir, cuz i would like to create more dockers like backend, nginx, postress.

Dockerfile:

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
RUN npm install -g npm
COPY package*.json ./
RUN npm install

docker-compose.yml:

version: "3.9"
services:
  frontend:
    build:
      context: frontend/
      dockerfile: Dockerfile
    working_dir: /app
    command: ["npm", "run", "dev"]
    env_file:
      - config/env/server-developer.env
    environment:
      - CHOKIDAR_USEPOLLING=true
    volumes:
      - type: volume
        source: node_modules
        target: /app/node_modules
    ports:
      - 8080:8080

volumes:
  node_modules:

project build: this is project location

okey, so, when i use docker-compose -f docker-compose.yml up --build i got this output:

Recreating project_frontend_1 ... done
Attaching to project_frontend_1
frontend_1  | 
frontend_1  | > [email protected] dev
frontend_1  | > vite --host 0.0.0.0
frontend_1  | 
frontend_1  | sh: vite: not found
project_frontend_1 exited with code 127

If you need more information, i will add. I know that most ppl use dockers, but i can't find solution that can help me with it. Someone said that vite is not installed globaly, i can't finde npm install comand to install as dependency in package.json.

Answer 1

This is what happens:

1. docker-compose builds the image, according to the Dockerfile (omitted unrelevant parts):

WORKDIR /app
COPY package*.json ./
RUN npm install

So basically your package-files are copied into the /app directory of your docker image, and in that directory npm will install the modules. This will create a directory on the docker image at /app/node_modules/, and in there you'll also find your installation of vite.

2. docker-compose runs the image, according to the docker-compose.yaml; the relevant part is this:

    volumes:
      - type: volume
        source: node_modules
        target: /app/node_modules

What this will do is basically use the directory /app/node_modules, i.e. the directory that Docker instlaled all the dependencies into, from your docker image, and bind mount on it the content of the node_modules directory of the host system.

And that directory apparently does not have vite installed, so at image creation time it is still there, but at runtime, it is gone. An easy way to check this would be to run the docker image from docker (docker run -it -p 8000:8080 --rm <image_name>). Now to fix this, you could of course run npm install on your host machine, and then this will probably work; but that is in no way what you want; because (a) you could have then skipped the RUN npm install inside your docker image build, and (b) this would not work on any other machine as soon as you ship this.

What instead you want to do is, replace the volumes section with the things you really want to have access to in your Docker image; I am missing from the example you provided, how you'd get your code onto the docker image? That's probably what you really want to include; problem is that with Vue.js, this is actually the directory that also contains the /app/node_modules. In order not to have those overriden again, you can exclude them.

I'd expect something like this in your volumes section:

    volumes:
      - ./frontend:/app
      - exclude:/app/node_modules/

volumes:
  exclude:

This will bind mount the ./frontend directory of your host system into your docker image at runtime into the docker images /app directory, but exclude from it the node_modules directory; this will keep the content of /app/node_modules/ from the creation of the docker image and gives you the flexibility you'd want when developing on your local machine with docker and bind mounts.