Docker and Nginx Reverse Proxy

#docker #nginx #reverseproxy
In this video, we'll look at a very basic reverse proxy with nginx and docker-compose. Our nginx reverse proxy will route requests to two Python Flask APIs and a container serving up a Vue app.
Check out my flagship Udemy course - 12-hour full-stack app build with automation tests, Vue.js, .NET Core, and SQL * For a limited time, use promo code STACK20 *
Like videos about web development, DevOps, and machine learning? Please support me on Patreon!
▬▬▬▬▬▬ 🎒 Udemy Course 🎒 ▬▬▬▬▬▬
Check out my flagship Udemy course - 12-hour full-stack app build with automation tests, Vue.js, .NET Core, and SQL * For a limited time, use promo code STACK20 *
►►► bit.ly/wesd-udemy
▬▬▬▬▬▬ 👋 Get in Touch! 👋 ▬▬▬▬▬▬
Patreon ► bit.ly/pd-patreon
Facebook Group ► bit.ly/productive-dev-fb
My Twitter ► bit.ly/wesd-twitter
My LinkedIn ► bit.ly/wesd-linkedin
▬▬▬▬▬▬ 🕘 T I M E S T A M P S 🕘 ▬▬▬▬▬▬
0:00 - Intro and Background
0:59 - Project Layout
2:16 - Docker Compose File
7:10 - nginx.conf File
12:30 - Temperature Service Dockerfile
14:28 - Temperature Service Flask Application
15:50 - Precip Service Dockerfile
16:05 - Precip Service Flask Application
18:06 - Weather Report Vue App
23:15 - Vue Dockerfile
25:00 - Vue nginx.conf
27:15 - Using Docker Compose to Launch
28:30 - Bugfix
30:40 - Outro
▬▬▬▬▬▬ 📚 TOPICS OVERVIEW 📚 ▬▬▬▬▬▬
☁️ Setting up NGINX in Docker as a reverse proxy ☁️
► How to create, configure, and launch a reverse proxy with nginx + Docker
► How to route requests to different backend services
► Using docker compose
► Setting up nginx.conf for reverse proxy
▬▬▬▬▬▬ 🔗 LINKS ▬▬▬▬▬▬
► GitHub repo for this project: github.com/productive-dev/min...

[@NoirExtra]

I watched, readed tons of tutorials, tons of videos, let me say THANK YOU VERY MUCH ! You are the only one who shows reverse proxy with more than one service and with thoses services interacting with HTTP requests ! I want to cry man ^^ Again thank you very much for that awesome tutorial. PS : Which tool did you use to make your Diagram, it renders very nice ;)

[@christopherrodriguezconde7693]

Such a great video to learn more about not only Docker but also how to manage and setup a reverse proxy using Nginx! The only thing I would like to point out is that you can use "expose" on the docker-compose.yml for all those services except the nginx, as if it was a production environment, you would only want the reverse proxy to be visible to the host (rather than exposing the other ones to your host as well). Using "expose" will not publish the ports to the host machine - they’ll only be accessible to linked services (in this case the reverse proxy). Anyway, a small tip, but I really loved this video and your explanation. Keep the good work! :)

[@realist.network]

Wes, you are exceptional at explaining things, compared to the dozens of blog posts I found. Thank you very much!

[@maymontalvan]

Genial!!!! Esto es lo que realmente estaba buscando, justo esto!!!! Gracias, tienes una suscriptora de habla hispana!!!

[@WesDoyle]

gracias

[@wamanyewle1103]

One of the best videos for NGINX understanding. Explained in very very simple language. Thank you

[@hopeitworks2085]

This is one such simple and an excellent video to learn. This helped me a lot. You are a life savior. Thank you

[@paralagente2741]

Thank you for explaining clearly!! Loved❤

[@roeifinkelstein118]

This helped me a lot. Super clear and to the point. Just what I needed. Thanks Wes !

[@IntentStore]

finally someone who pronounces it right

[@WesDoyle]

:)

[@arsalanahmad1832]

great tutorial man, I keep coming back to this again and again when I am lost. nicely explained. Keep up the great work

[@jorgepvenegas]

This video covers so much and so clearly. Thanks for posting it!

[@alexpaden5159]

It's really really awesome that you structured these large multi container projects using the same templates as a single app (weather app). I don't know if the word is innovative but it's really helpful and easy to grasp.

[@shanebenlolo4866]

You just helped me solve a problem I've been stuck on for almost a month, thank you so much!

[@WesDoyle]

nice! glad to hear it

[@Grimreap191]

