Document how to dockerize a Vue app

[fabriziocucci]

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)

[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.

[fabriziocucci]

@sdras thanks a lot for your prompt feedback!

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.

I agree with you here, I wasn't particularly happy about that either. I guess my OCD kicked in and forced me to remove anything unnecessary. Maybe we could chain it to the RUN npm run build to avoid the unnecessary extra layer or maybe there is no point in doing any cleanup.

Also, as you said, there are probably infinite ways to write a Dockerfile for this purpose and I was actually thinking about using something a little bit more robust like nginx as a replacement for serve. Although, in the context of a cookbook, maybe that would mean spending a couple of words describing a (very simple) nginx configuration file.

Finally, unless you have something already, I'd be happy to contribute the cookbook! ❤️

[sdras]

Awesome! There's a template here that can help you get started. 🎉

[sdras]

Hey! Just a quick ping on this since it's March now, would you like me to do this recipe instead or are you still planning on putting in the PR? We're going to go to beta on the cookbook soon so I'd like to get it in before that, but I'm flexible in terms of who writes it :)

Cheers! 🍻

[fabriziocucci]

We're going to go to beta on the cookbook soon

Really glad to hear that! ❤️

Just a quick ping on this since it's March now

You are right, I've been pretty lazy on this, sorry. Let me try to give it a shot in the next couple of days and see what comes out.

[sdras]

Excellent! Thanks

[williamhallatt]

Hi @sdras, thanks for the Dockerfile example! Would you be willing to share the content of your nginx.conf here?

[fredderf204]

@williamhallatt I was able to get this working using @sdras Dockerfile example with some tweaks. Here are my nginx.conf and nginx.default files, which live the in misc folder;

misc\nginx.conf:

user nginx;
worker_processes 1;
pid /var/run/nginx.pid;
daemon off;

events {
  worker_connections 512;
  # multi_accept on;
}

http {
  sendfile on;
  tcp_nopush on;
  tcp_nodelay on;
  keepalive_timeout 65;
  types_hash_max_size 2048;

  include /etc/nginx/mime.types;
  default_type application/octet-stream;

  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for" "$http_host"';

  access_log stdout main;
  error_log  stdout debug;

  include /etc/nginx/conf.d/*.conf;
  include /etc/nginx/sites-enabled/*;
}

misc\nginx.default:

server {
  listen 80 default_server;
  listen [::]:80 default_server ipv6only=on;

#  listen 443 default ssl;
#  ssl_certificate /etc/nginx/certs/server.crt;
#  ssl_certificate_key /etc/nginx/certs/server.key;

  root /app/dist;
  index index.html index.htm;

  server_name _;

  location / {
    try_files $uri $uri/ =404;
  }

  location /stats/nginx {
    stub_status on;
  }
}

DockerFile:

FROM node:8.9-alpine
RUN apk add --no-cache nginx
WORKDIR /app
COPY package.json .
RUN yarn install
ADD misc/nginx.default /etc/nginx/conf.d/default.conf
ADD misc/nginx.conf /etc/nginx/nginx.conf
COPY . .
RUN npm run build
EXPOSE 80
CMD ["nginx"]

PS I have crafted the nginx conf files from 2-3 samples I found on the web, so I am not the authority on the subject. But the above is working for me :)

Let me know if it helps?

[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 :)

[williamhallatt]

Hi @fredderf204, I managed to get my setup working, but the nginx files were the ones I was after (I cannot run Docker containers in my env). Going to use yours to see if there are any config improvements I can make on ours! 👍

[fabriziocucci]

@fredderf204
There is a pending PR which actually shows how to dockerize a Vue.js app taking advantage of the Docker multi-stage builds as you suggested. I'd love to hear your feedback on that!

@williamhallatt
As part of the same PR I mentioned above, one of the first commit actually required a nginx configuration file. It was very basic but maybe you could start from that and further customise it.

[gertjanwytynck]

@fabriziocucci Thanks for the cookbook Helped me a lot.

Just updating here that I had an issue with the cookbook. It stopped on RUN npm install with this error:

npm ERR! code ENOGIT
npm ERR! No git binary found in $PATH
npm ERR! 
npm ERR! Failed using git.
npm ERR! Please check if you have git installed and in your PATH.

Not using the alpine image version worked or adding this before npm install:

RUN apk update && apk upgrade && \
    apk add --no-cache bash git openssh

Founded this solution here

[fabriziocucci]

@fabriziocucci Thanks for the cookbook Helped me a lot.

@gertjanwytynck I'm really glad to hear that! 😊

Regarding the issue, I've just tried to go through the cookbook one more time, replaying both the simple example and the real-world example but, for some reason, I can't seem to replicate the issue you mentioned.

Could you please help me figure out what's going on here? 😕

1. what's your dev environment (OS and Docker version)?
2. did that happen on the simple example or the real-world one?
3. did you happen to change any of the base images used in the cookbook?

Thanks in advance.