Serve Flask Static folder over AWS S3 Bucket



Serve Flask Static folder over AWS S3 Bucket

 

 

In a flask application, we all are familiar with Static folder, which is a location where we store all our static assets such as Javascript, CSS, images, etc.

In the early development phase, it’s easy to manage and handle files with the static folder, but as our application becomes more and more complex, we need a better content delivery system to provide a smooth and seamless experience.

So, I’ll give you a walkthrough that how you can serve all your static assets over S3 bucket and deliver all of your static content over Your platform securely.

Prerequisites

Before we start this guide, you should have

  • Please go to AWS and register for an AWS account, in case you already have one make sure you have verified it and added a payment method.
  • A flask application managed by git repository and make sure your repository is pushed to the remote origin and for more information how Git works, please visit Introduction to Git and GitHub and for developing a flask application step by step I’ll personally recommend this guide The Flask Mega-Tutorial.
  • AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY, which you can generate via applying for IAM user role and providing Full S3 Read, write and Access group policy (for more information go to https://aws.amazon.com/premiumsupport/knowledge-center/create-access-key/).

 

 

expedia

 

S3 Bucket

 

aws s3 bucket with objects

To upload your data (photos, videos, documents, etc.) to Amazon S3, you must first create an S3 bucket in one of the AWS Regions. You can then upload any number of objects to the bucket.

In terms of implementation, buckets and objects are resources, and Amazon S3 provides APIs for you to manage them. For example, you can create a bucket and upload objects using the Amazon S3 API. You can also use the Amazon S3 console to perform these operations. The console uses the Amazon S3 APIs to send requests to Amazon S3.

 

 

Creating a Bucket

first, go and login to your AWS Management console and switch to Services > Storage > S3.

 

amazon s3

services > Storage > S3

And over there you’ll find an option to Create Bucket, so click on that and continue

 

creating aws s3 bucket

Creating Bucket

Next, create a unique bucket name and select the region which is close to your target audience.

 

aws s3 bucket name and region configuration

Name and region

Now enable version-controlling and set permissions accordingly and at last, review all of your configuration and permissions.

 

aws s3 configuration

Configuration

 

aws s3 permissions

Set permissions review

Congratulations!, you have successfully created your S3 bucket ready to serve static asset to your flask application. Now let’s move on and see how to configure and link your bucket with your flask application.

Nu je plus

Flask-S3

Flask-S3 allows you to efficiently serve all your Flask application’s static assets from Amazon S3, without having to modify your templates.

How it works

Flask-S3 has two main functions:

  • Walkthrough, your application’s static folders, gather all your static assets together, and upload them to a bucket of your choice on S3;
  • Replace the URLs that Flask’s flask.url_for() the function would insert into your templates, with URLs that point to the static assets in your S3 bucket.

The process of gathering and uploading your static assets to S3 need only be done once, and your application does not need to be running for it to work. The location of the S3 bucket can be inferred from Flask-S3 settings specified in your Flask application; therefore, when your application is running, there need not be any communication between the Flask application and Amazon S3.

Internally, every time is called in one of your application’s templates, flask_s3.url_for is instead invoked. If the endpoint provided is deemed to refer to static assets, then the S3 URL for the asset specified in the argument is instead returned. Otherwise, flask_s3.url_for it passes the call on to flask.url_for.

Installation

If you use pip, then the installation is:

$ pip install flask-s3

or, if you want the latest GitHub version:

$ pip install git+git://github.com/e-dard/flask-s3.git

You can also install Flask-S3 via Easy Install:

$ easy_install flask

Using Flask-S3

Flask-S3 is incredibly simple to use. To start serving your Flask application’s assets from Amazon S3, First thing you need to do is configure your flask application with the following variables in config.py.

#Config.py
class Config:
....
    AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
    AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')
    ACL = 'public-read'
    FLASKS3_BUCKET_NAME = os.environ.get('FLASKS3_BUCKET_NAME')
    FLASKS3_REGION = os.environ.get('FLASKS3_REGION') 
.......

AWS_ACCESS_KEY_ID: Your AWS access key. This does not need to be stored in your configuration if you choose to pass it directly when uploading your assets.

AWS_SECRET_ACCESS_KEY: Your AWS secret key. As with the access key, this need not be stored in your configuration if passed in to create_all.

ACL: Reading Mode.

FLASKS3_BUCKET_NAME: The desired name for your Amazon S3 bucket. Note: the name will be visible in all your assets’ URLs.

FLASKS3_REGION: The AWS region to host the bucket in; An empty string indicates the default region should be used, which is the US Standard region. Possible location values include: 'DEFAULT''EU''USWest''APSoutheast'

Second, let’s Flask-S3 know about you flask.Flask application object.

from flask import Flask
from flask_s3 import FlaskS3app = Flask(__name__)
app.config['FLASKS3_BUCKET_NAME'] = 'mybucketname'
s3 = FlaskS3(app)

In many cases, however, one cannot expect a Flask instance to be ready at import time, and a common pattern is to return a Flask instance from within a function only after other configuration details have been taken care of. In these cases, Flask-S3 provides a simple function, init_app, which takes your application as an argument.

from flask import Flask
from flask_s3 import FlaskS3s3 = FlaskS3()def start_app():
    app = Flask(__name__)
    s3.init_app(app)
    return app

In terms of getting your application to use external Amazon S3 URLs when referring to your application’s static assets, passing your Flask object to the FlaskS3 An object is all that needs to be done. Once your app is running, any templates that contained relative static asset locations will instead provide hosted counterparts on Amazon S3.

Uploading your Static Assets

You only need to upload your static assets to Amazon S3 once. Of course, if you add or modify your existing assets, then you will need to repeat the uploading process.

Uploading your static assets from a Python console is as simple as follows.

>>> import flask_s3
>>> from my_application import app
>>> flask_s3.create_all(app)
>>>
  • Note: when we upload our static folder to our s3 bucket without defining the content type then it explicitly define all files content type as binary, due to which we’ll not be able to load those files in our application. So, to avoid that situation define the content type before uploading or, go to each file and edit its metadata and define its content type ( for more information about content type, please go to https://s3browser.com/features-content-mime-types-editor.aspx).

Flask-S3 will proceed to walk through your application’s static assets, including those belonging to registered blueprints, and upload them to your Amazon S3 bucket.

sarenza

Static Asset URLs

Within your bucket on S3, Flask-S3 replicates the static file hierarchy defined in your application object and any registered blueprints. URLs generated by Flask-S3 will look like the following:

/static/foo/style.cssbecomeshttps://mybucketname.s3.amazonaws.com/static/foo/style.css, assuming that mybucketname is the name of your S3 bucket, and you have chosen to have assets served over HTTPS.

THAT’S ALL

Congratulations!, Now your application is serving all of your static assets over your s3 bucket, now I recommend you to take a local backup of your static folder and delete it from the application directory.

I’ll soon release its next part in which we will see how to link a content delivery network with the existing s3 bucket.

If you run into any problems google the service you were working with (S3 Bucket, Flask S3, etc.) or drop a comment below.

If you like this blog, please do share with your friends and help more people and if you have any questions or queries, please do let me know in the comment section I’ll try my best to get back to you as soon as possible.

THANKYOU!

wiggle sale



Latest posts

AI tools and techniques in Semantic SEO

Semantic SEO are the techniques in search engine optimization which enables the search query to provide meaningful results to the user by understanding the intent behind that query

How AI is Demystifying Traditional SEO Ranking Factors in 2020?

AI is demystifying traditional claims and opinions on 200 Google SEO ranking factors in 2020. Modern-day SEO uses AI tools and techniques in automated content creation, crawling, indexing, semantic topic modeling using word embeddings to enhancing the user experience by page-layout algorithms.  

Top 16 strategic steps in eCommerce SEO and keyword research in 2019

Combine AI tools and techniques in eCommerce SEO with automated content creation and keyword research for eCommerce SEO.

Top 10 AI tools and techniques for automated content creation for SEO in 2019

The essential and ultimate guide to the best top 10 AI tools and techniques to create automated content for digital marketing SEO.

Wordpress Alternative in 2019 | Python Web Development vs PHP web development

WordPress SEO plugins are not so good and people are looking for a WordPress alternative in 2019. Like Python Web Development vs PHP Web Development! What's better, flexible and easy. Let's find out.

Django vs Flask and python based web development in 2019

Django, flask, and CherryPy are one of the best Frameworks for Web Development, so let's try to understand and figure out where Django and flask stands in 2019

Top 8 Factors and Top 8 Solutions for Local SEO in Digital Marketing

We provide top 8 factors which impact search engine results for local SEO based and top 8 solutions to rank your website on the first page of the search engine in 2019.


Coursera: Build New Skills Anytime, Anywhere with 100% online courses. Start Now!