Deploy Python Web Apps (Flask) with DigitalOcean and Docker

Hello Devs!, deploying applications that we have built is the main food for a developer, whatever it is, including web developers. There are so many ways to deploy an application that has been built perfectly, from how deploying complex to easy and the cost of deploying is expensive to cheap and even free.

I am currently pursuing web development using Python programming language, by starting to learn about the web application framework from python, namely Flask and Django which are extraordinary frameworks from python for web application development.

There are many ways to deploy an application, for now, I’m using a very simple platform to deploy my python application which is DigitalOcean platform. We can very easily deploy an application with various programming languages easily using docker.

let’s get into the tutorial on how to deploy Python applications on DigitalOcean platform using docker, in this tutorial I use Flask framework.

For the first time, we create a docker file in our flask project directory. Create a file with the name Dockerfile in our flask project directory.

└── FlaskProject
    ├── static
    ├── templates
    ├── app.py
    ├── Dockerfile

Enter the Dockerfile syntax below in the Dockerfile file in Flask project directory.

# syntax=docker/dockerfile:1
FROM python:3.8-slim-buster
WORKDIR /app
COPY requirements.txt requirements.txt
RUN pip3 install -r requirements.txt
COPY . .
CMD [ "python3", "-m" , "flask", "run", "--host=0.0.0.0"]

Then we continue by creating a requirements.txt file in the flask directory project where the contents in the requirements.txt file is the python packages needed in application development, for now, what must be used in this project is the flask package.

└── FlaskProject
    ├── static
    ├── templates
    ├── app.py
    ├── requirements.txt
    ├── Dockerfile

Add flask package to requirement.txt file

flask

After our flask project has finished adding the Dockerfile and requirements.txt, then upload our project to GitHub. Create a new repository on GitHub, then upload the project by adding a remote repository on git bash, for the rest, see the empty GitHub repository that was previously created. For an example like this.

echo “# web-regiapriandi” >> README.md
git init
git add README.md
git commit -m “first commit”
git branch -M main
git remote add origin https://github.com/regiapriandi012/web-regiapriandi.git (change to our remote repository)
git push -u origin main

Then after we have successfully uploaded our project to docker, then we enter DigitalOcean via the login page https://cloud.digitalocean.com/login, if we have not registered on DigitalOcean, we can register on the registration page https://cloud.digitalocean.com/registrations/new
Then after successfully entering the DigitalOcean home page, we can select the Create menu

Then select the Apps menu

In this tutorial, we use GitHub platform to build applications on DigitalOcean

Then scroll to the bottom where we enter the GitHub repository, enter the repository that was previously created, and then select the branch, branch on GitHub that was previously created which is main branch, then we can click the Next button.

We can check the Autodeploy option to be able to deploy automatically on the DigitalOcean cloud when our application updates or changes

In this section, we can choose the Next option

In the Environment Variables (Env Vars) section, we can also directly proceed to the next section by selecting the Next menu

Then in this section, we can specify a name for our application and choose the region where the server is built for our application, here I choose Singapore. Then proceed by selecting the Next menu

In this section, we can choose the cost for the development of our application, how by selecting the Scale All menu on the page

Then we can adjust our needs by choosing Basic or Pro Plan, here I choose Basic Plan

After we have finished choosing a plan, we can scroll to the bottom a little, here we can choose the cost for our application development with a monthly fee count.

Here I choose the smallest size, which is 512 MB RAM and 1v CPU, we can adjust the use and size of the application that we deploy

After we have finished selecting the plan and costs, scroll down a bit and we can return to the review page by selecting the Back menu

Then we can configure the port in the settings section, we can enter the configuration section which is boxed in red

Change the HTTP Port from 8080 to 5000 by selecting the edit menu on HTTP Port, why like this? because the default port of Flask itself is 5000

Followed by scrolling down a bit, then selecting the Save menu then proceeding by selecting the Back menu

In this final section, we can select the Create Resources menu to proceed to the application deployment section

Then in this section, we just have to wait for the application development to be carried out automatically by the system, this process takes time depending on the size of the application we are deploying

After the application has been successfully deployed, we can access it via the link that appears on the page

When our application is running well, then the application can be accessed in the browser via the link that we get from the DigitalOcean deployment page

(Optional)

Then when our application requires a domain that we already have, we can configure it on the settings page, here we can choose the Settings menu

We can select the Edit menu in the Domains section

Then we can click on Add Domain menu

On this page we can configure the Domain Name as we want, for the first red box is where we want to input the Domain Name, then the second red box is Domain Name management.

Here I choose to manage my own Domain Name, I use Cloudflare platform to manage my Domain Name

Then you can scroll down to continue to the next section, which is to take the CNAME Alias to be configured on the Domain Name in Cloudflare, we can copy the CNAME Alias then proceed by selecting the Add Domain menu

In this last part, we add the CNAME Alias which we previously copied to the target Content on the domain we created, here I create a domain of type CNAME with subdomains about and domain regiapriandi.me.

Then if it is ready then we can select the save menu and then The Domain Name that we want will automatically point to the application that we have deployed

When the custom Domain Name configuration is successful, the domain on the DigitalOcean application deployment dashboard page will adjust to the one we previously configured

We can solve it through the browser by accessing the latest domain name

Thank you Devs for those of you who followed this tutorial from the beginning. Hopefully, it can be useful and we can learn together for a better future.