For building the Vue image, I use a multi-stage build with a build stage from a node image that builds the Vue project and then I copy the files to the production stage from an nginx image to serve the Vue project:
# build stageFROM node:9.11.1-alpine as build-stageWORKDIR /appCOPY package*.json ./RUN npm installCOPY . .RUN npm run build
# production stageFROM nginx:1.13.12-alpine as production-stageCOPY --from=build-stage /app/dist /usr/share/nginx/htmlEXPOSE 80CMD ["nginx", "-g", "daemon off;"]
Both stages are in the same dockerfile. And you end up with a single image. Here's the explanation from the official docker docs:
With multi-stage builds, you use multiple FROM statements in your Dockerfile. Each FROM instruction can use a different base, and each of them begins a new stage of the build. You can selectively copy artifacts from one stage to another, leaving behind everything you don’t want in the final image.
And for development, I don't use nginx. I just use the vue cli dev server. (npm run serve)
For building the Vue image, I use a multi-stage build with a build stage from a node image that builds the Vue project and then I copy the files to the production stage from an nginx image to serve the Vue project:
That looks quite interesting. then later only push the production-stage image to your registry, right?
For development do you use Nginx at all?
Both stages are in the same dockerfile. And you end up with a single image. Here's the explanation from the official docker docs:
And for development, I don't use nginx. I just use the vue cli dev server. (npm run serve)
When I compile, and check in the browser, I see the Nginx home page, which says that welcome to nginx, not the vue application, any idea why?