Deploy Flask App to DigitalOcean Apps
In case you have been reading along with the latest set of blogposts, you surely know we experimented with deploying the same Flask app to various different platforms. In the last blogpost, we deployed our app as a container image onto a DigitalOcean droplet running Docker. While this works nice, there are better alternatives (read: alternatives that require less maintenance and management).
In this blog post, we will deploy our app to DigitalOcean’s app platform. In case you are not familiar with it, check out this website. In short, the app platform provides a fully managed platform to build, deploy and scale apps. Let’s get started!
Configure Github repository
First of all, let’s create a Github repository that will contain our application code:
When successfull, some instructions will be shown how to push your application to your repository.
Commit our application
We will use the same Flask application we have been using before. We will be using the application from this post. The code for the app can be found here. Go ahead and download the code and push it to your repository.
~/Flask-Basic-CICD-GithubActions-DigitalOcean-Droplet ❯ git init ~/Flask-Basic-CICD-GithubActions-DigitalOcean-Droplet ❯ git add . ~/Flask-Basic-CICD-GithubActions-DigitalOcean-Droplet ❯ git commit -m "Initial commit" ~/Flask-Basic-CICD-GithubActions-DigitalOcean-Droplet ❯ git remote add origin https://github.com/wiwa1978/Flask-Basic-CICD-GithubActions-Docker-DO-Apps.gi ~/Flask-Basic-CICD-GithubActions-DigitalOcean-Droplet ❯ git push origin main
Right now, our application will be available on the remote Github repository.
In the DigitalOcean console, go to the DigitalOceans’s App management consolde by clicking on the
Apps button in the sidebar.
Create App button. You will be presented with the following screen:
Choose Github and select your repository and click the next button. In case you don’t see your repositories you need to modify the repository permissions on Github.
You will get to the following screen.
Click on the small pencil in the webservice section (under the Scale All button). That allows us to modify the webservice. You will see the following screen:
gunicorn --worker-tmp-dir /dev/shm app:app
And change the port as well from 8080 to 5000. Why port 5000? Well, because we are running our small Flask app on port 5000, you can see that here. You should see something similar to below screenshot.
Environments section and go to the
Info section. Give the app a name. You should see the following:
Next, review the settings. In my case, I have the following:
Create Resources button.
Deploying the app
Next, you will see that DigitalOcean started deploying our application:
This might take some time but eventually you will see a success message, indicating the deployment was successfull.
Live App button and that will show the app in your default browser.
Updating the app
Next, let’s update our app. As usual we will make a very simple change because we just want to show the process here. Open the
index.html file under the
app/templates folder. In our case we added the words
-- version 2 to the title tagline.
~/Flask-Basic-CICD-GithubActions-DigitalOcean-Apps ❯ git init ~/Flask-Basic-CICD-GithubActions-DigitalOcean-Apps ❯ git branch -m main ~/Flask-Basic-CICD-GithubActions-DigitalOcean-Apps ❯ git add . ~/Flask-Basic-CICD-GithubActions-DigitalOcean-Apps ❯ git commit -m "Initial Commit" ~/Flask-Basic-CICD-GithubActions-DigitalOcean-Apps ❯ git push -u origin main
This will automatically trigger a new deployment.
Refresh your browser and you will see our app got updated successfully.
Thanks for reading this post. Hope you learned something new. The code can be found here.