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 flexible 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.

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 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 crée un bucket Cloud Storage et importe des éléments statiques à l'aide de la gcloud CLI:

  1. 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>

  2. Définissez la stratégie IAM pour qu'elle accorde un accès en lecture public aux éléments du bucket.

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

  3. 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

Diffuser des fichiers depuis une application est généralement simple. Cependant, vous devez tenir compte de quelques inconvénients :

  • Les requêtes sur les fichiers statiques peuvent utiliser des ressources normalement prévues pour les requêtes dynamiques.
  • Selon la configuration que vous utilisez, la diffusion de fichiers depuis une application peut générer une latence de réponse, ce qui peut également ralentir la création d'instances destinées à supporter la charge de travail.

Exemple de diffusion de fichiers statiques avec une application

Go

L'exemple suivant montre comment diffuser des fichiers statiques avec votre application. Vous pouvez utiliser l'exemple d'application de ce guide pour toute version compatible de Go en spécifiant la version de l'environnement d'exécution et le système d'exploitation dans votre fichier app.yaml.

Vous pouvez utiliser la commande http.FileServer ou http.ServeFile standard pour diffuser des fichiers directement à partir de votre application.


// Package static demonstrates a static file handler for App Engine flexible environment.
package main

import (
	"fmt"
	"net/http"

	"google.golang.org/appengine"
)

func main() {
	// Serve static files from "static" directory.
	http.Handle("/static/", http.FileServer(http.Dir(".")))

	http.HandleFunc("/", homepageHandler)
	appengine.Main()
}

const homepage = `<!doctype html>
<html>
<head>
  <title>Static Files</title>
  <link rel="stylesheet" type="text/css" href="/static/main.css">
</head>
<body>
  <p>This is a static file serving example.</p>
</body>
</html>`

func homepageHandler(w http.ResponseWriter, r *http.Request) {
	fmt.Fprint(w, homepage)
}

Java

L'exemple suivant montre comment diffuser des fichiers statiques avec votre application. Vous pouvez utiliser l'exemple d'application de ce guide pour toute version compatible de Java en spécifiant la version de l'environnement d'exécution et le système d'exploitation dans votre fichier app.yaml.

Le conteneur de servlets de l'environnement d'exécution Java utilise le descripteur de déploiement de votre application, qui correspond au fichier web.xml, pour mapper les URL sur les servlets, y compris les éléments statiques. Si vous ne spécifiez pas un fichier web.xml, un fichier par défaut mappe tout sur le servlet par défaut.

Dans cet exemple, ./src/main/webapp/index.html fait référence à une feuille de style diffusée à partir de /stylesheets/styles.css.

<!doctype html>
<html>
<head>
<title>Static Files</title>
<link rel="stylesheet" type="text/css" href="/stylesheets/styles.css">
</head>
<body>
  <p>This is a static file serving example.</p>
</body>
</html>

Le fichier styles.css se trouve à l'emplacement ./src/main/webapp/stylesheets/styles.css.

body {
  font-family: Verdana, Helvetica, sans-serif;
  background-color: #CCCCFF;
}

Vous pouvez configurer explicitement le traitement des fichiers statiques dans le fichier web.xml. Par exemple, si vous souhaitez mapper les requêtes de tous les fichiers portant l'extension .jpg, procédez comme suit :

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.jpg</url-pattern>
</servlet-mapping>

Si vous utilisez un framework Web, tel que Play, vous devez vous reporter à la documentation du framework sur les éléments statiques.

Node.js

L'exemple suivant montre comment diffuser des fichiers statiques avec votre application. Vous pouvez utiliser l'exemple d'application de ce guide pour toute version compatible de Node.js en spécifiant la version de l'environnement d'exécution et le système d'exploitation dans votre fichier app.yaml.

La plupart des frameworks Web permettent la diffusion de fichiers statiques. Dans cet exemple, l'application utilise le middleware express.static pour diffuser les fichiers du répertoire ./public vers l'URL /static.

'use strict';

const express = require('express');
const app = express();

app.set('view engine', 'pug');

// Use the built-in express middleware for serving static files from './public'
app.use('/static', express.static('public'));

app.get('/', (req, res) => {
  res.render('index');
});

// Start the server
const PORT = parseInt(process.env.PORT) || 8080;
app.listen(PORT, () => {
  console.log(`App listening on port ${PORT}`);
  console.log('Press Ctrl+C to quit.');
});

La vue fait référence à /static/main.css.

doctype html
html(lang="en")
  head
    title Static Files
    meta(charset='utf-8')
    link(rel="stylesheet", href="/static/main.css")
  body
    p This is a static file serving example.

La feuille de style elle-même est située à l'emplacement ./public/css, diffusé depuis /static/main.css.

body {
  font-family: Verdana, Helvetica, sans-serif;
  background-color: #CCCCFF;
}

D'autres frameworks Node.js, tels que Hapi, Koa et Sails, permettent généralement de diffuser des fichiers statiques directement depuis l'application. Reportez-vous à leur documentation pour découvrir comment configurer et utiliser des contenus statiques.

PHP

