VueJS project not updating when creating new Docker Image

Question

What is it about:

I currently need to learn how Docker works and therefore I started working on a small project. I have a VueJs Frontend (something pretty basic) and a python API (pretty Basic as well). I managed to create a Docker Volume with 2 containers (1 for the vuejs, 1 for the py API).

The problem:

After making the docker containers (both worked) I started working on the VueJs project and nearly finished it now. The problem is, when I try to create a new Image (with that updated vuejs project), and create a new container with that new Image, I always get the default VueJs page when opening the project. It then looks like nothing updated on the vuejs project but it acutally did.

VueJs: Dockerfile

FROM node:lts-alpine as build-stage

WORKDIR /app
COPY package*.json ./
COPY package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

#After npm run build successful, publish to nginx:
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

docker-compose.yml

version: "3.9"

volumes:
  M210-Project-Youtas-v0.2:

services:
  vue-nginx:
    image: vuejs/youtas-v0.2
    volumes: 
      - M210-Project-Youtas-v0.2:/etc/nginx/templates
    ports: 
      - "8080:80"
    environment: 
      - NGINX_PORT=80

  pythonflask-api:
    image: pythonflaskapi/youtas-v0.2
    volumes:
      - M210-Project-Youtas-v0.2:/etc/flask/templates
    ports: 
      - "5000:5000"
    environment:
      - DEBUG=1

What I tried

I ran this command to make sure vue builds the latest changes to production version:

npm run build
I tried deleting the old containers,images and volumes.
I tired to change the volume name

UPDATE

I restarted my computer and now I can see the changes I've made to the vuejs project when connecting to the docker container. But that can not be the only way of doing this.

Have you updated the vue-nginx: image: vuejs/youtas-v0.2 according to the NEW image you have created? — Max
– Max, Commented Sep 2, 2021 at 10:55
Yes I always updated the 'image' property in the docker-compose.yml when creating new images. — Eldar
– Eldar, Commented Sep 2, 2021 at 13:00

Ornstein89 · Accepted Answer · 2023-03-30 11:01:47Z

New solution

If you bild vuejs app to separate docker volume (shared with nginx):

  frontend:
    ...
    volumes:
      - vue_dist:/frontend/dist
  nginx:
    ...
    volumes:
      - vue_dist:/dist
      ...

and when rebuild is needed you could run

sudo docker volume ls
# find <actual_volume_name> of vue_dist
sudo docker volume rm <actual_volume_name>
sudo docker compose up --build

Old solution

When I had the same problem (static vue files of npm run build were not updated on containers restart and on image rebuild), the remove of docker volume helped:

Stop docker containers (with sudo docker compose down or sudo docker stop CONTAINER_ID).
Remove thir images with sudo docker rmi IMAGE_ID (sudo docker images to show IDs first).
Show your volumes with sudo docker volume ls and remove volume which contain vue built files with sudo docker volume rm VOLUME_ID (and other volumes which contain not valuable files).

You also can use sudo docker system prune -a --volumes to remove all volumes (if you don't know where vue build files are).

Tested on Ubuntu 22.

!!! BE CAREFUL, don't occasionally delete volumes with valuable data, SSL certificates etc.

Collectives™ on Stack Overflow

VueJS project not updating when creating new Docker Image

1 Answer 1

New solution

Old solution

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

New solution

Old solution

Comments

Your Answer

Sign up or log in

Post as a guest

Related