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.
Here's an example:
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:
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.
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.
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.
- We want to be able to port our apps to any other platform as easy as possible
- We want our applications to be as separated as possible (every container should have one purpose)
- We want to create more instances of an application container if needed
- We don't want crashed applications to crash other applications
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:
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).
- nginx reverse proxy
- links:
- nginx website
- ioJS REST API
- volumes:
- log files (/opt/docker/logs)
- nginx web site
- links:
- none
- volumes:
- web site files (/opt/docker/projectwebdev/html)
- log files (/opt/docker/logs)
- ioJS REST API
- links:
- mongoDB database
- volumes:
- ioJS application files (/opt/docker/projectwebdev-api/app)
- log files (/opt/docker/logs)
- 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.
Hi Sascha, nice tutorial series! One question, which tool did you use for drawing the architecture?
ReplyDeleteHi,
Deletebelieve it or not, but I've used Google Docs (Slides) for that... :)
Greets,
Sascha
I like this type of web design article i realy appreciate your thought keep it up. its so useful for me and my knowledge.
DeleteRead More: Best Application Services Company in Jaipur
Best Blockchain Development Company in jaipur
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?
ReplyDeleteSure, 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.
DeleteAwesome so far
ReplyDeletethis architecture is unconventional, do you have a reason for the base image, sir?
ReplyDeletehttp://stackoverflow.com/questions/30759829/docker-how-to-create-a-stack-multiple-images-or-one-base-image/30776096#30776096
See my comment @ http://stackoverflow.com/a/30785725/344514
DeleteHi Sascha, your tutorial is awesome.
ReplyDeleteI'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 !
Hello Sascha,
ReplyDeleteThanks for this tutorial.
I am wondering if is it a good practice to have several docker containers?
So far so good! I can't contained myself LOL
ReplyDeleteWeb-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/
ReplyDeleteThanks for the link! Great article and interesting discovery about transport services.
ReplyDeleteCustoms Clearance & Less-than Container Load services
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
ReplyDeleteHelp people that no one could do it later, good work!
ReplyDeleteCustoms Clearance & Less-than Container Load services
Thanks for taking the time to discuss this.
ReplyDeletewarehouse Streamlining & Air freight services
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!
ReplyDeleteFull Container Load services & Cross Border Trucking
Many people call it hotter than hot. Docker containers can be a true productivity booster for your next web apps. Web Design Bangalore
ReplyDeleteVielen Dank für Ihre großartige Informationen, die Inhalte sind ruhig interessant. Ich werde für Ihren nächsten Post warten. webdesign firma
ReplyDeleteWow, das ist eine wunderbare Zusammenstellung der besten Online-Website-Builder zur Verfügung.webdesign firma
ReplyDeleteI had a search through the link, but believe it or not I am really unsure of what would work for us.
ReplyDeletegclub online
goldenslot
สูตรบาคาร่า
ReplyDeleteLovely 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
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.
ReplyDeleteexperts of web developer services in bangalore
excellent eCommerce Website developers companies in bangalore
This comment has been removed by the author.
ReplyDeleteNice post. Keep updating Devops online course
ReplyDeleteฟิลเลอร์เป็นอย่างไร
ReplyDelete?
สารเติมเต็มผิวหรือที่เรียกด้านการแพทย์
ว่า เดอร์มอล ฟิลเลอร์ เป็น
สารไฮยารูโรนิก แอติด
หรือ HA เป็นสารที่รับประกัน
มาตรฐานความปลอดภัยทั้งโลก
แล้ว เป็นสารสกัดธรรมชาติ
ที่มีส่วนประกอบ
ของคลอลาเจน มีส่วนประกอบ
ประกอบกันเป็นร่างแหด้วยแนวทาง
ทางเคมี ซึ่งมีอยู่แล้วในเซลล์ผิว มีความปลอดภัยสูงฉีดฟิลเลอร์คาง
ฉีดฟิลเลอร์หน้าผาก
ฉีดฟิลเลอร์จมูก
Hey Nice Blog!! Thanks For Sharing!!!Wonderful blog & good post.Its really helpful for me, waiting for a more new post. Keep Blogging!
ReplyDeleteSEO company in coimbatore
SEO company
web design in coimbatore
I like your blog and the interesting points you discuss in this article. web maker in india , web developer in india , web designer in mumbai
ReplyDeleteMicrosoft 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
ReplyDelete
ReplyDeleteThis are new articles stylse for you. https://sbo98bet.wixsite.com/sbo98bet/post/%E0%B8%AA%E0%B8%A1-%E0%B8%84%E0%B8%A3-ufabet amazin555 http://foxz98bet.over-blog.com/ufabet-6 It might help you to write or think some new idea.
https://dafa98bet.weebly.com/36263617363335883619362636173634359436363585/-ufabet8326348 Thanks for sharing such a wonderful post.
https://w88-com.jimdofree.com/2020/09/01/%E0%B8%AA%E0%B8%A1-%E0%B8%84%E0%B8%A3-ufabet/ I am very glad for reading my articles.
This Is Really Useful And Nices Information. เสือมังกรมือถือ
ReplyDeleteThis are such great articles. เสือมังกรมือถือ This articles can help you to make some new ideas.
https://soccersurfer98.hatenablog.com/entry/2020/09/02/132139?_ga=2.193217001.552343305.1598844608-1286484823.1596077192 I appreciate for reading my blogs.
카지노검증
ReplyDeleteçekmeköy lg klima servisi
ReplyDeletebeykoz toshiba klima servisi
üsküdar toshiba klima servisi
beykoz beko klima servisi
üsküdar beko klima servisi
ataşehir lg klima servisi
çekmeköy alarko carrier klima servisi
ataşehir alarko carrier klima servisi
çekmeköy daikin klima servisi
พบกับ ศูนย์รวมโปรสล็อตใหม่ล่าสุด ได้ที่นี่ เรามีเกมสล็อตดีๆ มากมาย และยังมีอีกหลากหลายเกมส์ให้บริการ ความสนุกครบครัน ที่นี่ที่เดียว
ReplyDeleteรวมโปรสล็อตสมาชิกใหม่
สมัครรับโบนัสมากมาย พร้อมบริการทุกท่านด้วยระบบฝาก-ถอน อัตโนมัติ พร้อมกับมีทีมงานคุณภาพคอยดูแล ตลอด 24 ชั่วโมง
เล่นเกมสล็อตมือถือ ทำกำไรจากเกมออนไลน์มากที่สุด 2022 รวมโปรสล็อตถอนไม่อั้น เล่นได้เท่าไรถอนได้เลย ตลอด24 ชั่วโมง พร้อมบริการแก้ไขทุกปัญหาตลอดเวลา
elf bar
ReplyDeletebinance hesap açma
sms onay
SXOWG
betmatik
ReplyDeletekralbet
betpark
tipobet
slot siteleri
kibris bahis siteleri
poker siteleri
bonus veren siteler
mobil ödeme bahis
WD5E6
resimli magnet
ReplyDeleteresimli magnet
çerkezköy çatı ustası
silivri çatı ustası
dijital kartvizit
G0R