L'environnement d'exécution PHP exécute nginx pour diffuser votre application, qui est configurée pour diffuser les fichiers statiques du répertoire de projet. Vous devez déclarer la racine du document en spécifiant document_root dans votre fichier app.yaml. Vous pouvez utiliser l'exemple d'application de ce guide pour toute version compatible de PHP en spécifiant la version de l'environnement d'exécution et le système d'exploitation dans votre fichier app.yaml.

runtime: php
env: flex

runtime_config:
  document_root: web
  operating_system: ubuntu22
  runtime_version: 8.3

build_env_variables:
  NGINX_SERVES_STATIC_FILES: true

Python

L'exemple suivant montre comment diffuser des fichiers statiques avec votre application. Vous pouvez utiliser l'exemple d'application de ce guide pour toute version compatible de Python en spécifiant la version de l'environnement d'exécution et le système d'exploitation dans votre fichier app.yaml.

La plupart des frameworks Web permettent la diffusion de fichiers statiques. Dans cet exemple, l'application exploite la capacité intégrée de Flask à diffuser des fichiers se trouvant dans le répertoire ./static à partir de l'URL /static.

L'application inclut un affichage qui effectue le rendu du modèle. Flask diffuse automatiquement tout le contenu du répertoire ./static sans nécessiter de configuration supplémentaire.

import logging

from flask import Flask, render_template


app = Flask(__name__)


@app.route("/")
def hello():
    """Renders and serves a static HTML template page.

    Returns:
        A string containing the rendered HTML page.
    """
    return render_template("index.html")


@app.errorhandler(500)
def server_error(e):
    """Serves a formatted message on-error.

    Returns:
        The error message and a code 500 status.
    """
    logging.exception("An error occurred during a request.")
    return (
        f"An internal error occurred: <pre>{e}</pre><br>See logs for full stacktrace.",
        500,
    )


if __name__ == "__main__":
    # This is used when running locally. Gunicorn is used to run the
    # application on Google App Engine. See entrypoint in app.yaml.
    app.run(host="127.0.0.1", port=8080, debug=True)

Le modèle rendu par l'affichage comprend une feuille de style située dans /static/main.css.

<!doctype html>
<html>
<head>
  <title>Static Files</title>
  <!--
  Flask automatically makes files in the 'static' directory available via
  '/static'.
  -->
  <link rel="stylesheet" type="text/css" href="/static/main.css">
</head>
<body>
  <p>This is a static file serving example.</p>
</body>
</html>

La feuille de style se trouve à l'emplacement ./static/main.css.

body {
  font-family: Verdana, Helvetica, sans-serif;
  background-color: #CCCCFF;
}

D'autres frameworks Python, tels que Django, Pyramid et Bottle, permettent généralement de diffuser des fichiers statiques directement depuis l'application. Reportez-vous à leur documentation respective pour savoir comment configurer et utiliser des contenus statiques.

Ruby

La plupart des frameworks Web permettent la diffusion de fichiers statiques. L'exemple suivant montre comment diffuser des fichiers statiques avec votre application. Vous pouvez utiliser l'exemple d'application de ce guide pour toute version compatible de Ruby en spécifiant la version de l'environnement d'exécution et le système d'exploitation dans votre fichier app.yaml.

Sinatra

Le framework Web Sinatra diffuse par défaut les fichiers du répertoire ./public. Cette application inclut une vue qui fait référence à /application.css.

body {
  font-family: Verdana, Helvetica, sans-serif;
  background-color: #CCCCFF;
}

La feuille de style est située à l'emplacement ./public/application.css, diffusé depuis /application.css.

Ruby on Rails

Le framework Web Ruby on Rails diffuse par défaut les fichiers du répertoire ./public. Des fichiers JavaScript et CSS statiques peuvent également être générés par le pipeline d'éléments Rails.

Ces exemples d'applications contiennent une vue de mise en page qui inclut toutes les feuilles de style de l'application.

doctype html
html
  head
    title Serving Static Files
    link rel="stylesheet" href="/application.css"
    script src="/application.js"
  body
    p This is a static file serving example.

La feuille de style elle-même est un fichier .css situé à l'emplacement ./public/application.css.

body {
  font-family: Verdana, Helvetica, sans-serif;
  background-color: #CCCCFF;
}

Par défaut, les applications Rails ne génèrent et ne diffusent aucun élément statique lors de leur exécution en production.

L'environnement d'exécution Ruby exécute rake assets:precompile lors du déploiement pour générer des éléments statiques, et définit la variable d'environnement RAILS_SERVE_STATIC_FILES pour activer la diffusion de fichiers statiques en production.

.NET

L'exemple suivant montre comment diffuser des fichiers statiques avec votre application. Vous pouvez utiliser l'exemple d'application de ce guide pour toute version compatible de .NET en spécifiant la version de l'environnement d'exécution et le système d'exploitation dans votre fichier app.yaml.

<html>
<head>
    <meta charset="utf-8" />
    <title>Hello Static World</title>
</head>
<body>
    <p>This is a static html document.</p>
    <p><img src="trees.jpg" /></p>
</body>
</html>

Pour activer la diffusion de fichiers statiques, ajoutez :

app.UseDefaultFiles();
app.UseStaticFiles();

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.