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

Conclusion

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.

23 comments:

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

    ReplyDelete
    Replies
    1. Hi,

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

      Greets,

      Sascha

      Delete
  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?

    ReplyDelete
    Replies
    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.

      Delete
  3. Awesome so far

    ReplyDelete
  4. this architecture is unconventional, do you have a reason for the base image, sir?
    http://stackoverflow.com/questions/30759829/docker-how-to-create-a-stack-multiple-images-or-one-base-image/30776096#30776096

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

      Delete
  5. 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 !

    ReplyDelete
  6. Hello Sascha,

    Thanks for this tutorial.

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

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

    ReplyDelete
  8. 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/

    ReplyDelete
  9. Great article and interesting about transport services and knowledge.

    Out of Gauge cargoes & Dangerous Goods transportation

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

    Customs Clearance & Less-than Container Load services

    ReplyDelete
  11. 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

    ReplyDelete
  12. 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

    ReplyDelete
  13. It's true Bluehost is the industry leading hosting provide and they are best For wordpress Hosting,
    BlueHost Basic Plan Discount – $3.49/mo* for first contract
    No coupon or promotion code needed – you’ll get an extra 55% discount from your first BlueHost bill.
    BlueHost WEb Hosting Discount

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

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

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

    ReplyDelete
  17. I had a search through the link, but believe it or not I am really unsure of what would work for us.
    gclub online
    goldenslot
    สูตรบาคาร่า

    ReplyDelete
  18. Hai Author Good Information that i found here,do not stop sharing and Please keep updating us..... Thanks.............Angularjs Development services

    ReplyDelete