הצגת קבצים סטטיים

לעתים קרובות, אפליקציות צריכות להציג קבצים סטטיים כמו JavaScript, תמונות ו-CSS, בנוסף לטיפול בבקשות דינמיות. אפליקציות בסביבה הגמישה יכולות להציג קבצים סטטיים מאפשרות כמו Cloud Storage, להציג אותם ישירות או להשתמש ברשת להעברת תוכן (CDN) של צד שלישי. Google Cloud

הצגת קבצים מ-Cloud Storage

ב-Cloud Storage אפשר לארח נכסים סטטיים לאפליקציות אינטרנט דינמיות. היתרונות של שימוש ב-Cloud Storage במקום להציג ישירות מהאפליקציה כוללים:

  • ‫Cloud Storage פועל למעשה כרשת להעברת תוכן. לא נדרש שום שינוי בהגדרות, כי כברירת מחדל כל אובייקט שקריא לכולם נשמר במטמון ברשת הגלובלית של Cloud Storage.
  • העומס על האפליקציה יופחת על ידי העברת הנכסים הסטטיים ל-Cloud Storage. בהתאם למספר הנכסים הסטטיים שיש לכם ולתדירות הגישה, אפשר להפחית את עלות הפעלת האפליקציה בסכום משמעותי.
  • חיובי רוחב פס בשביל גישה לתוכן בדרך כלל זולים יותר ב-Cloud Storage.

אתם יכולים להעלות את הנכסים שלכם ל-Cloud Storage באמצעות Google Cloud CLI או Cloud Storage API.

ספריית הלקוח של Google Cloud מספקת לקוח ל-Cloud Storage, לאחסון ולאחזור נתונים באמצעות Cloud Storage באפליקציית App Engine.

דוגמה להצגת תוכן מקטגוריה של Cloud Storage

בדוגמה הזו נוצרת קטגוריית Cloud Storage ומועלים אליה נכסים סטטיים באמצעות ה-CLI של gcloud:

  1. יוצרים קטגוריה. מקובל, אבל לא חובה, לתת לקטגוריה שם שזהה למזהה הפרויקט. שם הקטגוריה חייב להיות ייחודי באופן גלובלי.

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

  2. מגדירים את מדיניות ה-IAM כך שתאפשר גישת קריאה ציבורית לפריטים בקטגוריה.

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

  3. מעלים פריטים לקטגוריה. הפקודה rsync היא בדרך כלל הדרך הכי מהירה וקלה להעלות ולעדכן נכסים. אפשר גם להשתמש ב-cp.

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

עכשיו יש לך גישה לנכסים הסטטיים שלך דרך https://storage.googleapis.com/<var>your-bucket-name</var>/static/....

לפרטים נוספים על שימוש ב-Cloud Storage כדי להציג נכסים סטטיים, כולל איך להציג מתוך שם דומיין בהתאמה אישית, אפשר לעיין במאמר איך לארח אתר סטטי.

הצגת קבצים משירותים אחרים Google Cloud

יש גם אפשרות להשתמש ב-Cloud CDN או בשירותי אחסון אחרים של Google Cloud .

הצגת קבצים ישירות מהאפליקציה

בדרך כלל קל להציג קבצים מהאפליקציה, אבל יש כמה חסרונות שכדאי לקחת בחשבון:

  • בקשות לקבצים סטטיים יכולות להשתמש במשאבים שאחרת היו משמשים לבקשות דינמיות.
  • בהתאם להגדרה, הצגת קבצים מהאפליקציה עלולה לגרום לזמן אחזור בתגובה, מה שיכול להשפיע גם על מועד היצירה של מופעים חדשים לטיפול בעומס.

דוגמה להצגת קבצים סטטיים באפליקציה

Go

בדוגמה הבאה אפשר לראות איך להציג קבצים סטטיים באמצעות האפליקציה. אפשר להשתמש באפליקציית הדוגמה במדריך הזה לכל גרסה נתמכת של Go. לשם כך, צריך לציין את גרסת זמן הריצה ואת מערכת ההפעלה בקובץ app.yaml.

אפשר להשתמש ב-http.FileServer או ב-http.ServeFile כדי להציג קבצים ישירות מהאפליקציה.


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

בדוגמה הבאה מוצגות דרכים להצגת קבצים סטטיים באפליקציה. אפשר להשתמש באפליקציה לדוגמה במדריך הזה לכל גרסה נתמכת של Java. לשם כך, צריך לציין את גרסת זמן הריצה ומערכת ההפעלה בקובץ app.yaml.

מאגר הסרוולטים של זמן הריצה של Java ישתמש במתאר הפריסה של האפליקציה, בקובץ web.xml, כדי למפות כתובות URL לסרוולטים, כולל נכסים סטטיים. אם לא מציינים web.xml, המערכת משתמשת בברירת מחדל שממפה את הכול ל-servlet שמוגדר כברירת מחדל.

בדוגמה הזו, ./src/main/webapp/index.html מתייחס לגיליון סגנונות שמוגש מ-/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>

הקובץ styles.css נמצא במיקום ./src/main/webapp/stylesheets/styles.css.

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

אפשר להגדיר באופן מפורש איך קבצים סטטיים מטופלים בקובץ web.xml. לדוגמה, אם רוצים למפות בקשות לכל הקבצים עם הסיומת .jpg:

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

אם אתם משתמשים ב-framework לאינטרנט, כמו Play, תצטרכו לעיין בתיעוד של ה-framework בנושא נכסים סטטיים.

Node.js

