Я создаю приложение React, использую приложение create-Reaction-app и размещено на Netlify.
Приложение является двуязычным, и хотя пользователи могут переключать язык, на котором отображается контент, оно должно быть установлено по умолчанию в зависимости от местоположения. В частности, пользователи из Японии должны видеть контент на японском языке по умолчанию, а пользователи из других стран должны, на данный момент, видеть контент на английском языке по умолчанию.
Netlify предоставляет некоторые аккуратные инструменты для определения страны происхождения пользователя и использования ее для определения, куда отправить пользователя. Но я просто ходил взад и вперед с их командой поддержки, и мы не можем придумать решение, которое бы обрабатывало перенаправление со всех некорневых путей в мой основной файл index.html (необходимый для прямой ссылки на подпути). в моем SPA), а также делает то же самое для японских пользователей, передавая информацию о том, что они находятся в Японии.
Аналогичным образом, я попробовал ряд решений на внешнем интерфейсе для определения IP-адреса пользователя и страны путем использования IP-API (не идеально, потому что это добавляет задержку, но лучше, чем ничего). Но все решения, которые я пробовал (фактически, каждая бесплатная опция на этой странице ) были заблокированы моим блокировщиком рекламы - и, поскольку у других людей есть блокировщики рекламы, это довольно неидеальное решение.
Я открыт для прокси-запроса, поэтому блокировщик рекламы не может его остановить, но у меня была другая идея, которую я надеялся опробовать первым:
Создайте 2 отдельные index.html точки входа для моего приложения - одну для Японии, другую для остального мира. Каждая точка входа будет загружать один и тот же код JS, но будет иметь другой корневой узел, из которого мое приложение сможет затем определить язык. Например, одно приложение может иметь это:
<div id="root" class="lang-jp"></div>
Итак, вопрос:
Есть ли способ иметь две разные index.html точки входа, на которые я мог бы перенаправлять, используя перенаправления Netlify, в зависимости от страны происхождения?
Я попытался скопировать файл public/index.html в public/jp-index.html (с добавленным классом CSS) и использовать следующий файл _redirects, но он загружал тот же index.html при посещении из любой страны:
/* /index.html 200
/* /jp-index.html 200 Country=jp
Выполнение обратного (ниже) близко: файл jp-index.html найден, но ему не удается загрузить приложение, потому что интерполяция %PUBLIC_URL% не обрабатывается, поэтому я получаю файл HTML у которого нет действующих ссылок на мое приложение JS (и значок, и т. д.):
/* /jp-index.html 200 Country=jp
/* /index.html 200
Не совсем уверен, как create-реакции-приложение решает, какой файл будет служить корневым каталогом приложения и как его интерполировать. Я прокололся вокруг , но не нашел ничего точно соответствующего моему сценарию использования (несколько HTML точек входа). Возможна ли эта идея? Есть идеи о том, как заставить это работать? (В идеале без извлечения, но я тоже открыт для этого).
Обновление
Я понял (дух), что соответствующий HTML-файл находится в каталоге build, где он написан как часть команды build. Таким образом, у меня возникла идея, состоящая в том, чтобы добавить в команду сборки шаг, который будет копировать файл build/index.html после интерполяции в файл build/jp-index.html, который будет отличаться только тем, что класс будет добавлен в корневой узел.
Правильный файл jp-index.html загружается из Японии, но запросы на соответствующие файлы CSS / JS вместо этого извлекают тот же самый файл jp-index.html, я думаю, из-за перенаправления Netlify. Не уверен, как обойти это, но хотел поделиться в случае, если кто-то еще какие-либо идеи.