Menyajikan file statis

Go Java Node.js PHP Python Ruby .NET Custom

Aplikasi sering kali harus menyajikan file statis seperti JavaScript, image, dan CSS, selain 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 alat command line gsutil 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 penyajian dari bucket Cloud Storage

Contoh sederhana ini akan membuat bucket Cloud Storage dan mengupload aset statis menggunakan Google Cloud 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.

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

2. Tetapkan ACL untuk memberikan akses baca ke item dalam bucket.

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

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

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

Sekarang Anda dapat mengakses aset statis melalui https://storage.googleapis.com/<your-bucket-name>/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 menyajikan file statis dengan aplikasi Anda untuk runtime Go versi 1.15 dan yang lebih lama, serta versi 1.18 dan yang lebih baru. Perlu diperhatikan bahwa Anda harus mengupdate app.yaml untuk menggunakan versi baru. Lihat runtime Go untuk mengetahui informasi selengkapnya tentang penggunaan runtime baru.

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

v1.18 dan yang lebih baru

// 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 dan yang lebih lama

// 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 menyajikan file statis dengan aplikasi Anda untuk runtime Java versi 8 dan versi 11/17. Perlu diperhatikan bahwa Anda harus mengupdate app.yaml untuk menggunakan versi baru. Lihat runtime Java untuk mengetahui informasi selengkapnya tentang cara menggunakan runtime baru.

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 stylesheet yang disajikan dari /stylesheets/styles.css.

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

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

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 menyajikan file statis dengan aplikasi Anda untuk runtime Node.js versi 16 dan yang lebih lama, serta versi 18 dan yang lebih baru. Perlu diperhatikan bahwa Anda harus mengupdate app.yaml untuk menggunakan versi baru. Baca runtime Node.js untuk mengetahui informasi selengkapnya tentang cara menggunakan runtime baru.

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:

runtime: php
env: flex

runtime_config:
  document_root: web

Python

Contoh berikut menunjukkan cara menyajikan file statis dengan aplikasi Anda untuk runtime Python versi 3.7 dan yang lebih lama. Untuk Python versi 3.8 dan yang lebih baru, lihat runtime Python untuk mengetahui informasi selengkapnya tentang cara menggunakan versi yang lebih baru.

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 menyajikan file statis dengan aplikasi Anda untuk runtime Ruby versi 3.1 dan yang lebih lama, serta versi 3.2. Perhatikan bahwa Anda harus mengupdate file app.yaml untuk menggunakan versi baru. Lihat runtime Ruby untuk mengetahui informasi selengkapnya tentang cara menggunakan runtime baru.

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

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

versi 3.1 dan yang lebih lama

doctype html
html
  head
    title Serving Static Files
    = stylesheet_link_tag "application", media: "all"
    = javascript_include_tag "application"
    = csrf_meta_tags
  body
    = yield

versi 3.2

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

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

versi 3.1 dan yang lebih lama

Stylesheet itu sendiri adalah file Sass yang terletak di ./app/assets/stylesheets/main.css.sass.

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 untuk .NET runtime versi 3.1 dan yang lebih lama, serta versi 6 dan yang lebih baru. Perhatikan bahwa Anda harus mengupdate file app.yaml untuk menggunakan versi baru. Lihat runtime .NET untuk mengetahui informasi selengkapnya tentang cara menggunakan runtime baru.

versi 6 dan yang lebih baru

<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();

versi 3.1 dan yang lebih lama

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