Gestione dei file statici

Go Java Node.js PHP Python Ruby .NET Personalizzato

Spesso le applicazioni 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 Google Cloud come Cloud Storage, pubblicarli direttamente o utilizzare una rete di distribuzione dei contenuti (CDN) di terze parti.

Pubblicazione di file da Cloud Storage

Cloud Storage può ospitare asset statici per app web dinamiche. I vantaggi dell'utilizzo di Cloud Storage invece di pubblicare direttamente dall'app includono:

• Cloud Storage funziona essenzialmente come una content delivery network. Questo non richiede alcuna configurazione speciale, perché per impostazione predefinita qualsiasi oggetto di lettura pubblica viene memorizzato nella rete globale di Cloud Storage.
• Il carico della tua app verrà ridotto spostando la pubblicazione di asset statici su Cloud Storage. A seconda del numero di asset statici e della frequenza di accesso, questo può ridurre in modo significativo 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 per Cloud Storage idiomatico per archiviare e recuperare i 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, assegnare al bucket il nome dell'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 in modo da concedere l'accesso in lettura pubblico agli elementi del 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. In genere, il comando rsync è 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 risorse statiche tramite https://storage.googleapis.com/<var>your-bucket-name</var>/static/....

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

Pubblicazione di file da altri servizi Google Cloud

Puoi anche utilizzare Cloud CDN o altri servizi di archiviazione di Google Cloud.

Pubblicazione di file direttamente dall'app

La pubblicazione di file dalla tua app è in genere semplice, ma ci sono alcuni inconvenienti da considerare:

• Le richieste di file statici possono utilizzare risorse che altrimenti verrebbero utilizzate per le richieste dinamiche.
• A seconda della configurazione, l'elaborazione dei file dall'app può comportare una latenza di risposta, che può influire anche sul momento in cui vengono create nuove istanze per gestire il carico.

Nota: in ambienti di produzione, in genere è buona prassi pubblicare i contenuti statici separatamente dall'app, in Google Cloud o esternamente utilizzando una CDN di terze parti.

Esempio di pubblicazione di file statici con l'app

Vai

L'esempio seguente 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 il formato 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

L'esempio seguente mostra come pubblicare file statici con l'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 dei servlet del runtime Java utilizzerà il descrittore di deployment della tua app, il file web.xml, per mappare gli URL ai servlet, inclusi gli asset statici. Se non specifichi un valore web.xml, viene utilizzato un valore predefinito che mappa tutto al servlet predefinito.

In questo esempio, ./src/main/webapp/index.html si riferisce a una stilosheet pubblicata 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 in ./src/main/webapp/stylesheets/styles.css.

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

Puoi configurare esplicitamente il modo in cui i file statici vengono gestiti nel file web.xml. Ad esempio, se vuoi mappare le richieste per tutti i file con l'estensione .jpg:

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

Se utilizzi un framework web, come Play, dovrai fare riferimento alla documentazione del framework sugli asset statici.

Node.js

L'esempio seguente 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 express.static middleware 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 fa riferimento 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 all'indirizzo ./public/css, pubblicato 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. Consulta la loro documentazione per informazioni dettagliate su come configurare e utilizzare i contenuti statici.

PHP

Il runtime PHP esegue nginx per pubblicare l'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 riportata 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

L'esempio seguente mostra come pubblicare file statici con la tua app. Puoi utilizzare l'applicazione di esempio in questa guida per qualsiasi versione supportata di Python 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 serve automaticamente tutto ciò che si trova nella directory ./static senza alcuna 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 visualizzazione include un foglio di stile situato 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 il servizio di file statici direttamente dall'app. Consulta la loro 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. L'esempio seguente 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 e viene visualizzato 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 di asset 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.

La stessa intestazione 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 o 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

L'esempio seguente mostra come pubblicare file statici con l'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 di terze parti esterna per pubblicare i file statici e memorizzare nella cache le richieste dinamiche, ma la tua app potrebbe registrare un aumento della latenza e dei costi.

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