• 20 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 03/04/2018

TP : le Cloud Uploader

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Nous avons découvert ensemble S3 et vu combien il était simple d'ajouter des fichiers et de les télécharger. Puis, nous avons découvert les règles d'accès à S3 et... vu combien c'était compliqué. 😅

Je vous propose de mettre tout ça en pratique à travers un petit TP : le Cloud Uploader. Nous allons imiter ce que la plupart des webmasters font au début avec S3 : un bucket qui permet de stocker tous les uploads de nos visiteurs sur notre site.

Pourquoi ne pas stocker les uploads du site sur le serveur EC2 ?

Parce que ce n'est vraiment pas pratique. Si vous changez de serveur, il faudrait sauvegarder les données et les transférer. Et si vous avez 2 serveurs, parce que votre trafic a augmenté, sur quel serveur laisseriez-vous les uploads ?

S3 répond à ce problème de façon efficace. 🙂

Installation du SDK

Pour accéder à S3, je vous invite à télécharger le SDK d'AWS, qui simplifie l'accès à AWS depuis votre code source.

Le SDK est disponible pour de nombreux langages : C++, Go, Java, JavaScript, Python, Ruby... et PHP. Je vais ici partir sur PHP qui est le langage que je pratique le plus couramment, mais vous verrez que la méthode est pratiquement la même si vous utilisez un autre langage.

Commencez donc par télécharger le SDK AWS pour PHP. On vous propose plusieurs méthodes : Composer, Phar ou... ZIP. Si vous avez l'habitude de Composer, utilisez cette méthode car elle facilite grandement la gestion des bibliothèques.

Pour des raisons de simplicité, et pour éviter de perdre du monde, je vais partir sur le fichier ZIP à télécharger.

Création d'un utilisateur IAM

Pour utiliser le SDK, il faudra se connecter avec une clé API. Pour obtenir cette clé, il faut impérativement créer un utilisateur avec le service IAM.

IAM permet de gérer les utilisateurs qui ont accès à son compte AWS.

Rendez-vous sur IAM pour créer un nouvel utilisateur :

IAM permet de créer un nouvel utilisateur
IAM permet de créer un nouvel utilisateur

Donnez un nom à cet utilisateur et autorisez-le au moins à accéder à AWS par programmation (vu qu'il ne nous servira qu'à ça, pas besoin de lui ouvrir un accès web à la console) :

Autorisez votre utilisateur à accéder à AWS par programmation
Autorisez votre utilisateur à accéder à AWS par programmation

Ensuite, il faudra donner des droits à cet utilisateur. Pour cela, on vous propose de le rattacher un groupe. Pas de bol, vous n'en avez pas. Il va falloir en créer un :

Il faut créer un groupe pour donner des droits à l'utilisateur
Il faut créer un groupe pour donner des droits à l'utilisateur

On va rester très simple ici et créer un groupe "admin" avec des droits d'admin. Cet utilisateur peut donc tout faire.

Nous créons un groupe admin avec des droits d'admin
Nous créons un groupe admin avec des droits d'admin

Enfin, l'utilisateur est créé et vous pouvez afficher les informations qui nous intéressent :

Super, nous pouvons récupérer les codes d'accès de cet utilisateur
Super, nous pouvons récupérer les codes d'accès de cet utilisateur !

L'ID de clé d'accès et la clé d'accès secrète sont les 2 informations dont vous avez besoin pour vous connecter à AWS depuis votre programme.

Il y a plusieurs façons de stocker ces identifiants pour vous connecter. La plus pratique et la plus sûre, à mon sens, consiste à créer un fichier ini placé dans votre dossier home à l'emplacement suivant :  ~/.aws/credentials  . Ce fichier contiendra vos clés comme ceci :

[default]
aws_access_key_id = VOTRE_ACCESS_KEY
aws_secret_access_key = VOTRE_SECRET_ACCESS_KEY

Le fichier est prêt ? Super ! On va pouvoir commencer à programmer !

Développement du projet

