Stocker et diffuser des fichiers statiques

Les applications gèrent les requêtes dynamiques, mais elles doivent bien souvent également diffuser des fichiers statiques tels que JavaScript, des images et des CSS. Les applications de l'environnement standard peuvent diffuser des fichiers statiques à partir d'une solution Google Cloud telle que Cloud Storage, les diffuser directement, ou utiliser un réseau de diffusion de contenu (CDN) tiers.

Il peut s'avérer moins coûteux d'héberger votre site statique sur Google Cloud que d'utiliser un fournisseur d'hébergement classique, car Google Cloud propose une version gratuite.

Diffuser des fichiers depuis Cloud Storage

Cloud Storage peut héberger des éléments statiques destinés à des applications Web dynamiques. Utiliser Cloud Storage au lieu de diffuser directement depuis votre application présente quelques avantages, dont les suivants :

Cloud Storage fonctionne essentiellement comme un réseau de diffusion de contenu. Cette méthode ne nécessite aucune configuration spéciale, car, par défaut, tout objet lisible publiquement est mis en cache dans le réseau mondial de Cloud Storage.
La charge de votre application se trouve réduite lorsque la diffusion des éléments statiques est effectuée par le biais de Cloud Storage. Suivant le nombre d'éléments statiques à diffuser et la fréquence d'accès, cela peut réduire considérablement le coût d'exécution de l'application.
Les frais d'utilisation de la bande passante pour l'accès aux contenus sont souvent moins élevés avec Cloud Storage.

Vous pouvez importer vos éléments dans Cloud Storage à l'aide de la Google Cloud CLI ou de l'API Cloud Storage.

La bibliothèque cliente Google Cloud fournit un client idiomatique pour Cloud Storage, ce qui vous permet de stocker et de récupérer des données avec Cloud Storage dans une application App Engine.

Exemple de diffusion à partir d'un bucket Cloud Storage

Cet exemple simple crée un bucket Cloud Storage et importe des éléments statiques à l'aide de la gcloud CLI

Créez un bucket. Il est courant, mais pas obligatoire, de nommer votre bucket comme l'ID de votre projet. Le nom du bucket doit être unique.
```
gcloud storage buckets create gs://<var>your-bucket-name</var>
```

Définissez la stratégie IAM pour accorder un accès public en lecture aux éléments du bucket.

gcloud storage buckets add-iam-policy-binding gs://<var>your-bucket-name</var> --member=allUsers --role=roles/storage.objectViewer

Importez des éléments dans le bucket. La commande rsync est généralement la méthode la plus simple et la plus rapide pour importer et mettre à jour des éléments. Vous pouvez également utiliser la commande cp.
```
gcloud storage rsync ./static gs://<var>your-bucket-name</var>/static --recursive
```

Vous pouvez désormais accéder à vos éléments statiques via https://storage.googleapis.com/<var>your-bucket-name</var>/static/....

Pour savoir comment utiliser Cloud Storage pour diffuser des éléments statiques, y compris à partir d'un nom de domaine personnalisé, consultez la page Héberger un site Web statique.

Diffuser des fichiers à partir d'autres services Google Cloud

Vous avez également la possibilité d'utiliser Cloud CDN ou d'autres services de stockage Google Cloud.

Diffuser des fichiers directement à partir de votre application

Pour diffuser des fichiers statiques dans l'environnement standard, vous devez définir les gestionnaires dans votre fichier app.yaml à l'aide des éléments static_dir ou static_files.

Le contenu des fichiers ou des répertoires statiques n'est pas affecté par les paramètres de scaling de votre fichier app.yaml. Les requêtes adressées aux fichiers ou aux répertoires statiques sont traitées directement par l'infrastructure App Engine, et n'atteignent pas l'environnement d'exécution du langage de l'application.

Configurer les gestionnaires de fichiers statiques

Pour configurer votre application afin qu'elle diffuse le répertoire ./public depuis l'URL /static, vous devez définir un gestionnaire dans le fichier app.yaml.

Vous trouverez ci-dessous la procédure permettant de diffuser les fichiers statiques du répertoire ./public d'un exemple d'application. Le modèle de la page index.html de l'application indique au navigateur qu'il doit charger le fichier main.css, par exemple :

<link type="text/css" rel="stylesheet" href="/static/css/main.css">

Le répertoire ./public est défini dans l'élément static_dir du fichier app.yaml du projet :

handlers:
  - url: /favicon\.ico
    static_files: favicon.ico
    upload: favicon\.ico

  - url: /static
    static_dir: public

  - url: /.*
    secure: always
    redirect_http_response_code: 301
    script: auto

La section handlers de l'exemple ci-dessus gère trois formats d'URL :

Le gestionnaire /favicon.ico mappe une requête spécifique à /favicon.ico avec un fichier nommé favicon.ico dans le répertoire racine de l'application.
Le gestionnaire /static mappe les requêtes pour les URL commençant par /static. Lorsque App Engine reçoit une requête pour une URL commençant par /static, le reste du chemin est mappé avec les fichiers du répertoire ./public. Si un fichier approprié est détecté au sein du répertoire, son contenu est renvoyé au client.
Le gestionnaire /.* correspond à toutes les autres URL et les dirige vers votre application.

Les formats des chemins d'URL sont testés dans l'ordre dans lequel ils apparaissent dans le fichier app.yaml. Vous devez donc définir le schéma de vos fichiers statiques avant de spécifier le schéma /.*. Pour en savoir plus, consultez la documentation de référence sur app.yaml.

Notez que pour utiliser des gestionnaires statiques, vous devez spécifier l'élément entrypoint dans app.yaml ou indiquer un gestionnaire dont la propriété script est définie sur auto.

Diffuser à partir d'un réseau tiers de diffusion de contenu (CDN)

Vous pouvez utiliser n'importe quel CDN tiers externe pour diffuser vos fichiers statiques et mettre en cache les requêtes dynamiques, mais votre application risque de connaître une latence et des coûts accrus.

Pour améliorer les performances, vous devez utiliser un CDN tiers compatible avec CDN Interconnect.