Menyajikan file statis

Go Java Node.js PHP Python Ruby .NET Custom

Aplikasi sering kali harus menyajikan file statis seperti JavaScript, gambar, dan CSS, selain dari menangani permintaan dinamis. Aplikasi di lingkungan fleksibel dapat menyajikan file statis dari opsi Google Cloud seperti Cloud Storage, menyajikannya secara langsung, atau menggunakan jaringan penayangan konten (CDN) pihak ketiga.

Menyajikan file dari Cloud Storage

Cloud Storage dapat menghosting aset statis untuk aplikasi web dinamis. Manfaat menggunakan Cloud Storage daripada menyajikan langsung dari aplikasi Anda meliputi:

• Cloud Storage pada dasarnya berfungsi sebagai jaringan penayangan konten (CDN). Hal ini tidak memerlukan konfigurasi khusus karena secara default objek yang dapat dibaca secara publik akan disimpan dalam cache di jaringan Cloud Storage global.
• Muatan aplikasi Anda akan dikurangi dengan mengurangi beban aset statis ke Cloud Storage. Bergantung pada jumlah aset statis yang Anda miliki dan frekuensi aksesnya, hal ini dapat mengurangi biaya menjalankan aplikasi dengan jumlah yang signifikan.
• Biaya bandwidth untuk mengakses konten sering kali lebih murah dengan Cloud Storage.

Anda dapat mengupload aset ke Cloud Storage menggunakan Google Cloud CLI atau Cloud Storage API.

Library Klien Google Cloud menyediakan klien ke Cloud Storage idiomatis, untuk menyimpan dan mengambil data dengan Cloud Storage di aplikasi App Engine.

Contoh inferensi dari bucket Cloud Storage

Contoh ini akan membuat bucket Cloud Storage dan mengupload aset statis menggunakan gcloud CLI:

1. Membuat bucket. Memberi nama bucket yang sama dengan ID project Anda adalah hal yang umum, tetapi tidak wajib. Nama bucket harus unik secara global.

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

2. Tetapkan kebijakan IAM untuk memberikan akses baca publik ke item dalam bucket.

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

3. Mengupload item ke bucket. Perintah rsync biasanya merupakan cara tercepat dan termudah untuk mengupload dan memperbarui aset. Anda juga dapat menggunakan cp.

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

Sekarang Anda dapat mengakses aset statis melalui https://storage.googleapis.com/<var>your-bucket-name</var>/static/....

Untuk detail selengkapnya tentang cara menggunakan Cloud Storage untuk menyalurkan aset statis, termasuk cara menyajikan aset dari nama domain kustom, lihat Cara Menghosting Situs Statis.

Menyajikan file dari layanan Google Cloud lainnya

Anda juga memiliki opsi untuk menggunakan Cloud CDN atau layanan penyimpanan Google Cloud lainnya.

Menyajikan file langsung dari aplikasi Anda

Menyajikan file dari aplikasi biasanya mudah dilakukan, tetapi ada beberapa kelemahan yang harus Anda pertimbangkan:

• Permintaan file statis dapat menggunakan resource yang akan digunakan untuk permintaan dinamis.
• Bergantung pada konfigurasi Anda, menyajikan file dari aplikasi dapat menghasilkan latensi respons, yang juga dapat memengaruhi kapan instance baru dibuat untuk menangani muatan.

Catatan: Di lingkungan produksi, secara umum praktik terbaiknya adalah menyajikan konten statis secara terpisah dari aplikasi Anda, baik di Google Cloud maupun secara eksternal menggunakan CDN pihak ketiga.

Contoh penyajian file statis dengan aplikasi Anda

Go

Contoh berikut menunjukkan cara menayangkan file statis dengan aplikasi Anda. Anda dapat menggunakan aplikasi contoh dalam panduan ini untuk versi Go yang didukung dengan menentukan versi runtime dan sistem operasi dalam file app.yaml.

Anda dapat menggunakan http.FileServer atau http.ServeFile standar untuk menyajikan file langsung dari aplikasi.

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

Contoh berikut menunjukkan cara menayangkan file statis dengan aplikasi Anda. Anda dapat menggunakan aplikasi contoh dalam panduan ini untuk versi Java apa pun yang didukung dengan menentukan versi runtime dan sistem operasi dalam file app.yaml.

Container servlet runtime Java akan menggunakan deployment descriptor, file web.xml, untuk memetakan URL ke servlet, termasuk aset statis. Jika Anda tidak menentukan web.xml, default akan digunakan yang memetakan semuanya ke servlet default.

Dalam contoh ini, ./src/main/webapp/index.html merujuk pada sheet gaya yang ditayangkan dari /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>

File styles.css terletak di ./src/main/webapp/stylesheets/styles.css.

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