Nous allons créer un projet avec :

  • index.php  : la page d'accueil qui affiche un formulaire d'envoi de fichier.

  • upload.php  : la page qui fait l'envoi du fichier (c'est elle qui communique avec S3) et qui affiche ensuite le lien du fichier uploadé.

  • aws/  : le dossier du SDK d'AWS que vous avez dû télécharger.

index.php

La page du formulaire, index.php, contiendra un simple formulaire d'envoi de fichier :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Cloud Uploader</title>
    </head>

    <body>
        <h1>Bienvenue dans le Cloud Uploader</h1>
        <p>Qu'allez-vous uploader aujourd'hui ?</p>

        <form method="post" action="upload.php" enctype="multipart/form-data">
            <p><input type="file" name="uploadfile" /></p>
            <p><input type="submit" value="Uploadez-moi !" /></p>
        </form>
    </body>
</html>

Ici donc, rien de spécial !

upload.php

C'est là que ça devient intéressant. Voici le code, on va le commenter :

<?php
require 'aws/aws-autoloader.php';

use Aws\S3\S3Client;

// TODO : indiquez le nom de votre bucket
$bucket = 'mateotestbucket';
                        
// TODO : les accès à AWS doivent déjà être configurés dans un fichier .ini sur votre machine
// Voir : https://docs.aws.amazon.com/aws-sdk-php/v3/guide/guide/credentials.html#credential-profiles


$s3 = new S3Client([
        // TODO : indiquez le nom de la région de votre bucket S3
        // Voir : https://docs.aws.amazon.com/fr_fr/general/latest/gr/rande.html
        'region' => 'us-east-2',
        'version' => '2006-03-01'
    ]);


// Envoi du fichier
$result = $s3->putObject(array(
    'Bucket' => $bucket,
    'Key'    => time() . '_' . $_FILES['uploadfile']['name'],
    'SourceFile' => $_FILES['uploadfile']['tmp_name'],
));

echo '<p>Fichier uploadé !</p>';
echo '<p><a href="' . $result['ObjectURL'] . '">' . $result['ObjectURL'] . '</a></p>';
echo '<p><img src="' . $result['ObjectURL'] . '" alt="" /></p>';

Voici ce que fait ce code :

  1. Il charge le SDK de AWS (qui doit ici être dans un sous-dossier "aws").

  2. Il se connecte à S3, sur la région us-east-2 (c'est là où j'ai créé mon bucket). Adaptez le nom de la région si vous avez créé votre bucket ailleurs.
    Notez que les identifiants de connexion ne sont pas dans le code source pour des raisons de sécurité. Ils sont dans le fichier "credentials" que je vous ai fait créer tout à l'heure.

  3. Il envoie le fichier dans le bucket indiqué. La clé "Key" indique le nom qu'aura le fichier sur S3. J'ai choisi pour ma part de prendre le timestamp actuel (via  time()  ) puis de lui ajouter le nom de fichier d'origine. Cela évite que 2 fichiers aient le même nom. Vous pouvez évidemment changer ça si vous voulez.

  4. Il affiche enfin un lien vers le fichier uploadé sur S3.

Le code est finalement plutôt simple et court comme vous le voyez !

Testons !

Il ne reste plus qu'à admirer notre oeuvre :

Page d'accueil du Cloud Uploader
Page d'accueil du Cloud Uploader

Un tel design vous laisse sans voix ? Comme je vous comprends. Mais ici, je rappelle qu'on veut surtout vérifier que ça marche. 😉

Je vais donc sélectionner un fichier sur mon ordinateur et l'envoyer. Si tout se passe bien, la page suivante affiche un lien vers le fichier et tente d'afficher l'image dans la page (si c'était une image).

Notre fichier a été uploadé sur le cloud !
Notre fichier a été uploadé sur le cloud !

Et voilà ! Notre fichier est maintenant hébergé dans le cloud AWS grâce à S3. Good job les amis ! 😎

J'ai tout fait comme tu m'as dit mais le fichier ne s'affiche pas !

Vérifiez que le bucket autorise bien tout le monde à lire les fichiers (le bucket doit être public). Modifiez au besoin sa policy, comme vous avez appris à le faire maintenant.

Exemple de certificat de réussite
Exemple de certificat de réussite