Docker for Vue.js Developers

This was a talk given by me at the online VueBLR meetup on 23rd May, 2020.

Docker is a wonderful new technology that's creating shifts in the way we build and deploy applications. Static websites are no exception. We explore how Docker can help us front-end developers, not only to iterate faster by creating images that contain our application and the necessary deployment server, but also, avoiding the "it works on my machine" model of development by ensuring repeatable development environments for all the members in a team. All this, without having to sacrifice the great affordances we enjoy such as hot-reloading.

Transcript

1. DOCKER FOR VUE.JS DEVELOPERS Sangeeth Sudheer @sangeeth96
2. HI, I’M SANGEETH. Front-end @ Flock. Gamer. Otaku. Geek. Hardcore fan.
3. So, what is Docker and… WHY SHOULD I CARE?
7. Cool… but what is it? • Think of it like a bundle containing your application code as well as just the right amount system APIs and services—not the whole Operating System.
8. Advantages • Lightweight • Less system resources required • Faster deployment cycle since it’s way easier to swap out old container image with a new one • Can be run using an orchestrator such as Kubernetes to rapidly scale up, run multiple containers at the same time and quickly failover
11. No thanks, I’ll use Netlify. • Netlify is awesome! • What makes it even more awesome… is that it uses containers under-the-hood! https://github.com/netlify/build-image
12. So… when do you use it? • You can’t use cool stuff like Netlify. • You need flexibility. • You need on-premises deployment. • Containers will make your lives a whole lot easier if the above points fit. • But the most exciting bit is: you can use it for development!
13. Okay, okay… HOW DO I GET STARTED?
14. We’ll split the use of Docker for two purposes (and maybe more): DOCKER FOR PRODUCTION DOCKER FOR DEVELOPMENT
15. Ingredients • Docker Desktop installed on your machine (https:// www.docker.com/products/docker-desktop) • Dockerfile • .dockerignore (optional) • A cloud-provider that can run containers (pretty much everyone does!). We’ll use Heroku.
17. DEMO TIME
18. Dockerfile FROM node:12.16.0 The base image from which you’re going to build. WORKDIR /app Set the working directory. Commands like COPY will then respect this setting. COPY <from> <to> Copy files from <from> into the image in the location provided by <to>.
19. Dockerfile RUN yarn install Run any arbitrary command. This result in the creation of a new layer. CMD [“yarn”, “start”] This sets the default command that should be invoked when the container is started. https://docs.docker.com/engine/reference/builder/
20. Docker image name/tag format: MY-APP:1.0.0 MY-APP:1.0.0-OSNAME MY-APP:LATEST
21. Port mapping: -p HOST_PORT:CONTAINER_PORT
22. Let’s take a look at some DOCKER CLI CRUD
23. docker container ls [#--all] Shows all the running container instances in your machine. Pass --all to see even the containers that are stopped. docker image ls Shows all the docker images you have on your machine. docker top <container-name> Shows all the running processes inside a container.
24. docker run [-it] <image-name> Creates an instance of a container from the image name provided. The image has to exist for this command to work. docker build -t <image-name> . Builds a docker image based on the Dockerfile in the current directory. docker exec [-it] <container-name> <command> <args> Runs the given command inside given container instance that’s running at the moment.
25. docker stop <container-name> Gracefully stops the running container. There’s a start command to run a stopped container as well. docker kill <container-name> Tries to gracefully stop and if it doesn’t work, forcefully kills and removes the container instance.
26. docker container rm <container-name> Removes the stopped container instance. docker image rm <image-name> Removes the image from your machine. docker image prune docker container prune Removes all unused images. Removes all stopped container instances. If you’re running low on space, these are your friends.
27. Some tips • Always include a .dockerignore file and add directories like .git and node_modules in it. • Make sure you install your dependencies first and in the end, copy over your application files in order to get best caching. • Don’t include any script to restart the application if it files. i.e, don’t use tools like nodemon/pm2 inside Docker since your orchestration engine takes care of that for you anyway. • Use lightweight images like alpine for production. You can use multi-stage docker builds to achieve this.
28. I’m pumped! Guide me! • Stephen Grider’s excellent Udemy course is a must watch
 https://www.udemy.com/course/docker-and-kubernetes- the-complete-guide/ • Katacoda
 https://www.katacoda.com/ • Docker docs
 https://docs.docker.com/ • Read about docker-compose
 https://docs.docker.com/compose/ • Vue.js Cookbook
 https://vuejs.org/v2/cookbook/dockerize-vuejs-app.html
30. THANK YOU! Sangeeth Sudheer @sangeeth96 QUESTIONS?