Really great tutorial. Couldn't find anything else like this online. Thanks a lot!

[@CodingEntrepreneurs]

This is absolutely great Wes! Thanks for sharing

[@WesDoyle]

Glad you enjoyed it!

[@galvanino]

Thanks. I'm trying to dockerize Nuxt-Django-MariaDB-Nginx. I have read a lot of information and I have saw meny video tutorials. In this journey your tutorial has unraveled many things for me.

[@linusmeier9515]

This is absolutely brilliant! Really what I was looking for - thank you so much!

[@reillymclaren9506]

Very helpful! Thoroughly explained and very clear

[@ikumitsushima5989]

I love the content of your videos, thank you!

[@erickvidbaz3086]

Thank you very much Wes, great example!

[@dezwilliamz]

The portions about "Volumes" really helped me understand how it worked. Thank you and great detailed video. Sub'd and liked!

[@spicefiend]

You got a really soothing voice dude

[@djmonteur]

Wes, thank you very much for this clear example. It really helped me and I got a workin' local docker compose file. cheers!

[@WesDoyle]

Great to hear!

[@kimanje2patrick290]

Thanks a lot for a very nice example. This is the very video I needed

[@wesselkalter]

Thank you for the great demo!

[@dawid_dahl]

So grateful for this video. Thank you!

[@georgesbataille69]

Loved it. Keep up the good work.

[@boi_doingthings]

Man. Absolutely amazing.

[@igorbragaia4895]

that's dope, bro! thanks a lot for the tutorial

[@chandarayi5673]

The best tutorial out there, thank you

[@PVINFOLTEC]

Hi Wes, thanks for the tutorial, it helped me a lot!

[@ericdwkim]

Great explanation and detail. Subscribed!

[@NiKo-yn4wn]

Hi, do you have recommendations on how setting up SSL using your approach?

[@goforshahriar]

Please cover the follwoing questions : 1. What is reverse proxy 2. Why do we need it 3. How we can setup nginx to handle different ports, ips 4. How we can map frontend and backend api with nginx 4. Security aspect 5. Alternative of nginx 6. How is it different than k8s ingress

[@kirillf.8053]

I'd also add an additional question about how you can map multiple instances of the same backend app with nginx to load balance them.

[@WesDoyle]

Good questions, will answer anything missing in a followup video. Thank you

[@WesDoyle]

Good question, will answer in a followup video! Thanks for watching

[@crimsonderiv]

Hello, newcomer here. Has the questions been answered ?

[@goforshahriar]

@@crimsonderiv no, not all.

[@ameerhamza8735]

best tutorial out there. kudos 👍

[@UgurMahirOzkaya]

Great content! Ty Sir.

[@janmacku4633]

Thanks, great video!

[@josemiguelsanchez9124]

Excellent, excellent video... thanks a lot

[@ColdRooster]

Muchas gracias amigo

[@zedium]

Great tutorial 👌

[@msafdar5841]

thank you for this awesome video

[@_chidiebere4763]

well Put!!! Thanks!

[@Dorff_Meister]

Helpful, thanks!

[@tigranrostomyan9231]

Thank you SO MUCH

[@memack101]

Great video! Would love more complex production geared version of this video. Thanks

[@WesDoyle]

Thanks Ramon! Will see what I can do about making a more in-depth follow up video. 👍

[@markobradonjic3192]

Nice job mate, keep it going. Maybe one small improvement detail, you could have maybe just touched a bit on how the requests are proxied by Nginx to the different containers. All in all, great vid. :D

[@arpanbanerjee8584]

Yes true, like how it works behind the scenes and why do we need it?

[@CripplingDuality]

These ops videos are so well done. Nginx has been such a black box to me and this has changed that. Any chance you can compare docker/containerization with infrastructure-as-code? It'd be nice to see how these strategies complement/compete with each other. Great work as usual!

[@WesDoyle]

Thanks Natesh Mayuranathan - and great idea. I will put this in the queue of ops videos to record.

[@joevu6629]

Thanks u so much! Your lesson has helped me a lot

[@WesDoyle]

Glad to hear that, Joe! Hope you are well.

[@ghilesdjebara8066]

Thank you so much...

[@diegofigueiredo7012]

I'm using jwilder nginx reverse proxy Project to Java application.... Works fine

[@buscseik]

Thank you

[@khatuntsovmikhail6223]

you pink courser just drive me nuts....

[@vigorousvoices]

Thanks for the great demo, it's helped me a lot with what I am doing right now. I have a question though, why is your axios sending the request to "localhost" and not to "reverse-proxy" that is defined in your docker-compose. By sending to localhost, is it not sending to the nginx that is installed in the Vujs container itself and not the one acting as the reverve proxy? Thanks