Anda dapat secara eksplisit mengonfigurasi cara penanganan file statis di file web.xml. Misalnya, jika Anda ingin memetakan permintaan untuk semua file yang memiliki ekstensi .jpg:

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

Jika menggunakan framework web, seperti Play, Anda harus melihat dokumentasi framework tentang aset statis.

Node.js

Contoh berikut menunjukkan cara menayangkan file statis dengan aplikasi Anda. Anda dapat menggunakan aplikasi contoh dalam panduan ini untuk versi Node.js apa pun yang didukung dengan menentukan versi runtime dan sistem operasi di file app.yaml.

Sebagian besar framework web menyertakan dukungan untuk menyajikan file statis. Dalam contoh ini, aplikasi menggunakan middleware express.static untuk menyajikan file dari direktori ./public ke 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.');
});

Tampilan ini mengacu ke /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.

Stylesheet itu sendiri berada di ./public/css, yang disajikan dari /static/main.css.

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

Framework Node.js lainnya, seperti Hapi, Koa, dan Sails biasanya mendukung penyajian file statis langsung dari aplikasi. Lihat dokumentasinya untuk mengetahui detail tentang cara mengonfigurasi dan menggunakan konten statis.

PHP

Runtime PHP menjalankan nginx untuk menyajikan aplikasi Anda, yang dikonfigurasi untuk menyajikan file statis di direktori project Anda. Anda harus mendeklarasikan root dokumen dengan menentukan document_root dalam file app.yaml Anda. Anda dapat menggunakan aplikasi contoh dalam panduan ini untuk versi PHP yang didukung dengan menentukan versi runtime dan sistem operasi dalam 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

Contoh berikut menunjukkan cara menayangkan file statis dengan aplikasi Anda. Anda dapat menggunakan aplikasi contoh dalam panduan ini untuk versi Python yang didukung dengan menentukan versi runtime dan sistem operasi di file app.yaml.

Sebagian besar framework web menyertakan dukungan untuk menyajikan file statis. Dalam contoh ini, aplikasi menggunakan kemampuan bawaan Flask untuk menyajikan file dalam direktori ./static dari URL /static.

Aplikasi menyertakan tampilan yang merender template. Flask secara otomatis menyajikan semua yang ada di direktori ./static tanpa konfigurasi tambahan.

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)

Template yang dirender oleh tampilan menyertakan stylesheet yang terletak di /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>

Stylesheet terletak di ./static/main.css.

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

Framework Python lainnya, seperti Django, Pyramid, dan Bottle biasanya mendukung penyajian file statis langsung dari aplikasi. Lihat dokumentasinya untuk mengetahui detail tentang cara mengonfigurasi dan menggunakan konten statis.

Ruby

Sebagian besar framework web menyertakan dukungan untuk menyajikan file statis. Contoh berikut menunjukkan cara menayangkan file statis dengan aplikasi Anda. Anda dapat menggunakan aplikasi contoh dalam panduan ini untuk versi Ruby apa pun yang didukung dengan menentukan versi runtime dan sistem operasi dalam file app.yaml.

Sinatra

Framework web Sinatra menyajikan file dari direktori ./public secara default. Aplikasi ini menyertakan tampilan yang mengacu ke /application.css.

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

Stylesheet terletak di ./public/application.css yang disajikan dari /application.css.

Ruby di Rails

Framework web Ruby on Rails menyajikan file dari direktori ./public secara default. File JavaScript dan CSS statis juga dapat dibuat oleh pipeline aset Rails.

Aplikasi contoh ini berisi tampilan tata letak yang menyertakan semua stylesheet aplikasi.

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.

Stylesheet itu sendiri adalah file .css yang terletak di ./public/application.css.

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

Secara default, aplikasi Rails tidak membuat atau menyajikan aset statis saat berjalan dalam produksi.

Runtime Ruby mengeksekusi rake assets:precompile selama deployment untuk menghasilkan aset statis dan menetapkan variabel lingkungan RAILS_SERVE_STATIC_FILES untuk mengaktifkan file statis yang disajikan dalam produksi.

.NET

Contoh berikut menunjukkan cara menayangkan file statis dengan aplikasi Anda. Anda dapat menggunakan aplikasi contoh dalam panduan ini untuk versi .NET yang didukung dengan menentukan versi runtime dan sistem operasi dalam 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>

Untuk mengaktifkan penyajian file statis, tambahkan:

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

Menyajikan dari jaringan penayangan konten (CDN) pihak ketiga

Anda dapat menggunakan CDN pihak ketiga eksternal untuk menyajikan file statis dan meng-cache permintaan dinamis, tetapi aplikasi Anda mungkin mengalami peningkatan latensi dan biaya.

Untuk meningkatkan performa, Anda harus menggunakan CDN pihak ketiga yang mendukung CDN Interconnect.