Docker for end to end (React + Mongo + Python)
When I started working on the web application, I started realising that the biggest challenge is in the end after code completion.
I came across a challenge to create end to end application that has React as frontend, mongo as DB and Flask (Python 3.6) as Full stack.
The biggest question is how to maintain the 3 services and do easy deployment. Then i came across this tool called docker. Docker helps to containerise your application and give configuration for seamless deployment anywhere.
Following are the steps:
- Create Mongo as a server (In Docker-compose)
- Create React Application (Using Dockerfile)
- Create Flask (Python 3.6) as backend Service (Using Dockerfile)
- Integrate Mongo Services with Backend
- Integrate frontend with Backend
- Club all services in Docker-compose
- Production Ready Docker Configuration
You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…
1. Create Mongo as a server (In Docker-compose)
Docker mongo image is available in https://hub.docker.com/_/mongo. This image can deploy DB instance in our docker container as a service. It is very simple, add following lines in docker-compose.yml and you will get MongoDB service.
One can build and run using following commands:
docker-compose up -d
After running the command one can check the MongoDB as follows:
docker exec -it mongo bash
/# mongo -u admin -p admin
Important things to note here:
This is docker container policy for restart the container when necessary. One can check for the different options is this link.
Sometimes one need to start the MongoDB server differently, so basing on the condition one can set flags like — auth to start the server
This is an important folder where mongo data is stored, this needs to be set for backup of data.
This is important script where we will initialise DB and put initial data for app (or seed data).
2. Create React Application (Using Dockerfile)
In the same folder of docker-compose.yml file, create angular project (in my sample code, I have to create react application using npx (or yarn) and the name of the application is frontend). Once you create angular application, create a Dockerfile as below:
3. Create Flask (Python 3.6) as backend Service (Using Dockerfile)
Create a Python 3.6 (Flask) project in the same folder of docker-compose.yml file and create Dockerfile as below:
4. Integrate Mongo Services with Backend
To integrate Backend with MongoDB, we use network attribute in docker-compose.yml file
In Python, connect to MongoDB using MongoClient instance of PyMongo with help os.getEnv() method to get user id and password from the docker-compose.yml file which is set in the environment as MONGODB_USERNAME and others.
5. Integrate frontend with Backend
Integrate frontend with Backend using network attribute in docker-compose.yml
provide proxy for backend in frontend in environment file.
call the backend service from frontend using proxy url
In package.json provide proxy url “proxy:http://localhost:5000”
6. Club all services in Docker-compose
Provide complete services in docker-compose.yml file and do following commands:
Test the application in a browser by accessing http://localhost:3000
7. Production Ready Docker Configuration
Once testing is done, we are now ready to deploy our code to deploy in production. But frontend is not expected deployed using a node. So frontend build needs to be deployed in nginx. For this we will use another set of configuration files for production deployment.
When we use nginx for the production environment, we need to provide nginx configuration file for frontend. For backend we can configure as web-app_api, which needs further configuration as given below:
To build and deploy in production (as given in Deploy-production.sh) run this command:
docker-compose -f docker-compose-prod.yml up — build
To shutdown (as given in Shutdown-production.sh) run this command:
docker-compose -f docker-compose-prod.yml down