От локального приложения до общедоступного веб-сайта за считанные минуты.

Три бесплатных способа быстро развернуть статическое веб-приложение, доступное любому пользователю.

Делиться

В этой статье я покажу вам 3 совершенно бесплатных способа быстро развернуть простое веб-приложение, чтобы оно стало общедоступным в интернете. Под «простым» я подразумеваю статическое веб-приложение, то есть такое, которое не имеет базы данных, учетных записей пользователей или серверной логики.

Хотя это может показаться несколько ограничивающим, с помощью одного лишь HTML, CSS и JavaScript можно многое сделать.

Поскольку основное внимание уделяется различным методам развертывания, я не буду подробно останавливаться на самом веб-приложении.

Мне нужен был небольшой проект, простой, но при этом достаточно реалистичный для развертывания и распространения. Поэтому я поручил Codex разработать браузерную игру, простой шутер в стиле Space Invaders, который агент решил назвать Starline Defender .

В игру легко играть. Вы управляете маленьким кораблем влево и вправо с помощью стрелок, стреляете по приближающимся инопланетянам пробелом, прячетесь за щитами, теряете жизни при попадании под обстрел и проходите волны врагов по мере роста счета. Игра работает с управлением с клавиатуры на компьютере и сенсорным управлением на мобильных устройствах. В конце я оставлю ссылки на все три URL-адреса приложений, которые я разместил, чтобы вы могли поиграть в них сами.

Вот подсказка, которую я использовал.

Создайте простое веб-приложение, содержащее HTML, CSS и JavaScript, — простую игру в стиле Space Invaders.

Примерно через 16 минут Кодекс выплюнул это.

 Worked for 16m 45s I'll build this as a single self-contained HTML file with embedded CSS and JavaScript, using canvas so it runs anywhere without a build step. I'll keep the existing downloader file untouched and add a new game page. I'm going to include the whole game in one file: canvas rendering, alien waves, shields, scoring, lives, levels, keyboard controls, and on-screen controls for touch devices. After that I'll open it locally through the existing localhost server and do a quick visual sanity check. Created 1 file The game file is in place. I'm checking it through localhost now so we can catch blank canvas issues, script errors, or layout problems before I hand it over. Verify game page The page loads over localhost. The browser's read-only page check couldn't inspect canvas pixels directly, so I'm switching to a screenshot and console-log check, which is the right kind of sanity test for this canvas-heavy page. Screenshot game The screenshot found one layout wrinkle: on a short viewport the game board shrinks but hugs the left side, leaving dead space to the right. I'm centering and constraining the board dimensions so it looks intentional on both mobile-sized and desktop-sized panes. Edited 1 file I've patched the responsive sizing. I'm reloading the page now and doing one interaction pass: start the game, confirm the canvas updates, and check that there are no console errors. Verify updated game Done. I created the single-file SPA here: starline-defenders.html You can play it in the in-app browser at: http://127.0.0.1:8765/starline-defenders.html I also verified it loads, starts, renders the canvas, and has no browser console errors.

Я протестировал игру локально, и она работала нормально. Теперь осталось только выложить её в интернет, чтобы весь мир мог восхититься её великолепием!

Мы рассмотрим следующие системы развертывания:

1. GitHub Pages
2. здесь.сейчас
3. Прижимание к лицу в непосредственной близости от других людей.

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

Общие предварительные требования

Большинство статических хостингов ожидают, что главная страница будет называться index.html, поэтому первым делом нужно переименовать наш файл из starline-defenders.html. Для этого проекта этого достаточно, так как все наши ресурсы и код находятся в одном файле.

Создайте на своем локальном компьютере пустую папку, например, starline-defenders/, и скопируйте туда файл index.html.

Метод 1: Развертывание с помощью GitHub Pages

GitHub Pages — классический выбор для небольших статических сайтов и веб-приложений, подобных этому. Если ваш проект уже размещен на GitHub, это, как правило, самый простой способ постоянного развертывания.

GitHub Pages позволяет напрямую загружать HTML, CSS, JavaScript, изображения и другие статические ресурсы из репозитория. Для игры, состоящей всего из одного файла, как эта, этого вполне достаточно.