[@skuttis4u]

What YAML editor are you using in the video? Also excellent explanation

[@richardwng]

Hey man, awesome content right here. Would you mind sharing more about Nginx on Docker for Production build? Thanks in advance!

[@harris9393]

Thank you for this great tutorial! One question though, why did you still open the ports for weather-report, temperature-service and precip-service when it is being handled by reverse-proxy?

[@WesDoyle]

hey Harris! great point

[@ariss3531]

Hello guys, great videos Wes, can anyone help me with a problem i have? I need to be able to see the changes when I write new code for example on vue, if I change the the html and refresh the localhost, nothing is showing, i need to rebuild all the containers! How can i solve this? Thanks

[@dapmas7]

Great video! What theme and Color scheme are you using for terminal here?

[@omerapl3511]

Great video! I have a follow-up question: What's the optimal approach to achieve the same outcome in a Kubernetes environment, specifically on EKS? Suppose I want to expose only the front-end application through Ingress without exposing the back-end application. What would be the recommended method for accomplishing this?

[@user-rp9gi3xi5u]

Excellent

[@wiseskeshom4673]

Thank you so much for this great video and well explanation. I learned a lot from your video. For you guys who Fork/Clone this nice project in early 2022, it seems like using node:latest in the weather_report dockerfile will not work because an issue of Node 17+ and OpenSSH (ref to a question in Stackoverflow). I fixed node version as 16.14.0 then it works great.

[@WesDoyle]

thanks for the information!

[@bl4ckd4g3r3]

im trying to do the same with apache, but for some reason i only get the default "It works" page, locally it works find. but not when I build and upload it to aws with docker compose

[@tanchwa3740]

So what does the remote address variable need to be set as for X forwarding?

[@amritpalhh9836]

I have a rest api and I have a script I found online that makes it so that the front end waits for the backend in docker compose but once the backend runs the front end times out or gives me a code 1 error. I have extended the timeout time but it now gives a code 0 error. How do I solve this?

[@hamadaparis3556]

Hi so informative video, there is nginx container on the top of the tree serving subcontainers and also there is second nginx container serving specifically Vue app if that's right can I serve Vue app without second nginx config only through the top most nginx container or the second nginx image is required for serving Vue container ?

[@ghilesdjebara8066]

Hello man, Thank you so mcuh for your video, it already helped me so much. Your tutorial works perfectly how it is. However, when I try to use proxy_pass with a REGEX to match a URL, i get the "no resolver defined to resolve" error and a 502 error. Can you please give me a hint ? Thanks in advance.

[@arpanbanerjee8584]

Thanks for the to the point explanation !! There's one thing I do not understand, our Vue app can communicate to the backend servers alone right? what is the use of reverse proxy? generally in a web application we have a client and then we have a server, our client is hosted somewhere so is our server, we expose APIs from server , and we call them from the client giving proper hostname and API path making a complete URL. So, our client app is hosted and when a user clicks a button, our client app (Vue app here) will call the services. Where the proxy comes in place here and why do we need it? I am trying to compare a simple web app architecture with these dockerized version using nginx.

[@StMarc-ow4wz]

How can we scale up the nginx reverse proxy container?

[@devendersingh238]

I like your channel and the explanations, if you can please consider these four aspects WHAT, WHY, WHEN and HOW. I specifically wants to learn .net core + docker on Linux + K8s.

[@WesDoyle]

Hi Devender, nice -- K8s is a big topic, but definitely relevant to modern devops. Thanks for watching!

[@alexzander__6334]

why there isnt an EXPOSE port inside the weather_report app's dockerfile ?

[@Stoney_Eagle]

I need a organized way of hosting my vps and home server so thanks for the info. I think it's better to limit the initial steps when you make a tutorial. If you start with just the docker proxy and then add an application at a time it would be easier to process the information. 😉

[@WesDoyle]

Noted! Thanks for the feedback

[@AdharshMk96]

I used nginx outside of docker ( installed in my host ) to make sure site is available even when I'm restarting docker etc.. Do you think it's a good approach ? I blocked published ports of the apps inside docker in firewall.

[@magosimediahub1503]

what if the microservices have diffrent yml file and the nginx has its own instead of making it just one file

[@michaeljones9229]

For some reason it is having trouble resolving my container... I get " [error] 31#31: *2 no resolver defined to resolve *container name* " when sending a request to my nginx container

[@hemanshu877]

Hi , great explanation , I m struggling to get (react + laravel) webpack dev server in docker for development environment in my php app , if u know about that , could make video on that

