'Docker Nginx with nuxt.js and hot reload setup

Problem

Currently I can only create simple Dockerfiles but I have no experience with docker-compose. I have taken over a project where a static page was built with Nuxt.js. I want to build a development environment where I can work with hot reload or just a copy which immediately transfers the change to the nginx service.

Currently, only when I building a container, the dist folder is copied into the nginx/html folder. So I can then call the page.

Question:

What can I do so that the nginx/html folder is overwritten (hot reload) when saving the Vue file?

I found an interesting approach on SO (option 4). https://stackoverflow.com/a/64010631/8466673 But I don't know how to configure a docker-compose from my one docker file.

My dockerfile

# build project
FROM node:14 AS build
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
RUN npm run build

# create nginx server
FROM nginx:1.19.0-alpine AS prod-stage
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD [ "nginx", "-g", "daemon off;" ]


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source