# #reactjs #firebase #heroku #html5-canvas #hosting
Вопрос:
Требование
Я ищу, чтобы разместить веб-сайт, который содержит несколько игр html5. Похоже на игры Poki или любую другую платформу для веб-игр.
Что я понимаю
Я просмотрел их веб-сайт (Poki Games) и обнаружил, что несколько значков игр html5 перечислены на веб — сайте в виде сетки. И при нажатии на любой из значков игры веб-сайт начинает загружать эту конкретную игру из внешнего источника внутри iframe.
На что мне нужен ответ
Я хочу знать, как они обслуживают несколько игр html5 из другого домена. Поскольку каждая из игр загружена в iFrame, я знаю, что у всех у них есть свои собственные index.html
Как добиться того же самого, какие подходы я должен использовать? Так что, если я это сделаю
<iframe src="//another.domain.com/randomHtml5Game_1"> // will load randomHtml5Game1 game
<iframe src="//another.domain.com/randomHtml5Game_2"> // will load randomHtml5Game2 game
Мой набор навыков
Я в первую очередь разработчик интерфейсов, у меня есть опыт работы с хостингом в heroku. Также есть некоторый опыт работы с firebase. Я буду использовать React вместе с phaser для разработки.
Ответ №1:
Насколько я понимаю ваш вопрос, ответ очень прост.
Просто используйте разделение кода и разные точки рендеринга.
У нас была бы наша домашняя страница с различными ссылками на другие страницы (сетка изображений). Когда мы нажимаем на изображение, оно меняет маршрут.
www.domain.com/game1
www.domain.com/game2
www.domain.com/game3
Вам нужно будет кодировать разделение маршрутов различными способами. Вы можете использовать webpack или NextJS (более простая платформа), или если вы просто используете приложение create-react, просто используйте suspend и lazyload.
На определенном маршруте он загрузит ваш html и javascript и запустит игру.
Я собираюсь догадаться, что это не тот ответ, который вы ищете, но это только начало ?
Дайте мне знать вашу мысль ?
Даниил
Комментарии:
1. Какое совпадение!, я просматривал видео на NextJS. Я попробую это сделать и посмотрю, соответствует ли это моей цели.
Ответ №2:
Firebase поддерживает размещение нескольких сайтов/доменов с использованием одного проекта. Вы можете разделить каждую игру в папку и разместить каждую из них отдельно и в другом домене.
Вы можете узнать больше об этом здесь.
Я использую это, например, при развертывании веб-приложений. Один домен-это приложение, подобное app.appname.com затем еще один домен www.appname.com является целевой страницей, и если проект как REST API я размещаю под api.appname.com. В моем случае я просто использую разные префиксы, но весь домен и URL-адрес могут отличаться.
Преимущество заключается в том, что если вы используете другие функции Firebase, вы можете совместно использовать их между всеми этими проектами. Например, проверка подлинности или базы данных.
Комментарии:
1. это тоже помогает. Подход, который я использую, представляет собой комбинацию как Gadd, так и вашего ответа. Спасибо, что сообщили мне об этой функции firebase