Publicar ficheiros estáticos

Go Java Node.js PHP Python Ruby .NET Personalizado

As aplicações precisam frequentemente de publicar ficheiros estáticos, como JavaScript, imagens e CSS, além de processar pedidos dinâmicos. As apps no ambiente flexível podem publicar ficheiros estáticos a partir de uma Google Cloud opção, como o Cloud Storage, publicá-los diretamente ou usar uma rede de fornecimento de conteúdo (CDN) de terceiros.

Publicar ficheiros a partir do Cloud Storage

O Cloud Storage pode alojar recursos estáticos para apps Web dinâmicas. As vantagens de usar o Cloud Storage em vez de publicar diretamente a partir da sua app incluem:

• Essencialmente, o Cloud Storage funciona como uma rede de distribuição de conteúdo. Isto não requer nenhuma configuração especial porque, por predefinição, qualquer objeto legível publicamente é colocado em cache na rede global do Cloud Storage.
• A carga da sua app é reduzida ao transferir a publicação de recursos estáticos para o Cloud Storage. Consoante o número de recursos estáticos que tiver e a frequência de acesso, isto pode reduzir significativamente o custo de execução da sua app.
• As cobranças de largura de banda para aceder a conteúdo podem ser frequentemente inferiores com o Cloud Storage.

Pode carregar os seus recursos para o Cloud Storage através da CLI do Google Cloud ou da API Cloud Storage.

A biblioteca de cliente do Google Cloud fornece um cliente idiomático para o Cloud Storage, para armazenar e obter dados com o Cloud Storage numa app do App Engine.

Exemplo de publicação a partir de um contentor do Cloud Storage

Este exemplo cria um contentor do Cloud Storage e carrega recursos estáticos através da CLI gcloud:

1. Crie um contentor. É comum, mas não obrigatório, dar ao contentor o nome do ID do projeto. O nome do contentor tem de ser globalmente exclusivo.

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

2. Defina a Política IAM para conceder acesso de leitura público aos itens no contentor.

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

3. Carregue itens para o contentor. Normalmente, o comando rsync é a forma mais rápida e fácil de carregar e atualizar recursos. Também pode usar cp.

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

Agora, pode aceder aos seus recursos estáticos através do https://storage.googleapis.com/<var>your-bucket-name</var>/static/....

Para mais detalhes sobre como usar o Cloud Storage para publicar recursos estáticos, incluindo como publicar a partir de um nome de domínio personalizado, consulte o artigo Como alojar um Website estático.

Publicação de ficheiros de outros Google Cloud serviços

Também tem a opção de usar o Cloud CDN ou outros serviços de armazenamento Google Cloud .

Publicar ficheiros diretamente a partir da sua app

A publicação de ficheiros a partir da sua app é normalmente simples. No entanto, existem algumas desvantagens que deve considerar:

• Os pedidos de ficheiros estáticos podem usar recursos que, de outra forma, seriam usados para pedidos dinâmicos.
• Consoante a configuração, o envio de ficheiros a partir da sua app pode resultar em latência de resposta, o que também pode afetar o momento em que são criadas novas instâncias para processar a carga.

Nota: em ambientes de produção, é geralmente uma prática recomendada publicar o conteúdo estático separadamente da sua app, quer em Google Cloud quer externamente através de uma CDN de terceiros.

Exemplo de publicação de ficheiros estáticos com a sua app

Go

O exemplo seguinte demonstra como publicar ficheiros estáticos com a sua app. Pode usar a aplicação de exemplo neste guia para qualquer versão suportada do Go especificando a versão do tempo de execução e o sistema operativo no ficheiro app.yaml.

Pode usar o padrão http.FileServer ou http.ServeFile para publicar ficheiros diretamente a partir da sua 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

O exemplo seguinte demonstra como publicar ficheiros estáticos com a sua app. Pode usar a aplicação de exemplo neste guia para qualquer versão suportada do Java especificando a versão do tempo de execução e o sistema operativo no ficheiro app.yaml.

O contentor de servlets do tempo de execução Java usa o descritor de implementação da sua app, o ficheiro web.xml, para mapear URLs para servlets, incluindo recursos estáticos. Se não especificar um web.xml, é usada uma predefinição que mapeia tudo para o servlet predefinido.

Neste exemplo, ./src/main/webapp/index.html refere-se a uma folha de estilos publicada a partir de /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>

O ficheiro styles.css está localizado em ./src/main/webapp/stylesheets/styles.css.

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

