Linux containers are one of the latest advancements in operating-system-level virtualization and Docker has the suite of tools you need to take full advantage.

To make a long story short Docker containers have a few key advantages over regular virtual machines.

  • Containers startup much faster than Virtual Machines because they share resources with the underlying host operating system.

  • Containers are super lightweight because they use a layered file system (AuFS) that's built up to allow sharing of common functionality between many containers.

  • Deploying applications is easier because a container running on your laptop is exactly the same as a container running on any other Docker host. There's no configuration differences between "dev" on your laptop and "production" in the cloud or wherever. Things just work.

  • Dev-Ops is massively simplified when containers are defined in a Dockerfile and shared between developers.

  • The Docker toolkit has what you need to realize the dream of a 12 Factor App.

  • With Docker on-boarding of developers is a 10-minute task. No more spending an entire day installing dependencies on a developer's workstation before they can write a single line of code.

The easiest way to get started with Docker on Mac OSX is to install the Docker toolbox.

The Docker Toolbox is an installer to quickly and easily install and setup a Docker environment on your computer. Available for both Windows and Mac, the Toolbox installs Docker Client, Machine, Compose, Kitematic and VirtualBox.

To get started create an account on Docker Hub.

https://hub.docker.com/

Docker Hub

Then, download the Docker Toolbox from the link below and install it on your development machine.

https://www.docker.com/docker-toolbox

Docker Toolbox Download

When the installation is complete run the Kitematic app. Hit command+spacebar to open spotlight and then start typing Kitematic...

Kitematic

When Kitematic starts up you'll see a login screen. You can skip this step but it's a good idea to login using the Docker Hub account you created earlier.

Kitematic Login

You should now see the Kitematic welcome screen. By default it shows the top "official" Docker images.

To demonstrate a simple web development workflow we'll start by running the recommended "hello-world-nginx" container. Click the CREATE button on the hello-world-nginx Docker Image in the upper-left corner.

Kitematic Welcome

Kitematic connects to Docker Hub, downloads the latest version of the "hello-world-nginx" image and starts up a container. You'll see the container's logs in the center column of Kitematic and some controls on the right column. Find and click the "WEB PREVIEW" icon to open a browser window and see the default web page for this Nginx container.

Hello World from Nginx

Notice the IP address in the browser. 192.168.99.100 is the local address assigned to the Docker Host running on your Mac. When the Docker toolbox is installed it comes bundled with Oracle VirtualBox. This is because Docker is a technology built on top of Linux and it doesn't run natively on Mac or Windows.

The first time Kitematic starts up it tells VirtualBox to create a Linux virtual machine. This virtual machine is the Docker Host. The Docker Host is where all your containers run. Notice the port in the screen shot above. Port 32768 is mapped to port 80 inside the Nginx web container. How Docker maps host ports to container ports is beyond the scope of this tutorial. For now, just know that each container you startup will get assigned a unique "random high port" which is then mapped to a port inside each container.

When Docker is running on Mac OSX or Windows it only has limited access to your file system. Behind the scenes the Docker Host (Virtual Linux Machine described above) auto mounts the /Users folder on your Mac (C:\Users on Windows). Because of this Docker containers can only mount and read/write to folders under the /Users path. So just be aware that when you're using Docker for Web development on your Mac you need to create your working directory or "web root" under the /Users path. I'll explain in more detail below.

The HTML file you see in the screen shot above is being served from inside the Docker container. Let's mount/map the "web root" volume inside the container to a folder on our local Mac.

Find the VOLUMES section and click the /website_files volume. This will automatically mount the container's website_files folder into your documents folder and open the folder in your Finder app. On my machine this path is...

/Users/augustkleimo/Documents/Kitematic/hello-world-nginx/website_files

Kitematic will automatically create the sub-directories .../Kitematic/hello-world-nginx/... if they don't exist. Notice that it created a folder with the same name as the container "hello-world-nginx".

Now that we've mounted the folder let's check it out in a text editor and make some edits. Open .../website_files/index.html file in your favorite text editor, make a small change to the file, then save it. I'll use Sublime Text to demonstrate.

Now refresh your browser to see the changes and Voila! You can start making a static website using this Nginx Docker container as your starting point.

You can easily change the location of the mounted volume on your local Mac by clicking Settings > Volumes. Notice how this screen shows the container folder (Docker Folder) and it's cooresponding local folder on your computer. Just remember that you can only map to a folder under the /Users path. If you map to a location outside of the /Users/ path the Docker host won't be able to see it.

Let's dive a little deeper and look inside the container. Locate and click the EXEC icon in the top nav of Kitematic. This will open a terminal window and give you a Bash shell inside the Docker container. Here are the unix the commands I ran to inspect the index.html file.

ls
cd /website_files/
ls
cat index.html

Notice that my "Hello World" edit is present in the index.html file. Notice also there's an /index.html file at the root path. This is a default index file that's "baked into" the Docker image. It gets copied into the /website_files folder if the folder is empty.

A common practice when doing web development with Docker is to mount a Git repo into the container's volume. Then after doing some development and changing a batch of files you commit them to your Git repo. If you use GitHub you sync the repo and then seamlessly develop between different computers (i.e. different developers). Each developer has a copy of Docker Toolbox and simply clones or syncs the Git repo, fires up a docker container, maps the volume and starts editing some code. You have a guarantee that everyone's environment is identical because they're all using the same Docker image to create their Docker containers.

This tutorial used a simple Nginx Docker image to demonstrate the web development workflow. You can use the same workflow for dynamic sites using PHP, Phython, Lucee, Node.js, etc. Just explore the public images available on Docker Hub. For example, Bitnami maintains a WordPress Docker image that you can use as a starting point for development. It only takes a few moments to download and run a WordPress container. That's the power of Docker!

There's so much more to Docker. I encourage your to explore the docs and learn more.

https://docs.docker.com/