Jekyll2024-06-26T22:38:16+08:00https://techlog.muazzam.my/feed.xmlTechlog | Embracing the Spectrum of Tech, from Simple to SophisticatedYour go-to source for concise and practical tech tutorials and insights.MuazzamBuilding a Scalable Web Application: Integrating React.js, Nginx Load Balancer, and Python Flask APIs with MongoDB2024-06-26T00:00:00+08:002024-06-26T00:00:00+08:00https://techlog.muazzam.my/2024/06/26/todoapp-deployBuilding and deploying fullstack web application today is different, compared to during the old times. Technologies has advanced further and allow us to keep our work standardise, simple, and faster.

Following is the diagram of the architecture:

                 Docker | Containerized Applications                                                                                             
                ┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
                │                                                                                                                               │
                │                                                                    '/' GET                                                    │
                │                                                                                                                               │
                │                                                                    '/create' POST                                             │
                │                                                                                                                               │
                │                                                                    ┌───────────────────┐                                      │
                │                                                                    │                   │                                      │
                │                                                              ┌────►│ flask | backend-1 ├─────┐                                │
                │                                                              │     │                   │     │                                │
                │                                                              │     └───────────────────┘     │                                │
                │                                                              │                               │        ┌────────────────────┐  │
┌─────────┐     │  ┌────────────────────┐         ┌──────────────────────┐     │                               │        │                    │  │
│         │     │  │                    ├────────►│                      ├─────┘                               ├───────►│ MongoDB | database │  │
│ Visitor ├─────┼─►│ reactjs | frontend │         │ nginx | loadbalancer │                                     │        │                    │  │
│         │     │  │                    │◄────────┤                      ├─────┐                               │        └────────────────────┘  │
└─────────┘     │  └────────────────────┘         └──────────────────────┘     │     ┌───────────────────┐     │                                │
                │                                                              │     │                   │     │                                │
                │                                                              │     │ flask | backend-2 ├─────┘                                │
                │                                                              └────►│                   │                                      │
                │                                                                    └───────────────────┘                                      │
                │                                                                                                                               │
                │                                                                    '/update' PUT                                              │
                │                                                                                                                               │
                │                                                                    '/delete' DELETE                                           │
                │                                                                                                                               │
                └───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
                                                                                                                                                 
                                                                                                                                                 
                                                                                                                 Made by Muazzam @ Hakase        
                                                                                                                 26/06/2024                      
                                                                                                                                                 
                                                                                                                 made possible at: asciiflow.com

Based on the diagram above, there is one container for handling frontend, then forward the request to one load-balancer, and forward again the request to one of the backend, depends on the URL path. If the request are ‘/’ with GET method, and ‘/create’ with POST method, backend-1 container will process the request, while if the request are ‘/update’ with PUT method, and ‘/delete’ with DELETE method, backend-2 container will process the request.

to be continue…

]]>MuazzamWelcome2018-07-01T00:00:00+08:002018-07-01T00:00:00+08:00https://techlog.muazzam.my/2018/07/01/welcomeIf you see this page, that means you have setup your site. enjoy! :ghost: :ghost: :ghost:

You may want to config the site or writing a post next. Please feel free to create an issue or send me email if you have any questions.

If you like TeXt, don’t forget to give me a star. :star2:

Star This Project

]]>MuazzamPost with Header Image2018-06-01T00:00:00+08:002018-06-01T00:00:00+08:00https://techlog.muazzam.my/2018/06/01/header-imageA Post with Header Image, See Page layout for more examples.

]]>Muazzam