Несколько дней назад мы запустили наше новое прогрессивное веб-приложение (budgetimize.com). Budgetimize - это приложение для личных финансов, позволяющее получить ценную информацию о ваших финансах. Мы сделали это без настройки серверов. Нам не нужно было беспокоиться о регионах или времени безотказной работы. Вместо этого мы могли бы сосредоточиться на предоставлении нашим пользователям наилучшего опыта. В этой статье мы объясним, как это работает и почему нам это нравится.
Отказ от ответственности: мы написали эту статью, основываясь на собственном опыте работы с Cloudflare Workers. Cloudflare нам не платит, и мы не являемся экспертами в этой области.
Cloudflare Workers и бессерверная парадигма
Cloudflare Workers позволяет запускать код JavaScript на своих пограничных серверах. Таким образом, наш код работает близко к нашим клиентам, обеспечивая быстрые ответы и довольных пользователей. Его волшебство заключается в простоте использования. Нам нужно только загрузить наш код в виде одного файла JavaScript. Cloudflare развернет это по всему миру.
Если вы когда-либо настраивали сервер, вы знаете, сколько времени вы теряете на настройку машины, обеспечение ее безопасности и ее обновление.
Но, конечно, вы не хотите, чтобы ваш сервис отключался, когда ваш сервер выходит из строя, так что вам нужно больше серверов. Теперь вам также нужно их настроить. И убедитесь, что они могут взять на себя ответственность, когда первый выйдет из строя.
Для такого стартапа, как мы, тратить так много времени на управление серверами - дорого. Вы хотите иметь возможность быстро выполнять итерацию. Создал доказательство концепции для проверки вашей идеи. И увеличивайте масштаб, когда вы привлекаете больше пользователей.
Все это возможно с новой бессерверной -парадигмой, также называемой функцией как услуга (FaaS). Это позволяет вам сосредоточиться на написании кода, а не на управлении инфраструктурой.
Приступим к развертыванию нашего статического веб-сайта
Наше прогрессивное веб-приложение полностью работает в браузере на стороне клиента. Мы не используем такие методы, как серверный рендеринг или механизмы шаблонов. Все пользователи получают одинаковый статический код.
Cloudflare Workers позволяет использовать ведро хранилища (например, Amazon S3) для извлечения статических файлов и предоставления их пользователям. Вы можете использовать такие функции, как пограничный кеш Cloudflare, чтобы будущие запросы выполнялись еще быстрее.
Хотя это не требует от нас управления какими-либо серверами. Нам все еще нужны два сервиса (Cloudflare Workers и Amazon S3) для развертывания нашего веб-сайта. И каждый раз, когда мы обновляем наш веб-сайт, нам нужно очищать кеш Cloudflare и позволить нашим работникам снова получить файлы с S3.
Можем ли мы отказаться от Amazon S3 и полностью обслуживать наш статический веб-сайт из Cloudflare? Оказывается, это довольно просто для текстовых файлов. Вы можете встроить их как большую строку в свой рабочий скрипт. Единственное, что нужно сделать вашему работнику, - это сгенерировать ответ с этой строкой и правильными заголовками. Это невероятно быстро, поскольку для этого достаточно вернуть простую строку из центра обработки данных Cloudflare, расположенного рядом с пользователем.
Все идет нормально. Простой встроенный скрипт берет наши PWA-файлы, минимизирует их и встраивает код в наш рабочий скрипт.
Но ... наш PWA не только содержит текстовые файлы, у нас также есть значки, изображения и пользовательские шрифты. Облом, это бинарные файлы, которые мы не можем встроить в JavaScript. Одним из решений может быть использование некоторой текстовой кодировки (например, base64) для перекодирования двоичных файлов в текстовый формат. А затем, во время выполнения, мы могли бы перекодировать их в двоичный формат, прежде чем передавать их нашим клиентам. Печально то, что это увеличивает размер нашего рабочего скрипта (ограничен 1 мегабайтом). И кодировать их как текст кажется не совсем правильным.
Давайте познакомимся с WebAssembly
Cloudflare Workers также поддерживают загрузку файлов WebAssembly. Для тех, кто никогда не слышал о WebAssembly. WebAssembly - это новый низкоуровневый язык для Интернета, близкий к другим языкам ассемблера. Он может быть намного быстрее, чем JavaScript, и вы можете скомпилировать для него несколько других языков (например, Go или Rust).
И знаете что, файлы WebAssembly - это двоичные файлы. Мы можем поместить туда любые данные, которые захотим, даже наши изображения и шрифты, не прибегая к их неэффективному текстовому представлению. Единственное, что нам нужно, это простая программа WebAssembly, которая содержит наши двоичные ресурсы как глобальные переменные. Затем мы можем получить к ним доступ через ArrayBuffer в JavaScript и немедленно отправить их клиенту. Без необходимости возиться с кодировками.
Мы могли бы использовать Go или Rust, но поскольку остальная часть нашего PWA написана на TypeScript, мы выбрали AssemblyScript. AssemblyScript - это подмножество TypeScript, которое компилируется в WebAssembly.
Отлично, теперь у нас есть все готово для развертывания всего нашего кода в Cloudflare. Встраивайте текстовые ресурсы (HTML, JavaScript) в сам рабочий скрипт. Поместите двоичные ресурсы в виде буквенного байтового массива в AssemblyScript. Скомпилируйте это в WebAssembly и получите небольшой двоичный файл. Теперь вам нужно только развернуть оба файла в Cloudflare, что является одним вызовом API, и ваш код будет выпущен в центрах обработки данных по всему миру.
Производительность на всем пути
Мы не остановились на достигнутом. Если вы когда-либо создавали веб-сайт, вы знаете, что должны сжимать ресурсы, чтобы сэкономить пропускную способность пользователей и ускорить загрузку веб-сайта. Мы сжали все наши текстовые файлы с помощью Brotli (более эффективное сжатие, чем gzip) и получили ... двоичные файлы. Мы не можем встроить их в наш рабочий скрипт. Но, как вы уже догадались, мы можем поместить их в наш файл WebAssembly.
Конечный результат
Это конечный результат. У нас есть один файл WebAssembly, который содержит все наши статические ресурсы. Сжатый с высочайшим уровнем Brotli. Наш рабочий скрипт загружает эти ресурсы из WebAssembly и предоставляет их напрямую нашим пользователям. Это означает, что мы получаем очень быстрое время отклика. Cloudflare будет использовать работника, близкого к пользователю. Этому исполнителю нужно только отправить запрошенный ресурс (который уже находится в памяти) обратно пользователю.
Нам никогда не приходилось трогать какие-либо серверы, только простой и простой JavaScript.
Готовы начать управлять своими деньгами?
Начните использовать наше приложение прямо сейчас, если вы хотите начать управлять своими деньгами и получать представление о своих финансах.
Щелкните здесь, чтобы перейти на budgetimize.com прямо сейчас!
