DEV Community

Cover image for How to Deploy a Flask Portfolio Website on AWS Elastic Beanstalk
Pravesh Sudha
Pravesh Sudha

Posted on

How to Deploy a Flask Portfolio Website on AWS Elastic Beanstalk

A Step-by-Step Guide to Hosting Your Flask Application with AWS for Seamless Deployment and Scalability

💡 Introduction

Welcome to the world of DevOps! Over the past few days, I’ve been exploring the ins and outs of AWS Elastic Beanstalk, tackling challenges that many cloud beginners might encounter—particularly with the recent changes in Auto-Scaling Group policies. Hosting web applications on Elastic Beanstalk can seem daunting at first, but it doesn’t have to be.

In this blog, we’ll break it down into simple steps to help you deploy your Flask application (a portfolio website) seamlessly on Elastic Beanstalk. Whether you're new to cloud computing or looking to simplify your deployment process, this guide will equip you with the knowledge and confidence to get your application up and running. Let’s dive in!


💡 Pre-requisites

Before we dive into deploying your Flask portfolio on AWS Elastic Beanstalk, let’s make sure you have the following requirements in place:

  • Basic Understanding of Flask and AWS Elastic Beanstalk: Familiarity with Flask for creating web applications and an understanding of Elastic Beanstalk's purpose for deploying and scaling applications.
  • Flask Installed: Ensure Flask is installed on your system. If not, you can quickly set it up using the command:
  pip install flask
Enter fullscreen mode Exit fullscreen mode

With these prerequisites checked off, you're ready to move on to building and deploying your portfolio!


💡 Getting Started with the Project

To simplify the process, I’ve already created a GitHub repository containing the code for the portfolio application. You can find it here: GitHub Repo: ebs-demo. Follow these steps to get started:

  1. Clone the Repository: Open your terminal and clone the repository using the following command:
   git clone https://github.com/Pravesh-Sudha/ebs-demo
Enter fullscreen mode Exit fullscreen mode
  1. Install Flask: Navigate to the project directory and install Flask:
   pip install flask
Enter fullscreen mode Exit fullscreen mode
  1. Run the Application: Start the Flask application using the command:
   python3 application.py
Enter fullscreen mode Exit fullscreen mode
  1. Experiment with the Application: Feel free to modify the application to make it your own! You can:
    • Edit the index.html file to change the layout or content.
    • Replace the img/Profile.jpeg file with your own image.
    • Update the style.css file to adjust the styling.

After making changes, rerun the application to see the updates in action.

Here’s how the default version of the portfolio website looks:

Image description

Now that you have your project set up, let’s move on to deploying it on AWS Elastic Beanstalk!


💡 Deploying the Project on AWS Elastic Beanstalk

After successfully testing the project locally, it's time to deploy it on Elastic Beanstalk. For those unfamiliar, AWS Elastic Beanstalk is a service that allows you to run web applications without manually configuring servers. Here’s how you can deploy your Flask portfolio step by step:

Step 1: Prepare the Application Code

  1. Create a zip file of your project code to upload to Elastic Beanstalk. Run the following command in your project directory:
   zip -r flask_portfolio.zip . -x "venv/*" -x "*.git/*" -x "*.idea/*" -x "*.DS_Store"
Enter fullscreen mode Exit fullscreen mode

This command will exclude unnecessary files and folders like the virtual environment, .git directory, and system files.

Step 2: Create an Application on AWS Elastic Beanstalk

  1. Log in to the AWS Elastic Beanstalk Console and click on Create Application.
  2. Provide a name for your application, such as Flask-demo.

Image description

  1. Scroll down to the Platform section, select Python, and choose the option to Upload your code in the Application code section.
  2. In the pop-up window, upload the flask_portfolio.zip file, assign a version label like v1, and click Next.

Image description

Step 3: Configure the Service Role and EC2 Instance Profile

  1. Under the Configuring service section:
    • If you don’t have a service access role, select Create a new access role; otherwise, select an existing role.
    • For the EC2 key-pair, select an existing key-pair. If you’ve worked with EC2 instances before, you likely already have one.

Image description

  1. To configure the EC2 instance profile:
    • Go to the IAM Console -> Roles and create a new role.
    • In the use case, select EC2 and attach the following permissions:
      • AmazonSSMManagedInstanceCore
      • CloudWatchLogsFullAccess
    • Click Next, name the role (e.g., Role-for-ec2-beanstalk), and create it.

Image description

  1. Back in Elastic Beanstalk, select the newly created role Role-for-ec2-beanstalk in the EC2 Instance Profile section and click Next.

Step 4: Networking Configuration

  1. In the Networking configuration section:
    • Select your Default VPC.
    • Check the option to enable Public IP Address and select some subnets from your VPC.
    • Leave the rest of the settings as default and click Next.

Image description

Step 5: Traffic Configuration

This is an important step because AWS updated its Auto-Scaling Groups policies as of October 2024. To address this:

  1. In the Traffic configuration section, ensure you select the Root Volume Type as GP3. This avoids issues with Auto-Scaling Groups.
  2. Leave the other options as default and proceed to the next step.

Image description

Step 6: Monitoring and Platform Updates

  1. In the Monitoring configuration section:
    • Choose Basic monitoring since this is a test deployment, not for production.
    • Uncheck Managed Updates in the Managed Platform Updates section.
    • Leave the rest of the options as default and click Next.

Step 7: Review and Deploy

  1. Review your configuration settings carefully.
  2. Hit Submit and wait for 5–7 minutes for Elastic Beanstalk to set up and start your application.

Image description

Once the setup is complete, your Flask portfolio website will be live and accessible through the Elastic Beanstalk environment URL.

Image description


💡 Conclusion

Congratulations! You’ve successfully deployed your Flask portfolio website on AWS Elastic Beanstalk. By following these steps, we’ve leveraged Elastic Beanstalk’s powerful features to streamline the deployment process without getting bogged down in complex server configurations.

This journey not only introduced you to the basics of Elastic Beanstalk but also highlighted practical solutions for handling updated policies like Auto-Scaling Group deprecation. As you continue experimenting, consider scaling your application, enabling advanced monitoring, or exploring additional AWS services to enhance your project further.

Remember, every deployment is a step forward in mastering cloud computing and DevOps. Keep experimenting, keep learning, and don’t hesitate to reach out with questions or feedback.

🚀 For more informative blog, Follow me on Hashnode, X(Twitter) and LinkedIn.

Till then, Happy coding!

Top comments (0)