בדוגמה הבאה מוצגות דרכים להצגת קבצים סטטיים באפליקציה. אפשר להשתמש באפליקציה לדוגמה שבמדריך הזה בכל גרסה נתמכת של Node.js. לשם כך, צריך לציין את גרסת זמן הריצה ואת מערכת ההפעלה בקובץ app.yaml.

רוב מסגרות האינטרנט כוללות תמיכה בהצגת קבצים סטטיים. בדוגמה הזו, האפליקציה משתמשת בתוכנת הביניים express.static כדי להציג קבצים מהספרייה ./public בכתובת ה-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.');
});

התצוגה מתייחסת אל /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.

גיליון הסגנונות עצמו נמצא בכתובת ./public/css, והוא מוגש מ-/static/main.css.

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

בדרך כלל, פלטפורמות אחרות של Node.js, כמו Hapi,‏ Koa ו-Sails, תומכות בהצגת קבצים סטטיים ישירות מהאפליקציה. אפשר לעיין במסמכי העזרה שלהם כדי לקבל פרטים על הגדרה ושימוש בתוכן סטטי.

PHP

סביבת ההרצה של PHP מריצה את nginx כדי להציג את האפליקציה, והיא מוגדרת להצגת קבצים סטטיים בספריית הפרויקט. צריך להצהיר על תיקיית הבסיס של המסמך על ידי ציון document_root בקובץ app.yaml. אתם יכולים להשתמש באפליקציה לדוגמה במדריך הזה לכל גרסה נתמכת של PHP. לשם כך, צריך לציין את גרסת זמן הריצה ומערכת ההפעלה בקובץ 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

בדוגמה הבאה מוצגות דרכים להצגת קבצים סטטיים באפליקציה. אפשר להשתמש באפליקציה לדוגמה במדריך הזה לכל גרסה נתמכת של Python. לשם כך, צריך לציין את גרסת זמן הריצה ואת מערכת ההפעלה בקובץ app.yaml.

רוב מסגרות האינטרנט כוללות תמיכה בהצגת קבצים סטטיים. בדוגמה הזו, האפליקציה משתמשת ביכולת המובנית של Flask להצגת קבצים בספרייה ./static מכתובת ה-URL /static.

האפליקציה כוללת תצוגה שבה התבנית מוצגת. ‫Flask מציג אוטומטית את כל מה שנמצא בספרייה ./static ללא הגדרה נוספת.

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)

התבנית שעברה רינדור על ידי התצוגה כוללת גיליון סגנונות שנמצא בכתובת /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>

גיליון הסגנונות נמצא ב-./static/main.css.

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

בדרך כלל, פלטפורמות אחרות של Python, כמו Django,‏ Pyramid ו-Bottle, תומכות בהצגת קבצים סטטיים ישירות מהאפליקציה. אפשר לעיין במסמכי התיעוד שלהן כדי לקבל פרטים על אופן ההגדרה והשימוש בתוכן סטטי.

Ruby

רוב מסגרות האינטרנט כוללות תמיכה בהצגת קבצים סטטיים. בדוגמה הבאה מוצגות דרכים להצגת קבצים סטטיים באפליקציה. אפשר להשתמש באפליקציית הדוגמה במדריך הזה לכל גרסה נתמכת של Ruby. לשם כך, צריך לציין את גרסת זמן הריצה ואת מערכת ההפעלה בקובץ app.yaml.

Sinatra

מסגרת האינטרנט Sinatra מציגה קבצים מהספרייה ./public כברירת מחדל. האפליקציה הזו כוללת תצוגה שמתייחסת ל/application.css.

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

גיליון הסגנונות נמצא בכתובת ./public/application.css, והוא מוגש מ-/application.css.

Ruby on Rails

מסגרת האינטרנט Ruby on Rails מציגה קבצים מהספרייה ./public כברירת מחדל. אפשר גם ליצור קובצי JavaScript ו-CSS סטטיים באמצעות צינור הנכסים של Rails.

אפליקציות לדוגמה האלה מכילות תצוגת פריסה שכוללת את כל גיליונות הסגנונות של האפליקציה.

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.

גיליון הסגנונות הוא קובץ .css שנמצא במיקום ./public/application.css.

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

כברירת מחדל, אפליקציות Rails לא יוצרות נכסים סטטיים ולא מציגות אותם כשהן פועלות בסביבת ייצור.

זמן הריצה של Ruby מריץ את rake assets:precompile במהלך הפריסה כדי ליצור נכסים סטטיים, ומגדיר את משתנה הסביבה RAILS_SERVE_STATIC_FILES כדי להפעיל הצגה של קבצים סטטיים בסביבת הייצור.

‎.NET

בדוגמה הבאה רואים איך להציג קבצים סטטיים באמצעות האפליקציה. אפשר להשתמש באפליקציה לדוגמה במדריך הזה לכל גרסה נתמכת של ‎.NET. לשם כך, צריך לציין את גרסת זמן הריצה ואת מערכת ההפעלה בקובץ 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>

כדי להפעיל את האפשרות להצגת קבצים סטטיים, מוסיפים:

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

הצגה מרשת להעברת תוכן של צד שלישי

אתם יכולים להשתמש בכל CDN חיצוני של צד שלישי כדי להציג את הקבצים הסטטיים שלכם ולשמור במטמון בקשות דינמיות, אבל יכול להיות שזמן הטעינה של האפליקציה שלכם יתארך והעלות תגדל.

כדי לשפר את הביצועים, מומלץ להשתמש ב-CDN של צד שלישי שתומך ב-CDN Interconnect.