Statische Dateien bereitstellen

Go Java Node.js PHP Python Ruby .NET Benutzerdefiniert

Anwendungen müssen über die Verarbeitung von dynamischen Anfragen hinaus häufig auch statische Dateien wie JavaScript, Bilder und CSS bereitstellen. Anwendungen in der flexiblen Umgebung können statische Dateien aus einer Google Cloud-Option wie Cloud Storage bereitstellen, sie direkt bereitstellen oder ein Content Delivery Network (CDN) eines Drittanbieters verwenden.

Dateien über Cloud Storage bereitstellen

In Cloud Storage können statische Inhalte für dynamische Webanwendungen gehostet werden. Die Verwendung von Cloud Storage anstelle der direkten Bereitstellung aus der Anwendung bietet folgende Vorteile:

• Cloud Storage funktioniert im Wesentlichen wie ein Content Delivery Network. Eine spezielle Konfiguration ist dazu nicht erforderlich, da öffentlich lesbare Objekte standardmäßig im Cache des globalen Cloud Storage-Netzwerks gespeichert werden.
• Ihre Anwendung wird dadurch entlastet, dass die Bereitstellung statischer Inhalte an Cloud Storage übergeben wird. Je nach Umfang der statischen Inhalte und Häufigkeit der Zugriffe können sich dadurch die Kosten für die Ausführung Ihrer Anwendung erheblich reduzieren.
• Die Bandbreitengebühren für den Zugriff auf Inhalte können bei Cloud Storage oft geringer ausfallen.

Sie können Ihre Assets mit dem gsutil-Befehlszeilentool oder der Cloud Storage API in Cloud Storage hochladen.

Die Google Cloud-Clientbibliothek stellt einen idiomatischen Client für Cloud Storage zum Speichern und Abrufen von Daten mit Cloud Storage in einer App Engine-Anwendung bereit.

Beispiel für die Bereitstellung über einen Cloud Storage-Bucket

In diesem einfachen Beispiel werden ein Cloud Storage-Bucket erstellt und statische Assets mithilfe der Google Cloud CLI hochgeladen:

1. Erstellen Sie einen Bucket. Es ist üblich, aber nicht erforderlich, dass Sie Ihren Bucket nach Ihrer Projekt-ID benennen. Der Bucket-Name darf global nur einmal vorkommen.

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

2. Legen Sie in der ACL Lesezugriff auf Elemente im Bucket fest.

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

3. Laden Sie Elemente in den Bucket hoch. Am schnellsten und einfachsten lassen sich Inhalte in der Regel mit dem Befehl rsync hochladen und aktualisieren. Mit cp ist dies ebenfalls möglich.

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

Sie können jetzt über https://storage.googleapis.com/<your-bucket-name>/static/... auf Ihre statischen Inhalte zugreifen.

Weitere Informationen zur Bereitstellung statischer Inhalte über Cloud Storage, einschließlich der Bereitstellung über einen benutzerdefinierten Domainnamen, finden Sie unter Statische Website hosten.

Dateien aus anderen Google Cloud-Diensten bereitstellen

Sie können auch Cloud CDN oder andere Google Cloud-Speicherdienste verwenden.

Dateien direkt aus der Anwendung bereitstellen

Die Bereitstellung von Dateien aus der Anwendung ist in der Regel unkompliziert. Es gibt jedoch einige Nachteile, die Sie beachten sollten:

• Bei Anfragen für statische Dateien können Ressourcen verwendet werden, die andernfalls für dynamische Anfragen zur Verfügung stehen würden.
• Je nach Konfiguration kann das Bereitstellen von Dateien aus der Anwendung zu einer Antwortlatenz führen, die sich auch auf die Erstellung neuer Instanzen für die Lastverarbeitung auswirken kann.

Hinweis: In Produktionsumgebungen empfiehlt es sich im Allgemeinen, die statischen Inhalte getrennt von der Anwendung entweder in Google Cloud oder extern über das CDN eines Drittanbieters bereitzustellen.