Pode configurar explicitamente a forma como os ficheiros estáticos são processados no ficheiro web.xml. Por exemplo, se quiser mapear pedidos para todos os ficheiros com a extensão:.jpg

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

Se estiver a usar uma framework Web, como o Play, tem de consultar a documentação da framework sobre recursos estáticos.

Node.js

O exemplo seguinte demonstra como publicar ficheiros estáticos com a sua app. Pode usar a aplicação de exemplo neste guia para qualquer versão suportada do Node.js especificando a versão do tempo de execução e o sistema operativo no seu ficheiro app.yaml.

A maioria das frameworks Web inclui suporte para a publicação de ficheiros estáticos. Neste exemplo, a aplicação usa o middleware express.static para publicar ficheiros do diretório ./public no 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.');
});

A vista refere-se 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.

A folha de estilos encontra-se em ./public/css, que é servida a partir de /static/main.css.

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

Outras frameworks do Node.js, como Hapi, Koa e Sails suportam normalmente a publicação de ficheiros estáticos diretamente a partir da aplicação. Consulte a respetiva documentação para ver detalhes sobre como configurar e usar conteúdo estático.

PHP

O tempo de execução do PHP executa o nginx para publicar a sua app, que está configurada para publicar ficheiros estáticos no diretório do projeto. Tem de declarar a raiz do documento especificando document_root no ficheiro app.yaml. Pode usar a aplicação de exemplo neste guia para qualquer versão suportada do PHP especificando a versão de tempo de execução e o sistema operativo no ficheiro 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

O exemplo seguinte demonstra como publicar ficheiros estáticos com a sua app. Pode usar a aplicação de exemplo neste guia para qualquer versão suportada do Python especificando a versão do tempo de execução e o sistema operativo no seu ficheiro app.yaml.

A maioria das frameworks Web inclui suporte para a publicação de ficheiros estáticos. Neste exemplo, a app usa a capacidade integrada do Flask para publicar ficheiros no diretório ./static a partir do URL /static.

A app inclui uma vista que renderiza o modelo. O Flask disponibiliza automaticamente tudo no diretório ./static sem configuração adicional.

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)

O modelo renderizado pela vista inclui uma folha de estilos localizada em /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>

A folha de estilos encontra-se em ./static/main.css.

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

Outras frameworks Python, como o Django, o Pyramid e o Bottle, normalmente, suportam a publicação de ficheiros estáticos diretamente a partir da app. Consulte a respetiva documentação para ver detalhes sobre como configurar e usar conteúdo estático.

Ruby

A maioria das frameworks Web inclui suporte para a publicação de ficheiros estáticos. O exemplo seguinte demonstra como publicar ficheiros estáticos com a sua app. Pode usar a aplicação de exemplo neste guia para qualquer versão suportada do Ruby especificando a versão do tempo de execução e o sistema operativo no seu ficheiro app.yaml.

Sinatra

Por predefinição, a framework Web Sinatra publica ficheiros a partir do diretório ./public. Esta app inclui uma vista que se refere a /application.css.

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

A folha de estilos está localizada em ./public/application.css, que é servida a partir de /application.css.

Ruby on Rails

A framework Web Ruby on Rails serve ficheiros do diretório ./public por predefinição. Os ficheiros JavaScript e CSS estáticos também podem ser gerados pelo pipeline de recursos do Rails.

Estas apps de exemplo contêm uma vista de esquema que inclui todas as folhas de estilo da aplicação.

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.

A própria folha de estilos é um ficheiro .css localizado em ./public/application.css.

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

Por predefinição, as apps Rails não geram nem publicam recursos estáticos quando são executadas em produção.

O tempo de execução do Ruby executa rake assets:precompile durante a implementação para gerar recursos estáticos e define a variável de ambiente RAILS_SERVE_STATIC_FILES para ativar a publicação de ficheiros estáticos em produção.

.NET

O exemplo seguinte demonstra como publicar ficheiros estáticos com a sua app. Pode usar a aplicação de exemplo neste guia para qualquer versão suportada do .NET especificando a versão do tempo de execução e o sistema operativo no ficheiro 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>

Para ativar o serviço de ficheiros estáticos, adicione:

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

Publicação a partir de uma rede de fornecimento de conteúdo de terceiros

Pode usar qualquer RFC externa de terceiros para publicar os seus ficheiros estáticos e colocar em cache pedidos dinâmicos, mas a sua app pode sofrer um aumento da latência e dos custos.

Para um desempenho melhorado, deve usar uma CDN de terceiros que suporte o CDN Interconnect.