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

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

הצגת קבצים מ-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 ומועלים אליה נכסים סטטיים באמצעות gcloud CLI:

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

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

בדוגמה הזו, ./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>

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

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.