Gestione dei file statici

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

Pubblicare file da Cloud Storage

Cloud Storage può ospitare asset statici per le app web dinamiche. I vantaggi dell'utilizzo di Cloud Storage anziché della pubblicazione diretta dall'app includono:

• Cloud Storage funziona essenzialmente come una rete CDN (Content Delivery Network). Non è necessaria alcuna configurazione speciale perché, per impostazione predefinita, qualsiasi oggetto leggibile pubblicamente viene memorizzato nella cache della 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 e della frequenza di accesso, questo può ridurre notevolmente il costo di esecuzione dell'app.
• Le tariffe della larghezza di banda per l'accesso ai contenuti possono spesso essere inferiori con Cloud Storage.

Puoi caricare i tuoi asset in Cloud Storage utilizzando la Google Cloud CLI o l'API Storage.

La libreria client Google Cloud fornisce un client idiomatico per Cloud Storage, 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 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 ai tuoi asset statici 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 pubblicare da un nome di dominio personalizzato, consulta Come ospitare un sito web statico.

Pubblicare file da altri Google Cloud servizi

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

Pubblicare file direttamente dall'app

La pubblicazione di file dall'app è in genere semplice, tuttavia ci sono un paio di inconvenienti da considerare:

• 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 è una best practice 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 l'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 i file direttamente dall'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 container servlet del runtime Java utilizzerà il descrittore di deployment, web.xml file, per mappare gli URL ai servlet, inclusi gli asset statici. 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 in ./src/main/webapp/stylesheets/styles.css.

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

Puoi configurare in modo esplicito la gestione dei file statici nel file web.xml. Ad esempio, se vuoi mappare le richieste di 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

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 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 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 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 documentazione per i dettagli su come configurare e utilizzare i contenuti statici.

PHP

Il runtime PHP esegue nginx per erogare l'app, che è configurata per erogare file statici in your project directory. Devi dichiarare la directory principale 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

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 Python specificando la versione del runtime e il sistema operativo in your app.yaml file.

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 pubblica automaticamente tutti i contenuti 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 di cui è stato eseguito il rendering dalla visualizzazione 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 i dettagli 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 l'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 pubblica 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 pubblicato da /application.css.

Ruby on Rails

Il framework web Ruby on Rails pubblica i file dalla directory ./public per impostazione predefinita. 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.

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 .css file 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 abilitare 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 abilitare la pubblicazione di file statici, aggiungi:

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

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

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

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