Gestione dei file statici

Go Java Node.js PHP Python Ruby .NET Personalizzato

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 di Google Cloud come Cloud Storage, pubblicarli direttamente o utilizzare una rete CDN (Content Delivery Network) di terze parti.

File per la pubblicazione da Cloud Storage

Cloud Storage può ospitare asset statici per le app web dinamiche. I vantaggi di utilizzare Cloud Storage anziché pubblicare direttamente dall'app includono:

• Cloud Storage funziona essenzialmente come rete CDN (Content Delivery Network). Ciò non richiede una configurazione speciale perché, per impostazione predefinita, qualsiasi oggetto leggibile viene memorizzato nella cache della rete Cloud Storage globale.
• Il carico della tua app verrà ridotto riducendo il carico della pubblicazione degli asset statici in Cloud Storage. A seconda del numero di asset statici di cui disponi e della frequenza dell'accesso, ciò può ridurre notevolmente i costi di esecuzione dell'app.
• I costi della larghezza di banda per l'accesso ai contenuti spesso possono essere inferiori con Cloud Storage.

Puoi caricare gli asset in Cloud Storage utilizzando lo strumento a riga di comando gsutil o l'API Cloud Storage.

La libreria client di Google Cloud fornisce un client idiomatico per Cloud Storage, per l'archiviazione e il recupero di dati con Cloud Storage in un'app App Engine.

Esempio di gestione da un bucket Cloud Storage

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

1. Creare un bucket. È comune, ma non obbligatorio, assegnare al bucket il nome corrispondente all'ID progetto. Il nome del bucket deve essere univoco a livello globale.

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

2. Imposta l'ACL per concedere l'accesso in lettura agli elementi del bucket.

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

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

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

Ora puoi accedere ai tuoi asset statici tramite https://storage.googleapis.com/<your-bucket-name>/static/....

Per maggiori dettagli su come utilizzare Cloud Storage per gestire asset statici, incluso come pubblicare asset da un nome di dominio personalizzato, consulta l'articolo su come ospitare un sito web statico.

File per la pubblicazione da altri servizi Google Cloud

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

I file vengono pubblicati direttamente dall'app

La pubblicazione dei file dall'app è in genere molto semplice, ma esistono alcuni svantaggi che dovresti prendere in considerazione:

• Le richieste di file statici possono utilizzare risorse che altrimenti verrebbero utilizzate per le richieste dinamiche.
• A seconda della configurazione, la pubblicazione di file dall'app può comportare una latenza di risposta, che può influire anche sulla creazione di nuove istanze per la gestione del carico.

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

Esempio di pubblicazione di file statici con la tua app

Go

L'esempio seguente mostra come pubblicare file statici con la tua app per Go runtime versione 1.15 e precedenti e versione 1.18 e successive. Tieni presente che devi aggiornare app.yaml per utilizzare la nuova versione. Consulta Go runtime per ulteriori informazioni sull'utilizzo dei nuovi runtime.

Puoi utilizzare l'elemento standard http.FileServer o http.ServeFile per pubblicare file direttamente dalla tua app.

1.18 e versioni successive

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

// 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 per la versione 8 e la versione 11/17 del runtime Java. Tieni presente che devi aggiornare app.yaml per utilizzare la nuova versione. Consulta runtime Java per ulteriori informazioni sull'utilizzo dei nuovi runtime.

Il container servlet del runtime Java utilizzerà il descriptor di deployment, il file web.xml della tua app, per mappare gli URL ai servlet, compresi 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 un foglio di stile pubblicato da /stylesheets/styles.css.

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

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

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 vengono gestiti i file statici nel file web.xml. Ad esempio, se vuoi mappare le richieste per tutti i file che hanno l'estensione .jpg:

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

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

Node.js

Il seguente esempio mostra come pubblicare file statici con la tua app per il runtime Node.js 16 e versioni precedenti e 18 e successive. Tieni presente che devi aggiornare app.yaml per utilizzare la nuova versione. Per ulteriori informazioni sull'utilizzo dei nuovi runtime, consulta Runtime Node.js.

La maggior parte dei framework web supporta la pubblicazione di file statici. In questo esempio, l'applicazione utilizza il middleware express.static per gestire 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, pubblicato da /static/main.css.

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

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

PHP

Il runtime PHP esegue nginx per gestire l'app, configurata per gestire i file statici nella directory del progetto. Devi dichiarare la radice del documento specificando document_root nel file app.yaml:

runtime: php
env: flex

runtime_config:
  document_root: web

Python

Il seguente esempio mostra come pubblicare file statici con la tua app per il runtime Python 3.7 e versioni precedenti. Per Python versione 3.8 e successive, consulta la pagina relativa al runtime di Python per saperne di più sull'utilizzo delle versioni più recenti.

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

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

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 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 la pubblicazione di file statici direttamente dall'app. Consulta la relativa documentazione per maggiori dettagli su come configurare e utilizzare i contenuti statici.

Ruby

La maggior parte dei framework web supporta la pubblicazione di file statici. Il seguente esempio mostra come pubblicare file statici con la tua app per il runtime di Ruby per la versione 3.1 e precedenti e la versione 3.2. Tieni presente che devi aggiornare il file app.yaml per utilizzare la nuova versione. Per saperne di più sull'utilizzo dei nuovi runtime, consulta Runtime Ruby.

Sinatra

Per impostazione predefinita, il framework web Sinatra gestisce i file dalla directory ./public. 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 nel percorso ./public/application.css, pubblicato da /application.css.

Ruby on Rails

Per impostazione predefinita, il framework web Ruby on Rails gestisce i file dalla directory ./public. I file JavaScript e CSS statici possono essere generati anche dalla pipeline degli asset di Rails.

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

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

versione 3.1 e precedenti

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

Versione 3.2

Il foglio di stile è un file .css che si trova all'indirizzo ./public/application.css.

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

versione 3.1 e precedenti

Il foglio di stile è un file Sass che si trova in ./app/assets/stylesheets/main.css.sass.

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

Per impostazione predefinita, le app Rails non generano o pubblicano asset statici durante l'esecuzione 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 abilitare la pubblicazione di file statici in produzione.

.NET

L'esempio seguente mostra come pubblicare file statici con la tua app per il runtime .NET 3.1 e versioni precedenti e 6 e successive. Tieni presente che devi aggiornare il file app.yaml per utilizzare la nuova versione. Per saperne di più sull'utilizzo dei nuovi runtime, consulta Runtime.NET.

versione 6 e successive

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

versione 3.1 e precedenti

<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 gestire i file statici e memorizzare le richieste dinamiche nella cache, ma la tua app potrebbe riscontrare latenza e costi maggiori.

Per migliorare le prestazioni, utilizza una rete CDN di terze parti che supporta CDN Interconnect.