← Containers / containers / examples

Статический фронтенд, контейнерный бэкенд

Частый подход: раздавать статическое фронтенд-приложение (например, React, Vue, Svelte) через Static Assets, а запросы к бэкенду передавать в контейнеризированное бэкенд-приложение.

В этом примере мы покажем пример с использованием простого index.html файл, отдаваемый как статический ресурс, но вы можете выбрать один из множества фронтенд-фреймворков. См. наш примеры фреймворков для Workers, где это описано подробнее.

Полный пример см. в Шаблон «Статический фронтенд + контейнерный бэкенд» ↗.

Настройка Static Assets и Container

{
  "name": "cron-container",
  "main": "src/index.ts",
  "assets": {
    "directory": "./dist",
    "binding": "ASSETS"
  },
  "containers": [
    {
      "class_name": "Backend",
      "image": "./Dockerfile",
			"max_instances": 3
    }
  ],
  "durable_objects": {
    "bindings": [
      {
        "class_name": "Backend",
        "name": "BACKEND"
      }
    ]
  },
  "migrations": [
    {
      "new_sqlite_classes": [
        "Backend"
      ],
      "tag": "v1"
    }
  ]
}

name = "cron-container"
main = "src/index.ts"

[assets]
directory = "./dist"
binding = "ASSETS"

[[containers]]
class_name = "Backend"
image = "./Dockerfile"
max_instances = 3

[[durable_objects.bindings]]
class_name = "Backend"
name = "BACKEND"

[[migrations]]
new_sqlite_classes = [ "Backend" ]
tag = "v1"

Добавьте простой файл index.html для раздачи

Создайте простой index.html файл в ./dist каталог.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Widgets</title>
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.13.3/cdn.min.js"></script>
</head>

<body>
  <div x-data="widgets()" x-init="fetchWidgets()">
    <h1>Widgets</h1>
    <div x-show="loading">Loading...</div>
    <div x-show="error" x-text="error" style="color: red;"></div>
    <ul x-show="!loading && !error">
      <template x-for="widget in widgets" :key="widget.id">
        <li>
          <span x-text="widget.name"></span> - (ID: <span x-text="widget.id"></span>)
        </li>
      </template>
    </ul>

    <div x-show="!loading && !error && widgets.length === 0">
      No widgets found.
    </div>

  </div>

  <script>
    function widgets() {
      return {
        widgets: [],
        loading: false,
        error: null,

        async fetchWidgets() {
          this.loading = true;
          this.error = null;

          try {
            const response = await fetch('/api/widgets');
            if (!response.ok) {
              throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }
            this.widgets = await response.json();
          } catch (err) {
            this.error = err.message;
          } finally {
            this.loading = false;
          }
        }
      }
    }
  </script>

</body>

</html>

В этом примере используется Alpine.js ↗ чтобы получить список виджетов из /api/widgets.

Это лишь простой пример, реализация может быть значительно сложнее. Подробнее см. примеры интеграции Workers с фронтенд-фреймворками, где это описано подробнее.

Определение Worker

Ваш Worker должен уметь одновременно отдавать статические файлы и направлять запросы к контейнеризированному бэкенду.

В этом случае мы будем передавать запросы одному из трёх экземпляров контейнера, если маршрут начинается с /api, а все остальные запросы будут обслуживаться как статические ресурсы.

import { Container, getRandom } from "@cloudflare/containers";

const INSTANCE_COUNT = 3;

class Backend extends Container {
	defaultPort = 8080; // pass requests to port 8080 in the container
	sleepAfter = "2h"; // only sleep a container if it hasn't gotten requests in 2 hours
}

export default {
	async fetch(request, env) {
		const url = new URL(request.url);
		if (url.pathname.startsWith("/api")) {
			const containerInstance = await getRandom(env.BACKEND, INSTANCE_COUNT);
			return containerInstance.fetch(request);
		}

		return env.ASSETS.fetch(request);
	},
};

Примечание

В этом примере используется getRandom, который случайным образом выбирает один из фиксированного числа экземпляров Container для каждого запроса.

В будущем мы предложим усовершенствованную балансировку нагрузки с учётом задержки и автомасштабирование.

Это упростит масштабирование не хранящих состояние экземпляров и повысит эффективность маршрутизации. Подробнее см. документация по автомасштабированию для дополнительных сведений.

Определение бэкенд-контейнера

Ваш контейнер должен уметь обрабатывать запросы к /api/widgets.

В этом случае мы используем простой бэкенд на Golang, который возвращает жёстко заданный список виджетов.

server.go

package main

import (
	"encoding/json"
	"log"
	"net/http"
)

func handler(w http.ResponseWriter, r \*http.Request) {
	widgets := []map[string]interface{}{
		{"id": 1, "name": "Widget A"},
		{"id": 2, "name": "Sprocket B"},
		{"id": 3, "name": "Gear C"},
	}

	w.Header().Set("Content-Type", "application/json")
	w.Header().Set("Access-Control-Allow-Origin", "*")
	json.NewEncoder(w).Encode(widgets)

}

func main() {
	http.HandleFunc("/api/widgets", handler)
	log.Fatal(http.ListenAndServe(":8080", nil))
}