Что вам нужно

Для установки GitHub необходимы следующие условия:

• Аккаунт на GitHub
• Git Bash установлен локально
• Общедоступный репозиторий GitHub. Это необходимо для бесплатного развертывания.

Шаг 1: Создайте учетную запись GitHub.

Перейдите по ссылке https://github.com и нажмите кнопку «Зарегистрироваться» в правом верхнем углу экрана.

Шаг 2: Установите приложение Git Bash.

Git, используя интерфейс командной строки Bash, позволяет взаимодействовать с GitHub, например, копировать файлы в репозитории.

Получите его, нажав на:

https://git-scm.com/book/en/v2/Getting-Started-Installing-Git

и следуя инструкциям по установке, соответствующим вашей локальной системе.

Шаг 3: Создайте новый репозиторий

Войдите в свою учетную запись GitHub и создайте новый репозиторий, например, с таким названием:

защитники звездной линии

Убедитесь, что это общедоступный репозиторий.

Шаг 4: Поместите файл index.html в общедоступный репозиторий.

Для этого откройте терминал командной строки Git Bash, затем перейдите в локальную папку, содержащую ваш файл index.html. Теперь введите следующие команды в Git Bash.

 git init git config --global user.email "[email protected]" git config --global user.name "Your Name" git add index.html git commit -m "Add space invaders type game" git branch -M main git remote add origin https://github.com/YOUR_USERNAME/starline-defenders.git git push -u origin main

Замените `YOUR_USERNAME` на ваше имя пользователя на GitHub.

Шаг 5: Включите GitHub Pages

Откройте новый репозиторий на GitHub, затем:

1. Перейдите в Настройки.
2. Откройте «Страницы» в левой боковой панели.
3. В разделе «Сборка и развертывание» выберите «Развернуть из ветки».
4. Установите исходную ветку на `main`.
5. Укажите путь к папке `/root`.
6. Нажмите «Сохранить».

GitHub начнет публикацию сайта. Обычно это занимает минуту-две, и итоговый URL-адрес будет выглядеть примерно так:

 https://YOUR_USERNAME.github.io/starline-defenders/

К вашему сведению, если вам потребуется внести изменения в ваше веб-приложение в будущем, просто внесите необходимые изменения в локальный файл index.html, зафиксируйте изменения и снова отправьте их:

 git add index.html git commit -m "Update game" git push

Обновленное приложение будет автоматически переразвернуто.

Метод 2: Развертывание с использованием here.now

here.now — это сервис, созданный для быстрой публикации статических сайтов и файлов. Он может размещать HTML, CSS, JavaScript, изображения, документы и другие статические файлы по активному URL-адресу `*.here.now` . Хотя here.now предназначен для агентского доступа, вы также можете взаимодействовать с ним вручную, что я и покажу здесь.

Существует два способа публикации на here.now. Оба бесплатны. Первый способ называется анонимным режимом и не требует регистрации. В этом режиме here.now разместит ваше приложение по временному URL-адресу на 24 часа.

Для создания постоянного URL-адреса here.now, который мы и будем использовать, необходимо публиковать контент с помощью ключа API.

Последовательность действий следующая:

1. Зарегистрироваться/войти можно здесь.
2. Получите ключ API.
3. Сохраните это локально.
4. Запустите скрипты командной строки для публикации приложения.
5. Возвращенный URL-адрес навсегда останется в вашей учетной записи.

Для развертывания here.now необходимы следующие условия:

• Аккаунт «здесь и сейчас»
• Ключ API here.now

Шаг 1: Зарегистрируйтесь здесь.now

Перейдите по ссылке here.now/dashboard и воспользуйтесь кнопкой «Войти» в правом верхнем углу экрана.

В электронном письме вы получите ссылку, по которой нужно будет перейти, чтобы корректно войти в систему here.now.

Шаг 2: Получите ключ API

После входа в систему в левой боковой панели меню появится ссылка на API. Нажмите на неё, затем скопируйте сгенерированный ключ в буфер обмена.

Шаг 3: Опубликуйте свой сайт