[@WesDoyle]

Hi Hemanshu Khodiyar, I've been meaning to get around to building a Laravel project for a long time now. I'll put it in the queue of ideas for future videos! Thanks for the message. 😀

[@MarcosPsaro]

Hi, how can I enhance the nginx-proxy response times, multi-threading, and throughput? which parameters should I modify in host config or nginx.conf file to do achieve that? Thanks in advance.

[@WesDoyle]

I’ll make a note to cover nginx in depth in a future video!

[@shihabjamil7274]

Please upload another video using https on nginx using openssl.

[@ThingEngineer]

What a great demo touching on so many areas without going down rabbit holes.

[@whynottyg7250]

What you talking about. He completly went off topic just had to show its 3 docker containers running and which ports they were on, Instead went through a docker compose file etc. Docker ps would have been enough

[@mrk9674]

Why did you define "container name" in compose file? If this is set, containers cannot be scaled up ( multiple instances of the same container).

[@WesDoyle]

Good point, MRK! If I was going to update this intending to scale those services, I would update to remove container name from the compose file.

[@MrDextre1480]

hello friend and with apache can you do it the same with dccker?

[@WesDoyle]

Hi dextre - yes, you can also run Apache in a container!

[@zaluq]

What editor are you using there ?

[@WesDoyle]

vs code

[@donha475]

Is there any possible way to make it work when the python flask app is running on 127.0.0.1:5001 instead of 0.0.0.0:5000? I think it is impossible on Windows docker... (I tried using nginx to reverse proxy... does it work for you??)

[@donha475]

Caddy reverse proxy worked for this... not sure why I couldn't make nginx work...

[@aarongoodrich6903]

not a bad explanation here. one thing 'off' i notice. there's no reason to map the container ports to your host ports unless your planning to actually use the host ports

[@buddy.abc123]

If you ever come to South Africa I'd like to buy you your favourite beverage Wes

[@WesDoyle]

hope to take you up on that someday 😄

[@Andbil]

I am trying to send a curl request to a route inside my own container. It's of oauth. If I do this I get a request denied error. I tried the container itself as the url, the docker IP (which I think using the container name basically does anyways) I tried localhost, the url I set in nginx. Nothing works

[@WesDoyle]

Hi Andrew, are you using curl from a shell outside of your container? If you are on the host where Docker is running, you will need to expose the port on the container running your server

[@tanchwa3740]

So I have a server where I have multiple services running as different containers, I have the ports all mapped to a port on the server, and then the microservices referenced by a different location for each in my Nginx conf file, however, only the first container is reachable by the location. the rest seem to fail to load some files such as /usr/share/nginx/html/Content/Fonts/fonts.css or venders.js in the same location... I don't know if these were set up by the container or what but I'm not sure how to get them to cooperate with the reverse proxy.

[@tanchwa3740]

not really sure what I'm doing wrong. The only thing I'm doing differently than you is that my stuff is hosted on an external box instead of on the same machine.

[@tanchwa3740]

any help from anyone would be appreciated I'm about to tear my hair out on all this

[@KaydotOrigin]

New to Docker - trying to understand the image concept. I'm on Nginx in Docker Hub (hub.docker.com/_/nginx/?spm=5176.doc53764.2.3.gm0FWx) but theres no reference to nginx:1.17.10 that your reverse_proxy container utilises. Where can I find the most up-to-date nginx image? Or can this be substituted for nginx:stable ? Many thanks in advance

[@MrEnsiferum77]

Why we need nginx.conf file in the frontend app?

[@WesDoyle]

Here we're using an nginx server to serve up the built Vue application!

[@MrEnsiferum77]

@@WesDoyle Is that mandatory, when u have reverse proxy or not? How the frontend app can know the microservices endpoints, if there is no nginx for the frontend....

[@wichukorndandecha]

What theme vscode?

[@WesDoyle]

I'm using Night Wolf as a VS Code theme here.

[@Chris-cl5gg]

i pulled your repo and it just doesnt work. i did not change anything. just a git clone and docker compose up. it failed!!!

[@WesDoyle]

Hi Chris, what details does the error message provide?

[@Chris-cl5gg]

@@WesDoyle I'm going to check it as soon as I get home

[@uglevod184]

ff.. why youtube translate title of video to russian ... of IT when i am want video only on rus lang.. its wrong iF i wanna on englisl i am take that

[@icomment4692]

502 error

[@williamdevjs9974]

15:54

[@cim8097]

I prefer Traefik.

[@WesDoyle]

A solid choice!