Tuesday, May 12, 2015

Series: How to create your own website based on Docker (Part 4 - Planning Docker container architecture)

Let's design our docker container architecture

This is part 4 of the series: How to create your own website based on Docker.

Docker and Docker Compose are now up and running. So it's about time to let them all play together.

Before we start planning our container architecture, we need to make sure that we understand what we're trying to achieve.
  1. We want to be able to port our apps to any other platform as easy as possible
  2. We want our applications to be as separated as possible (every container should have one purpose)
  3. We want to create more instances of an application container if needed
  4. We don't want crashed applications to crash other applications
So based on this list we need to figure out what components will be needed for the site.

Let's define all components to be "dockerized"

Component 1: nginx reverse proxy

I usually start with nginx as reverse proxy in front of all other services. This allows me to have a single entry point for all requests and to distribute them internally to all containers which should be accessible from the web. This reverse proxy will listen on port 80 and will redirect all requests based on the context root, the subdomain and/or the hostname.

Here's an example:
  • www.project-webdev.com:80 => redirects to my blog which listens on port 8081 internally (the projectwebdev blog will be hosted on another nginx machine).
  • api.project-webdev.com:80 => redirects to my REST API which listens on port 3001 internally (the API will be an ioJS/nodeJS application).
  • Also possible: www.project-webdev.com:80/api => redirects to my REST API which listens on port 3001 internally (the API will be an ioJS/nodeJS application).

As you can see, all requests will go through the nginx reverse proxy and will be redirected internally to the appropriate service.

What's important to mention: The internal ports (e.g. 8081, 3001,...) should not be exposed to public, so it should not be possible to access the blog directly (like www.project-webdev.com:8081).

This would be our first component, right? Wait! Where should our new nginx reverse proxy run on?

We need an operating system... so basically our first component would actually be a container that contains the operating system. For that I'm going to use Ubuntu 14.04 LTS.

So right now our current architecture would look like this:
nginx reverse proxy docker container

Component 2: nginx web server for our website

The next thing we'll need for our web site is the markup for the website. So all we need now is another nginx web service, but this time it will not act as reverse proxy, but as a real web server hosting our files. Since we don't want any port conflicts my basic rule is that 4-digit ports are never exposed to public. (Port 80 and 443 (SSL) are allowed to be accessed from outside).

Since Docker works with container links, we need to add a link to our reverse proxy, so that it can communicate internally with our blog application (nginx web site), which listens on port 8081.

As mentioned before, port 8081 can not be accessed from outside - therefore painted in purple.

You can also see that we've mounted a directory on the docker host into our blog's docker container. We're doing this, because we want to be able to change the website from outside later, without restarting the container.

