Vue (NPM) NGINX in a single docker-CodePudding

Quite recently I have found many websites proposing solution to encapsulate a NPM and NGINX into a single dockerfile using so-called: "multi-stages" docker.


# first stage builds vue 
FROM mhart/alpine-node:12 as build-stage
WORKDIR /app
COPY . .
RUN npm ci 
RUN npm run build 

# second stage copies only the static dist files to nginx html dir
FROM nginx:stable-alpine as production-stage
VOLUME /var/log/nginx
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]

But it's not clear to me. After all, docker should host only one process, while in the examples in question it runs the NPM server and separately NGINX - am I reading these instructions in the Dockerfile correctly?

Isn't it more reasonable to take a "side-car" approach when hosting this on a service like Kubernetes or AWS ECS?

CodePudding user response：

When the below line of code runs

COPY --from=build-stage /app/dist /usr/share/nginx/html

You are just copying the compiled JS/HTML and then hosting it via nginx. So there is are no trwo processes here. When you run npm start it run a dev server normally, which you don't need to run for production builds.