На компьютере с Windows, подобном тому, который я использую, публикация приложения включает в себя выполнение нескольких команд PowerShell. Аналогичный процесс существует и для пользователей Linux и других операционных систем.

 # Create a folder to hold your API key if required # New-Item -ItemType Directory -Force "$env:USERPROFILE.herenow" | Out-Null # Save the API key # Set-Content "$env:USERPROFILE.herenowstarlinedefenders-credentials" "YOUR_API_KEY"

 # publish the web app # cd "$env:USERPROFILEprojectsstarlinedefenders" $apiKey = Get-Content "$env:USERPROFILE.herenowstarlinedefenders-credentials" -Raw $file = Get-Item ".index.html" $body = @{ files = @( @{ path = "index.html" size = $file.Length contentType = "text/html; charset=utf-8" } ) spaMode = $true } | ConvertTo-Json -Depth 5 $create = Invoke-RestMethod ` -Uri "https://here.now/api/v1/publish" ` -Method Post ` -Headers @{ "Authorization" = "Bearer $apiKey" "X-HereNow-Client" = "manual/powershell" } ` -ContentType "application/json" ` -Body $body $upload = $create.upload.uploads[0] Invoke-WebRequest ` -Uri $upload.url ` -Method Put ` -ContentType $upload.headers."Content-Type" ` -InFile $file.FullName $finalBody = @{ versionId = $create.upload.versionId } | ConvertTo-Json $final = Invoke-RestMethod ` -Uri $create.upload.finalizeUrl ` -Method Post ` -Headers @{ "Authorization" = "Bearer $apiKey" } ` -ContentType "application/json" ` -Body $finalBody "Permanent Site URL: $($create.siteUrl)"

После выполнения указанного выше скрипта отобразится URL-адрес, который вы сможете использовать для доступа к своему веб-приложению.

Обновить ваше приложение тоже очень просто. После внесения необходимых изменений в код файла index.html просто повторно запустите указанный выше скрипт развертывания.

Метод 3: Развертывание с использованием пространства для прижимания лица.

Hugging Face (HF) Spaces наиболее известен своими демонстрациями машинного обучения, но он также поддерживает статические HTML-приложения.

Что вам нужно

• Аккаунт «Обнимающее лицо»
• Новое пространство для ВЧ-связи
• Ваш файл index.html
• Файл README.md, содержащий метаданные космического пространства.

Шаг 1: Создайте учетную запись HF.

Перейдите по ссылке https://huggingface.co/ и воспользуйтесь кнопкой «Регистрация» в правом верхнем углу страницы.

Шаг 2: Создайте новое пространство

После входа в систему нажмите кнопку «Пространства» вверху, затем нажмите «Создать новое пространство» и выберите для него название, например, starline-defenders-game. Заполните описание и выберите любой срок действия лицензии по вашему желанию.

Для Space SDK выберите «Статический», а для «Шаблона» — «Пустой». Выберите «Общедоступный» в качестве видимости приложения, затем нажмите кнопку «Создать пространство» внизу.

Шаг 3: Перезапишите предварительно созданный файл index.html.

После создания пространства нажмите на ссылку «Файлы» в верхней части страницы; она находится между ссылками «Приложение» и «Сообщество». Вы увидите экран, немного похожий на репозиторий GitHub, с четырьмя файлами, которые HF предварительно создал для вас. Нам нужно обратить внимание только на файл index.html. Вам необходимо скопировать свой локальный файл index.html, чтобы заменить существующий файл HF. Сделайте это с помощью Git Bash, как мы делали с GitHub Pages.

Обратите внимание, что во время выполнения финальной команды `git push`, показанной ниже, появится всплывающее окно, в котором вам потребуется ввести ваше имя пользователя HF и токен доступа для успешного выполнения команды. Вы можете получить свой токен доступа, перейдя на следующую страницу настроек.

https://huggingface.co/settings/tokens

Нажмите кнопку «Создать токен». В поле «Тип токена» нажмите «Записать». Присвойте токену имя и создайте его. Запишите значение токена. Теперь введите следующие команды в Git Bash. Замените YOUR_USERNAME и YOUR_SPACE_NAME на ваши собственные значения HF.

 # go the folder where your index.html lives cd ~/projects/starlinedefenders git clone https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME cd YOUR_SPACE_NAME cp ~/projects/starlinedefenders/index.html ./index.html git add index.html git commit -m "Replace index with a space invaders type game" # After the following push command, you'll have to enter # your HF username and the access token you created previously # before the command will succeed git push

