Statische Dateien bereitstellen

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 Inhalte mit der Google Cloud CLI 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 Beispiel werden ein Cloud Storage-Bucket erstellt und statische Assets mithilfe der gcloud 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 muss global eindeutig sein.

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

  2. Legen Sie in der IAM-Richtlinie öffentlichen Lesezugriff auf Elemente im Bucket fest.

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

  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.

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

Sie können jetzt über https://storage.googleapis.com/<var>your-bucket-name</var>/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.

Beispiel für das Bereitstellen statischer Dateien mit einer Anwendung

Go

Das folgende Beispiel zeigt, wie Sie mit Ihrer Anwendung statische Dateien bereitstellen. Sie können die Beispielanwendung in dieser Anleitung für jede unterstützte Go-Version verwenden. Geben Sie dazu die Laufzeitversion und das Betriebssystem in der Datei app.yaml an.

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


// 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 bereitstellen. Sie können die Beispielanwendung in diesem Leitfaden für jede unterstützte Java-Version verwenden. Geben Sie dazu die Laufzeitversion und das Betriebssystem in der Datei app.yaml an.

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.

<!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 bereitstellen. Sie können die Beispielanwendung in dieser Anleitung für jede unterstützte Version von Node.js verwenden. Geben Sie dazu die Laufzeitversion und das Betriebssystem in der Datei app.yaml an.

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 statischem Inhalt finden Sie in 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. Sie können die Beispielanwendung in dieser Anleitung für jede unterstützte Version von PHP verwenden. Geben Sie dazu die Laufzeitversion und das Betriebssystem in der Datei app.yaml an.

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

Das folgende Beispiel zeigt, wie Sie mit Ihrer Anwendung statische Dateien bereitstellen. Sie können die Beispielanwendung in dieser Anleitung für jede unterstützte Version von Python verwenden. Geben Sie dazu die Laufzeitversion und das Betriebssystem in der Datei app.yaml an.

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 Verzeichnis ./static von der URL /static.

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 bereitstellen. Sie können die Beispielanwendung in diesem Leitfaden für jede unterstützte Ruby-Version verwenden. Geben Sie dazu die Laufzeitversion und das Betriebssystem in der Datei app.yaml an.

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 Verzeichnis ./public 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.

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.

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

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 bereitstellen. Sie können die Beispielanwendung in dieser Anleitung für jede unterstützte .NET-Version verwenden. Geben Sie dazu die Laufzeitversion und das Betriebssystem in der Datei app.yaml an.

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