Diffuser des fichiers statiques

Go Java Node.js PHP Python Ruby .NET Personnalisé

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 l'outil de ligne de commande gsutil 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 Google Cloud 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.

   gsutil mb gs://<your-bucket-name>
   

2. Configurez la LCA pour qu'elle accorde l'accès en lecture aux éléments du bucket.

   gsutil defacl set public-read gs://<your-bucket-name>
   

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.

   gsutil -m rsync -r ./static gs://<your-bucket-name>/static
   

Vous pouvez désormais accéder à vos éléments statiques via https://storage.googleapis.com/<your-bucket-name>/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.

Remarque : Dans les environnements de production, il est généralement recommandé de diffuser le contenu statique indépendamment de l'application, que ce soit dans Google Cloud ou en externe à l'aide d'un CDN tiers.

Exemple de diffusion de fichiers statiques avec une application

Go

L'exemple suivant montre comment diffuser des fichiers statiques avec votre application pour l'environnement d'exécution Go version 1.15 ou antérieure, et la version 1.18 et ultérieure. Notez que vous devez mettre à jour votre fichier app.yaml pour utiliser la nouvelle version. Pour en savoir plus sur l'utilisation des nouveaux environnements d'exécution, consultez la page Environnement d'exécution Go.

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

Versions 1.18 et ultérieures

// 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)
}

v1.15 et versions précédentes

// 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 pour les versions 8 et 11/17 de l'environnement d'exécution Java. Notez que vous devez mettre à jour votre fichier app.yaml pour utiliser la nouvelle version. Pour en savoir plus sur l'utilisation des nouveaux environnements d'exécution, consultez la page Environnement d'exécution Java.

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.

version 11/17

<!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>

version 8

<!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 pour les versions 16 et antérieures, et les versions 18 et ultérieures, de l'environnement d'exécution Node.js. Notez que vous devez mettre à jour votre fichier app.yaml pour utiliser la nouvelle version. Pour en savoir plus sur l'utilisation des nouveaux environnements d'exécution, consultez la page Environnement d'exécution Node.js.

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 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 la diffusion de 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 :

runtime: php
env: flex

runtime_config:
  document_root: web

Python

L'exemple suivant montre comment diffuser des fichiers statiques avec votre application dans les versions 3.7 et antérieures de l'environnement d'exécution Python. Pour les versions 3.8 et ultérieures de Python, consultez la page Environnement d'exécution Python pour en savoir plus sur l'utilisation des versions plus récentes.

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 est située à 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 l'application pour l'environnement d'exécution Ruby pour les versions 3.1 et antérieures, et pour la version 3.2. Notez que vous devez mettre à jour votre fichier app.yaml pour utiliser la nouvelle version. Pour en savoir plus sur l'utilisation des nouveaux environnements d'exécution, consultez la page Environnement d'exécution Ruby.

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 d'application:

version 3.2

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.

Versions 3.1 et antérieures

doctype html
html
  head
    title Serving Static Files
    = stylesheet_link_tag "application", media: "all"
    = javascript_include_tag "application"
    = csrf_meta_tags
  body
    = yield

version 3.2

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;
}

Versions 3.1 et antérieures

La feuille de style elle-même est un fichier Sass situé à l'emplacement ./app/assets/stylesheets/main.css.sass.

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 dans les versions 3.1 ou antérieures et les versions 6 et ultérieures de l'environnement d'exécution .NET. Notez que vous devez mettre à jour votre fichier app.yaml pour utiliser la nouvelle version. Pour en savoir plus sur l'utilisation des nouveaux environnements d'exécution, consultez la page Environnement d'exécution .NET.

versions 6 et ultérieures

<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();

Versions 3.1 et antérieures

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