Technically it would look like the following - I'll go into details later:
In the docker container (our provider's Ubuntu server), we'll create a directory called /opt/docker/projectwebdev/html/ which will be mounted as /var/www/html/ in the container (the directory which nginx uses to load the HTML, CSS and JS files from later). So whenever nginx (the one in our nginx web site container) receives a request from a visitor, it will load the files from our real server (from /opt/docker/projectwebdev/html/) and will provide it to him - I think you've got it, right? It's not that hard.

Component 3: ioJS REST API container

Our website should fetch information from a REST API. Therefore we will need an ioJS application that will provide all data for the website asynchronously. The website will use a call to http://api.project-webdev.com to fetch the contents or any other information needed.

Since this is a new URL, we need to link this container to our nginx as well, so that we can build our redirect to that container internally.

Component 4: mongoDB database container

A REST API does not make sense without any data persistence in the back. Therefore we need to add our mongoDB to that architecture as well. This instance listens on port 3333 and should only be accessible via REST API (and therefore implicitly via our nginx reverse proxy), which is why we need to add a link to our REST API so that it can access the data in the mongoDB.

Additional component: Logs

When running this application stack in the wild later, it's very important to be able to analyse the logs (e.g. using the ELK stack). Since we have several containers, it's does not make to get the logs from each instance separately. So we're creating another volume mount which acts as central storage for all log files of all used containers. This directory can later be used by log file analysis tools, so you can analyse the hell out of your logs. :)


We have now several containers that act as "platform" for a certain purpose. They are all completely encapsulated and are sharing their resources (thanks to Docker).
  1. nginx reverse proxy
    • links:
      • nginx website
      • ioJS REST API
    • volumes:
      • log files (/opt/docker/logs)
  2. nginx web site
    • links:
      • none
    • volumes:
      • web site files (/opt/docker/projectwebdev/html)
      • log files (/opt/docker/logs)
  3. ioJS REST API
    • links:
      • mongoDB database
    • volumes:
      • ioJS application files (/opt/docker/projectwebdev-api/app)
      • log files (/opt/docker/logs)
  4. mongoDB database
    • links:
      • none
    • volumes:
      • mongoDB files (/opt/docker/mongodb/db)
      • log files (/opt/docker/logs)
That's it... that's our "dockerized" architecture for our projectwebdev website based on Docker containers. Let's create our Docker Compose file now... in the next part of this series.


  1. Hi Sascha, nice tutorial series! One question, which tool did you use for drawing the architecture?

    1. Hi,

      believe it or not, but I've used Google Docs (Slides) for that... :)



    2. I like this type of web design article i realy appreciate your thought keep it up. its so useful for me and my knowledge.
      Read More: Best Application Services Company in Jaipur
      Best Blockchain Development Company in jaipur

  2. Woah, I believe you, nice work! Another question, If don't want to use docker compose, considering the production warning, is there any guide to accomplish the same results without it?

    1. Sure, you can create shell scripts, that build and run you docker containers (using docker build and docker run). But in this case you need to specify the ports to expose and the volumes with the according instructions (EXPOSE & VOLUME) in your Dockerfiles. Also you need to make sure that you run the containers in the correct order.

  3. this architecture is unconventional, do you have a reason for the base image, sir?

    1. See my comment @ http://stackoverflow.com/a/30785725/344514

  4. Hi Sascha, your tutorial is awesome.

    I'm currently developing web applications based on MEAN.js and your tutorials are exactly what I need !

    I already tried to dockerize it but it was not completely successful, so I found a way with Grunt + Upstart service but it's not as elegant as a Docker solution.

    Thank you for sharing !

  5. Hello Sascha,

    Thanks for this tutorial.

    I am wondering if is it a good practice to have several docker containers?

  6. So far so good! I can't contained myself LOL

  7. Web-Design Deutschland und Web Development -Unternehmen in Deutschland E-Commerce- Website -Entwicklung, Web-Site -Design , Flash- Website usw. besuchen Sie uns @ http://www.accuratesolutionsltd.com/e-commerce-entwicklung/

  8. Thanks for the link! Great article and interesting discovery about transport services.

    Customs Clearance & Less-than Container Load services

  9. I really like how your class timings of your blog. I enjoyed reading your blog and it is both instructional and interesting. Web Designing Bangalore | Web Design Company Bangalore

  10. Nice blog..!!! It is good to have most of these articles around to maintain the regular flow of information. Help people that no one could do it later, good work!

    Full Container Load services & Cross Border Trucking

  11. Many people call it hotter than hot. Docker containers can be a true productivity booster for your next web apps. Web Design Bangalore

  12. Vielen Dank für Ihre großartige Informationen, die Inhalte sind ruhig interessant. Ich werde für Ihren nächsten Post warten. webdesign firma

  13. Wow, das ist eine wunderbare Zusammenstellung der besten Online-Website-Builder zur Verfügung.webdesign firma

  14. I had a search through the link, but believe it or not I am really unsure of what would work for us.
    gclub online


  15. Lovely blog with much more interesting article, I will keep on reading your update. Thanks for the share Motorcycle Ear Plugs , Musicians Earplugs Custom Ear Plugs

  16. I had a to a great degree shocking information examining this blog. Thank significantly author for creating such amazing site and for giving such exceptionally beneficial information to perusers. Site improvement Company Services India is a champion among the most assumed site headway association in India.

    experts of web developer services in bangalore
    excellent eCommerce Website developers companies in bangalore

  17. This comment has been removed by the author.

  18. ฟิลเลอร์เป็นอย่างไร


    ว่า เดอร์มอล ฟิลเลอร์ เป็น

    สารไฮยารูโรนิก แอติด

    หรือ HA เป็นสารที่รับประกัน


    แล้ว เป็นสารสกัดธรรมชาติ


    ของคลอลาเจน มีส่วนประกอบ


    ทางเคมี ซึ่งมีอยู่แล้วในเซลล์ผิว มีความปลอดภัยสูงฉีดฟิลเลอร์คาง

  19. Hey Nice Blog!! Thanks For Sharing!!!Wonderful blog & good post.Its really helpful for me, waiting for a more new post. Keep Blogging!
    SEO company in coimbatore
    SEO company
    web design in coimbatore

  20. Microsoft has launched the Xbox party chat application, which as the name implies will permit constant communication among gamers and will serve an extension of the Xbox Live. Xbox App's Party Chat

  21. พบกับ ศูนย์รวมโปรสล็อตใหม่ล่าสุด ได้ที่นี่ เรามีเกมสล็อตดีๆ มากมาย และยังมีอีกหลากหลายเกมส์ให้บริการ ความสนุกครบครัน ที่นี่ที่เดียว

    สมัครรับโบนัสมากมาย พร้อมบริการทุกท่านด้วยระบบฝาก-ถอน อัตโนมัติ พร้อมกับมีทีมงานคุณภาพคอยดูแล ตลอด 24 ชั่วโมง

    เล่นเกมสล็อตมือถือ ทำกำไรจากเกมออนไลน์มากที่สุด 2022 รวมโปรสล็อตถอนไม่อั้น เล่นได้เท่าไรถอนได้เลย ตลอด24 ชั่วโมง พร้อมบริการแก้ไขทุกปัญหาตลอดเวลา