Using docker containers to containerize a web application and taking advantage of its deployment, scalability and reusability properties.

These are steps laid out in the FREE AWS Cloud Project Bootcamp which I am a part of as a student in the second Week. App Containerization by Andrew Brown

So let's agree that you are using Gitpod or VsCode as your development environment and that you already have a Flask back-end app and a React front-end app ready to be containerized, or you can follow along by using the files and scripts in this repo.

• Step 1: Create a Dockerfile inside the Backend-Flask directory

  Inside the Dockerfile, you have specified the base image and added any necessary dependencies and packages required by your Flask. But if you want to run these, move into the working DIR of Backend-Flask, and run the following commands;.

RUN pip3 install -r requirements.txt to install all your dependencies

to RUN Flask..

CMD pythom3 -m flask run --host==0.0.0.0 --port=4567 let us breifly discuss certain parts of the command...

-python3(we are running python version 3)

--m(a module specifing to use the FLASK module)

---host=0.0.0.0(we are binding to 0.0.0.0, because we are trying to expose our application outside the scope of the environment that we are running, rather than default which is 27.0.0.1 the localhost)

---port=4567(we are telling it to start on port 4567)

Remember to open port 4567 from the port tab by the terminal tab, clicking the LOCK to open

you can append api/activities/home to the url of 404 page you get after you open port 4567 for backend, to get data;

• Step 2: Build the Docker image for the Flask app

Move back to your root directory, and RUN;

``docker build -t  backend-flask ./backend-flask``


• Step 3: Create a Dockerfile for the React app

In the root directory of your frontend-React app, create a new file “Dockerfile” Inside the Dockerfile, you have specified the base image and added any necessary dependencies and packages required by your React app. But if you want to run these, move into the working DIR of frontend-React, and run the following commands

RUN npm install

to start React CMD npm start

• Step 4: Build the Docker image for the React app

Move back to your root directory, and RUN;

docker build -t frontend-react-js ./frontend-react-js

you can append api/activities/home to the url of 404 page you get after you open port 3000 for frontend, to get a frontend interface.

After appending, output should be like this but without data of activities from the backend-flask app;

• Step 5: Create a Docker Compose file

Create a Docker Compose file in the root directory of your project. Name the file as “docker-compose.yml”. In the file, specify the services for the React and Flask apps, including the Docker images, ports, and volumes. You can see my docker-compose.yml file for the contents of the file. The purpose for tthis file is to build both the Backend-Flask and Frontend-React which was earier built.

• Step 5: Run a docker compose command

Outputs are as follows with both 4567 and 3000 opened;

To check present active container images, run docker image command after every stage, I have here an output of the command after building the Backend-Flask.

There, we have our docker container image !

Please, I would appreciate you feedback