Gestione dei file statici

Le applicazioni spesso devono pubblicare file statici come JavaScript, immagini e CSS, oltre a gestire le richieste dinamiche. Le app nell'ambiente flessibile possono pubblicare file statici da un'opzione come Cloud Storage, pubblicarli direttamente o utilizzare una rete di distribuzione dei contenuti (CDN) di terze parti. Google Cloud

Pubblicazione di file da Cloud Storage

Cloud Storage può ospitare asset statici per app web dinamiche. I vantaggi dell'utilizzo di Cloud Storage anziché del servizio diretto dalla tua app includono:

  • Cloud Storage funziona essenzialmente come una Content Delivery Network. Ciò non richiede alcuna configurazione speciale perché per impostazione predefinita qualsiasi oggetto leggibile pubblicamente viene memorizzato nella cache nella rete Cloud Storage globale.
  • Il carico dell'app verrà ridotto scaricando la pubblicazione di asset statici su Cloud Storage. A seconda del numero di asset statici che hai e della frequenza di accesso, questo può ridurre notevolmente il costo di esecuzione dell'app.
  • Gli addebiti per la larghezza di banda per l'accesso ai contenuti possono spesso essere inferiori con Cloud Storage.

Puoi caricare gli asset su Cloud Storage utilizzando Google Cloud CLI o l'API Cloud Storage.

La libreria client Google Cloud fornisce un client idiomatico per Cloud Storage, per archiviare e recuperare dati con Cloud Storage in un'app App Engine.

Esempio di pubblicazione da un bucket Cloud Storage

Questo esempio crea un bucket Cloud Storage e carica asset statici utilizzando gcloud CLI:

  1. Crea un bucket. È comune, ma non obbligatorio, denominare il bucket in base all'ID progetto. Il nome del bucket deve essere univoco a livello globale.

    gcloud storage buckets create gs://<var>your-bucket-name</var>

  2. Imposta il criterio IAM per concedere l'accesso in lettura pubblico agli elementi nel bucket.

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

  3. Carica gli elementi nel bucket. Il comando rsync è in genere il modo più rapido e semplice per caricare e aggiornare gli asset. Puoi anche utilizzare cp.

    gcloud storage rsync ./static gs://<var>your-bucket-name</var>/static --recursive

Ora puoi accedere alle tue risorse statiche tramite https://storage.googleapis.com/<var>your-bucket-name</var>/static/....

Per ulteriori dettagli su come utilizzare Cloud Storage per pubblicare asset statici, incluso come pubblicarli da un nome di dominio personalizzato, consulta Come ospitare un sito web statico.

File per la pubblicazione da altri Google Cloud servizi

Hai anche la possibilità di utilizzare Cloud CDN o altri servizi di archiviazione Google Cloud .

Pubblicare file direttamente dalla tua app

La pubblicazione di file dalla tua app è in genere semplice, tuttavia ci sono un paio di svantaggi da considerare:

  • Le richieste di file statici possono utilizzare risorse che altrimenti verrebbero utilizzate per richieste dinamiche.
  • A seconda della configurazione, la pubblicazione di file dalla tua app può comportare una latenza della risposta, che può influire anche sul momento in cui vengono create nuove istanze per la gestione del carico.

Esempio di pubblicazione di file statici con la tua app

Vai

Il seguente esempio mostra come pubblicare file statici con la tua app. Puoi utilizzare l'applicazione di esempio in questa guida per qualsiasi versione supportata di Go specificando la versione del runtime e il sistema operativo nel file app.yaml.

Puoi utilizzare lo standard http.FileServer o http.ServeFile per pubblicare file direttamente dalla tua app.


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

Il seguente esempio mostra come pubblicare file statici con la tua app. Puoi utilizzare l'applicazione di esempio in questa guida per qualsiasi versione supportata di Java specificando la versione del runtime e il sistema operativo nel file app.yaml.

Il contenitore servlet del runtime Java utilizzerà il descrittore di deployment, il file web.xml, della tua app per mappare gli URL alle servlet, incluse le risorse statiche. Se non specifichi un web.xml, viene utilizzato un valore predefinito che mappa tutto al servlet predefinito.

In questo esempio, ./src/main/webapp/index.html si riferisce a un foglio di stile pubblicato da /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>

Il file styles.css si trova all'indirizzo ./src/main/webapp/stylesheets/styles.css.

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

