Heroku et Amazon S3, Déployer facilement votre projet Web

Dans ce tutoriel, nous apprendrons comment déployer un projet web en ligne grâce à Heroku et Amazon S3.

Création de compte heroku

Accès à Amazon S3 à partir d’un compte Amazon

Création des clés de connexion

Pour autoriser Heroku à récupérer les fichiers statiques depuis l’espace de stockage sur Amazon S3, nous devons préalablement générer une clé de connexion Amazon AWS.

Accédons à l’interface Amazon AWS.

Ensuite, cliquez sur “Continue to Security Credentials” -> “Access Keys” -> “Create Access Key”.

Une fois la clé de connexion créée, vous pouvez la télécharger.

Préparation du projet au déploiement

Installation du client heroku

Client Windows

Client Mac

Client Linux :

A copier/coller dans le terminal pour Linux

wget -O- https://toolbelt.heroku.com/install-ubuntu.sh | sh

Récupération du projet

Le projet de demo est disponible ici.

git clone https://github.com/Upid3v/flask-heroku-s3-tuto.git

Afin de pouvoir exécuter et tester le projet, installons les modules Python nécessaires.

pip install -r requirements.txt

A présent, connectons le projet à notre compte heroku.

$heroku login
Enter your Heroku credentials.
Email: python@example.com
Password:
...

Création de l’application

Créons maintenant une application sur Heroku pour supporter le déploiement.

$ heroku create <optional-name>

Puis, nous attachons le compte Amazon fraichement créé à Heroku grâce aux clés de connexion.

heroku config:set AWS_ACCESS_KEY_ID=xxx AWS_SECRET_ACCESS_KEY=yyy

Hébergement des fichiers statiques sur Amazon S3

Dans le but, d’héberger les fichiers statiques du projet, nous souhaitons créer un bucket ( espace de stockage) sur Amazon.

Depuis la page console de Amazon AWS, cliquez sur “S3” dans la catégorie “Storage & Content Delivery”.

Un moyen de paiement vous sera demandé, vous serez prélevé si vous dépasser les limites de l’offre gratuite ou si la période d’essai expire.

L’essai gratuit vous permet d’utiliser Amazon S3 en stockant 5GO maximum pendant 12 mois et accepte 20000 requêtes vers les fichiers stockés.

Une fois l’essai gratuit expiré, vous serez débité en fonction de votre utilisation du service.

	Stockage Standard	Stockage en accès Standard – Peu fréquent †	Stockage dans Glacier
Premier 1 To/mois	0.027€ par Go	0.011€ par Go	0.001€ par Go
49 To suivants par mois	0.027€ par Go	0.011€ par Go	0.001€ par Go
450 To suivants par mois	0.026€ par Go	0.011€ par Go	0.001€ par Go
500 To suivants par mois	0.026€ par Go	0.011€ par Go	0.001€ par Go
4 000 To suivants par mois	0.026€ par Go	0.011€ par Go	0.001€ par Go
Plus de 5 000 To/mois	0.025€ par Go	0.011€ par Go	0.001€ par Go

A présent, Cliquez sur “Create Bucket” et ajoutez s’y un nom.

Maintenant, uploadez le dossier static en gardant la même arborescence que dans le projet.

Autoriser l’accès des fichiers à un tiers

Les propriétés du bucket doivent être modifiés pour autoriser un tier à y accéder.

Cliquez sur le bucket puis sur “Properties” -> “Permissions” -> “Edit CORS Configuration” puis ajoutez le code suivant.
Par simplicité, n’importe qui pourra accéder aux ressources du projet.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

A présent, dans “Propriétés” -> “Static Website Hosting”, cochez “Enable website hosting” en précisant le endpoint dans IndexDocument ( ex: upidev.s3-website-us-east-1.amazonaws.com ).

Afin de rendre public vos fichiers statiques, la dernière modification consiste à faire un clique droit sur le dossier “static” et sélectionnez “Make Public”.

Les urls contenant url_for(‘static’,…) doivent être modifiées dans index.html pour pointer vers les fichiers statiques hébergés dans le bucket.

Indiquons à présent à notre application Héroku, le bucket à utiliser.

$ heroku config:set S3_BUCKET_NAME=bucket-name

Déploiement de l’application

On ajoute les changements à effectuer sur le repository git local.

git add .

Puis, on enregistre les modifications en local.

git commit -m "first commit heroku app"

Finalement, on pousse le repo local vers le repo distant.

git push heroku master

Une fois, le push effectué, vous pouvez insérer cette commande afin de tester le projet hébergé.

$ heroku open

Le tutoriel se termine, Félicitations !!, vous savez à présent héberger un projet web flask grâce à Héroku et Amazon S3.