Beispiel für das Bereitstellen statischer Dateien mit einer Anwendung

Einfach loslegen (Go)

Das folgende Beispiel zeigt, wie Sie mit Ihrer Anwendung statische Dateien für die Go-Laufzeitversion 1.15 und früher und Version 1.18 und höher bereitstellen. Beachten Sie, dass Sie app.yaml aktualisieren müssen, um die neue Version zu verwenden. Weitere Informationen zur Verwendung der neuen Laufzeiten finden Sie unter Go-Laufzeit.

Sie können entweder die Standarddatei http.FileServer oder http.ServeFile verwenden, um Dateien direkt über Ihre App bereitzustellen.

v1.18 und höher

// 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 und älter

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

Das folgende Beispiel zeigt, wie Sie mit Ihrer Anwendung statische Dateien für die Java-Laufzeitversion 8 und 11/17 bereitstellen. Beachten Sie, dass Sie app.yaml aktualisieren müssen, um die neue Version zu verwenden. Weitere Informationen zur Verwendung der neuen Laufzeiten finden Sie unter Java-Laufzeit.

Der Servlet-Container der Java-Laufzeit verwendet den Deployment-Deskriptor der Anwendung (die Datei web.xml), um URLs Servlets zuzuordnen, einschließlich statischer Inhalte. Wenn Sie kein web.xml angeben, wird ein Standardwert verwendet, der dem Standard-Servlet alles zuordnet.

In diesem Beispiel bezieht sich ./src/main/webapp/index.html auf ein Stylesheet, das von /stylesheets/styles.css bereitgestellt wird.

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>

Die Datei styles.css befindet sich unter ./src/main/webapp/stylesheets/styles.css.

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

Sie können explizit konfigurieren, wie statische Dateien in der Datei web.xml verarbeitet werden. Wenn Sie beispielsweise Anfragen für alle Dateien mit der Erweiterung .jpg zuordnen möchten:

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

Wenn Sie ein Web-Framework wie Play verwenden, müssen Sie sich auf die Dokumentation des Frameworks zu statischen Inhalten beziehen.

Node.js

Das folgende Beispiel zeigt, wie Sie mit Ihrer Anwendung statische Dateien für Node.js-Laufzeitversion 16 und früher sowie Version 18 und höher bereitstellen. Beachten Sie, dass Sie app.yaml aktualisieren müssen, um die neue Version zu verwenden. Weitere Informationen zur Verwendung der neuen Laufzeiten finden Sie unter Node.js-Laufzeit.

Die meisten Web-Frameworks bieten Unterstützung für das Bereitstellen von statischen Dateien. In diesem Beispiel verwendet die Anwendung die Middleware express.static, um Dateien aus dem Verzeichnis ./public für die URL /static bereitzustellen.

'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.');
});

Die Ansicht bezieht sich auf /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.

Das Stylesheet selbst befindet sich unter ./public/css, aus /static/main.css bereitgestellt wird.

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

Andere Node.js-Frameworks wie Hapi, Koa und Sails unterstützen in der Regel das Bereitstellen statischer Dateien direkt aus der Anwendung. Details zur Konfiguration und Verwendung von statischen Inhalten finden Sie in der entsprechenden Dokumentation.

PHP

Innerhalb der PHP-Laufzeit wird zum Bereitstellen Ihrer Anwendung nginx ausgeführt. Damit lassen sich in Ihrem Projektverzeichnis statische Dateien bereitstellen. Geben Sie zum Deklarieren des Dokumentenstamms document_root in der Datei app.yaml an:

runtime: php
env: flex

runtime_config:
  document_root: web

Python

Das folgende Beispiel zeigt, wie Sie mit Ihrer Anwendung statische Dateien für die Python-Laufzeitversion 3.7 und früher bereitstellen. Weitere Informationen zur Verwendung neuerer Versionen für Python Version 3.8 und höher finden Sie unter Python-Laufzeit.