Puoi configurare esplicitamente la gestione dei file statici nel file web.xml. Ad esempio, se vuoi mappare le richieste per tutti i file con estensione .jpg:

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

Se utilizzi un framework web, ad esempio Play, dovrai consultare la documentazione del framework sugli asset statici.

Node.js

Il seguente esempio mostra come pubblicare file statici con la tua app. Puoi utilizzare l'applicazione di esempio in questa guida per qualsiasi versione supportata di Node.js specificando la versione del runtime e il sistema operativo nel file app.yaml.

La maggior parte dei framework web include il supporto per la pubblicazione di file statici. In questo esempio, l'applicazione utilizza il middleware express.static per pubblicare i file dalla directory ./public all'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 visualizzazione si riferisce a /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.

Il foglio di stile si trova in ./public/css, che viene servito da /static/main.css.

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

Altri framework Node.js, come Hapi, Koa e Sails in genere supportano la pubblicazione di file statici direttamente dall'applicazione. Per informazioni dettagliate su come configurare e utilizzare i contenuti statici, consulta la documentazione.

PHP

Il runtime PHP esegue nginx per pubblicare la tua app, che è configurata per pubblicare file statici nella directory del progetto. Devi dichiarare la radice del documento specificando document_root nel file app.yaml. Puoi utilizzare l'applicazione di esempio in questa guida per qualsiasi versione supportata di PHP specificando la versione del runtime e il sistema operativo nel file 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

Il seguente esempio mostra come pubblicare file statici con la tua app. Puoi utilizzare l'applicazione di esempio in questa guida per qualsiasi versione di Python supportata specificando la versione del runtime e il sistema operativo nel file app.yaml.

La maggior parte dei framework web include il supporto per la pubblicazione di file statici. In questo esempio, l'app utilizza la funzionalità integrata di Flask per pubblicare i file nella directory ./static dall'URL /static.

L'app include una visualizzazione che esegue il rendering del modello. Flask gestisce automaticamente tutto ciò che si trova nella directory ./static senza configurazione aggiuntiva.

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)

Il modello visualizzato dalla vista include un foglio di stile che si trova in /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>

Il foglio di stile si trova in ./static/main.css.

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

Altri framework Python, come Django, Pyramid e Bottle, in genere supportano la pubblicazione di file statici direttamente dall'app. Consulta la documentazione per informazioni dettagliate su come configurare e utilizzare i contenuti statici.

Ruby

La maggior parte dei framework web include il supporto per la pubblicazione di file statici. Il seguente esempio mostra come pubblicare file statici con la tua app. Puoi utilizzare l'applicazione di esempio in questa guida per qualsiasi versione supportata di Ruby specificando la versione del runtime e il sistema operativo nel file app.yaml.

Sinatra

Il framework web Sinatra serve i file dalla directory ./public per impostazione predefinita. Questa app include una visualizzazione che fa riferimento a /application.css.

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

Il foglio di stile si trova in ./public/application.css, che viene servito da /application.css.

Ruby on Rails

Il framework web Ruby on Rails serve i file dalla directory ./public per impostazione predefinita. I file JavaScript e CSS statici possono essere generati anche dalla pipeline delle risorse di Rails.

Queste app di esempio contengono una visualizzazione del layout che include tutti i fogli di stile dell'applicazione.

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.

Il foglio di stile è un file .css che si trova in ./public/application.css.

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

Per impostazione predefinita, le app Rails non generano né pubblicano asset statici quando vengono eseguite in produzione.

Il runtime Ruby esegue rake assets:precompile durante il deployment per generare asset statici e imposta la variabile di ambiente RAILS_SERVE_STATIC_FILES per attivare la pubblicazione di file statici in produzione.

.NET

Il seguente esempio mostra come pubblicare file statici con la tua app. Puoi utilizzare l'applicazione di esempio in questa guida per qualsiasi versione supportata di .NET specificando la versione del runtime e il sistema operativo nel file 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>

Per attivare la pubblicazione di file statici, aggiungi:

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

Pubblicazione da una rete CDN (Content Delivery Network) di terze parti

Puoi utilizzare qualsiasi CDN esterna di terze parti per pubblicare i tuoi file statici e memorizzare nella cache le richieste dinamiche, ma la tua app potrebbe riscontrare un aumento della latenza e dei costi.

Per migliorare le prestazioni, devi utilizzare una CDN di terze parti che supporti CDN Interconnect.