Hugging Face создаст и опубликует Space в фоновом режиме. Примерно через минуту ваше приложение будет готово к запуску. Чтобы запустить его, найдите своё имя пользователя HF, и должны отобразиться все доступные вам Space. Щёлкните по соответствующей ссылке Space, и ваше приложение должно запуститься немедленно.

Чтобы обновить приложение позже, отредактируйте локальный файл index.html, а затем снова выполните команду:

 git add index.html git commit -m "Update game" git push

Сравнение методов развертывания

Все три варианта хорошо подходят для такого рода проектов. Различия в основном касаются рабочего процесса и целевой аудитории.

GitHub Pages

GitHub Pages — лучший выбор по умолчанию, если ваш проект уже размещен на GitHub. Он стабилен, хорошо документирован и знаком разработчикам.

Плюсы:

• Бесплатно для публичных репозиториев
• Включен HTTPS
• С помощью Git очень легко обновлять систему.
• Подходит для портфолио и демонстрации проектов.
• Отсутствие привязки к какой-либо конкретной платформе, кроме GitHub.

Минусы:

• Бесплатная публикация, как правило, означает размещение в общедоступном репозитории.
• Не предназначен для использования в качестве высокопроизводительного коммерческого хостинга.
• Настройки развертывания могут сбить с толку новичков при первом использовании.
• Менее оперативный, чем инструмент, работающий по принципу перетаскивания и публикации.

здесь.сейчас

here.now — это самый быстрый способ превратить локальное приложение в работающий URL-адрес. Он особенно хорошо подходит для небольших статических приложений, созданных с помощью агента или помощника по программированию.

Плюсы:

• Очень быстрый процесс публикации.
• Подходит для быстрых демонстраций и предварительного просмотра.
• Бесплатный аккаунт поддерживает постоянные статические сайты.
• Может размещать обычный HTML, CSS, JavaScript, а также такие ресурсы, как изображения.

Минусы:

• Для постоянного хостинга вам потребуется учетная запись или процедура подтверждения прав.
• Более новая и менее известная платформа, чем GitHub Pages.
• Перед использованием тарифного плана для проектов с высокой нагрузкой следует проверить текущие ограничения.

Пространство для объятий

Hugging Face Spaces — это наиболее специализированный вариант. Он отлично подходит, если вы хотите, чтобы ваше приложение существовало параллельно с демонстрациями, экспериментами или проектами, связанными с искусственным интеллектом.

Плюсы:

• Поддерживает статические HTML-пространства.
• Доступны бесплатные места, предоставляемые с поддержкой процессора.
• Отлично подойдет, если вы уже пользуетесь Hugging Face.
• Впоследствии легко может трансформироваться в приложение на базе Gradio, Streamlit, Docker или машинного обучения.

Минусы:

• Этапы развертывания несколько сложнее, чем два других.
• Требуется блок метаданных README.md, а также файл index.html.
• Публичный URL-адрес — это страница Hugging Face Space, а не универсальный URL-адрес статического сайта.
• Более специфичный для платформы, чем GitHub Pages.

Краткое содержание

Разработка веб-страницы или приложения обычно — это только половина дела. Когда вы хотите поделиться своей работой с другими, развертывание становится наиболее важным аспектом. Конечно, существует множество платных сервисов, которые помогут вам запустить приложение, но для действительно простого приложения или демоверсии возможность бесплатного развертывания — это настоящее преимущество.

Я показал 3 разных способа бесплатно развернуть статическое приложение в интернете. Честно говоря, у всех них схожие рабочие процессы развертывания и сложности реализации, и я думаю, вы не ошибетесь, выбрав любой из них.

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

Для справки, вот три бесплатных URL-адреса, которые я создал для «Starline Defender»:

GitHub Starline Defenders

здесь.сейчас Starline Defenders

Hugging Face Spaces Starline Defenders

Томас Рид. Все материалы от Томаса Рида.

Источник: towardsdatascience.com