Die meisten Web-Frameworks bieten Unterstützung für das Bereitstellen von statischen Dateien. In diesem Beispiel verwendet die Anwendung die integrierte Funktion von Flask zum Bereitstellen von Dateien im ./static-Verzeichnis von der /static-URL.

Die Anwendung enthält eine Ansicht, die die Vorlage rendert. Flask stellt ohne zusätzliche Konfiguration automatisch alles im Verzeichnis ./static bereit.

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)

Die von der Ansicht gerenderte Vorlage enthält ein Stylesheet, das sich unter /static/main.css befindet.

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

Das Stylesheet befindet sich unter ./static/main.css.

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

Andere Python-Frameworks wie Django, Pyramid und Bottle unterstützen in der Regel die Bereitstellung statischer Dateien direkt über die Anwendung. Weitere Informationen zur Konfiguration und Verwendung statischer Inhalte finden Sie in der jeweiligen Dokumentation.

Ruby

Die meisten Web-Frameworks bieten Unterstützung für das Bereitstellen von statischen Dateien. Das folgende Beispiel zeigt, wie Sie mit Ihrer Anwendung statische Dateien für die Ruby-Laufzeit für Version 3.1 und frühere Versionen und Version 3.2 bereitstellen. Beachten Sie, dass Sie Ihre app.yaml-Datei aktualisieren müssen, um die neue Version zu verwenden. Weitere Informationen zur Verwendung der neuen Laufzeiten finden Sie unter Ruby-Laufzeit.

Sinatra

Das Web-Framework Sinatra stellt Dateien standardmäßig aus dem Verzeichnis ./public bereit. Die folgende Anwendung enthält eine Ansicht, die auf /application.css verweist.

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

Das Stylesheet befindet sich unter ./public/application.css, das aus /application.css bereitgestellt wird.

Ruby on Rails

Das Web-Framework Ruby on Rails stellt Dateien standardmäßig aus dem ./public-Verzeichnis bereit. Statische JavaScript- und CSS-Dateien können auch von der Rails-Asset-Pipeline generiert werden.

Die folgenden Beispielanwendungen enthalten eine Layoutansicht, die alle Stylesheets der Anwendung enthält:

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.

Version 3.1 und früher

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

Das Stylesheet selbst ist eine .css-Datei unter ./public/application.css.

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

Version 3.1 und früher

Das Stylesheet selbst ist eine Sass-Datei unter ./app/assets/stylesheets/main.css.sass.

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

Standardmäßig generieren Rails-Apps, wenn sie in der Produktion ausgeführt werden, keine statischen Inhalte und stellen diese auch nicht bereit.

Die Ruby-Laufzeit führt während der Bereitstellung zum Generieren statischer rake assets:precompile-Inhalte aus und legt die RAILS_SERVE_STATIC_FILES-Umgebungsvariable fest, um die Bereitstellung statischer Dateien in der Produktion zu aktivieren.

.NET

Das folgende Beispiel zeigt, wie Sie mit Ihrer Anwendung statische Dateien für .NET-Laufzeitversion 3.1 und frühere Versionen und Version 6 und später bereitstellen. Beachten Sie, dass Sie Ihre app.yaml-Datei aktualisieren müssen, um die neue Version zu verwenden. Weitere Informationen zur Verwendung der neuen Laufzeiten finden Sie unter .NET-Laufzeit.

Version 6 und höher

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

Fügen Sie Folgendes hinzu, um die Bereitstellung statischer Dateien zu aktivieren:

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

Version 3.1 und früher

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

Fügen Sie Folgendes hinzu, um die Bereitstellung statischer Dateien zu aktivieren:

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

Aus einem Content Delivery Network eines Drittanbieters bereitstellen

Sie können jedes externe CDN eines Drittanbieters verwenden, um Ihre statischen Dateien bereitzustellen und dynamische Anfragen im Cache zu speichern. Dadurch erhöht sich jedoch unter Umständen die Latenz Ihrer Anwendung und es können höhere Kosten anfallen.

Zur Verbesserung der Leistung sollten Sie ein Drittanbieter-CDN verwenden, das CDN Interconnect unterstützt.