Document how to dockerize a Vue app

Description

It would be nice to add a small section (maybe in the Production Deployment page) which shows how to create a production-like docker image of a Vue app built out of an official template (e.g. webpack).

This comes out of my question in the #need-help channel:

I’m trying to create a production-like docker image capable of serving my Vue.js app (built starting from the official Vue.js webpack template).

I came up with something like this:

FROM node:9.3.0-alpine

# install static server
RUN npm install -g serve

# create a 'tmp' folder for the build and make it the current working directory
WORKDIR /app/tmp

# copy only the package.json to take advantage of cached Docker layers
COPY package.json .

# install project dependencies
RUN npm install

# copy project files and folders to the working directory
COPY . .

# build for production with minification
RUN npm run build

# make the 'app' folder the current working directory
WORKDIR /app

# clean up (i.e. extract 'dist' folder and remove everything else)
RUN mv tmp/dist dist && rm -fr tmp

EXPOSE 5000
CMD [ "serve", "--single", "--port", "5000", "dist" ]

Considering I’m a Vue.js newbie:

1. is this the best approach (or even a correct one)?
2. all examples I’ve found googling around just copy the whole project folder inside the docker container and use the npm run dev command to serve the app with webpack. Is this a preferable approach? (although I guess in this case the non-minified app will be served)
3. is there an official documentation that clearly describe the best way to dockerize a Vue.js app? (apologies if there is and I missed it)

[fredderf204]

@williamhallatt @sdras disregard to above solution… as there is a much better way. Docker mulit-stage builds. Please see new Dockerfile below;

FROM node:8.9-alpine as builder
WORKDIR /app
COPY package.json .
RUN yarn install
COPY . .
RUN npm run build

FROM nginx
COPY --from=builder /app/dist /usr/share/nginx/html

No need for custom nginx conf files and reduces my Docker image from 276MB to 110MB 😃

[sdras]

I think this a great idea. I have a dockerfile that I’ve been using for Vue applications as well, I could see it in the cookbook and linked to from deployment, as Dockerfiles can be set up many ways, and there is not one true way. Here is my nginx version:

FROM node:alpine

EXPOSE 80

RUN apk add --no-cache nginx

WORKDIR /app

COPY package.json .
RUN yarn install

COPY misc/nginx.conf /etc/nginx/nginx.conf

COPY . .

RUN yarn run generate

CMD ["nginx"]

The only thing I’d say is that the cleanup step adds an unnecessary layer to the image, but that might be something worth documenting and talking through in the cookbook example.

Unless you are interested in writing it, I can make the cookbook example.