Недавно я хотел настроить ссылку для перенаправления людей, которые либо нажимали на ссылку, либо сканировали QR-код, чтобы они попадали в соответствующие магазины приложений на IOS или Android для моего приложения React Native. Я уверен, что есть несколько веб-сайтов, которые делают это, но я предпочел, чтобы это было под моим доменом, и не хотел за это платить.
Я подумал, что попробую использовать функции CloudFront. Было немного сложно настроить с помощью CDK, но я доволен тем, как все получилось, поэтому решил поделиться, если кто-то захочет настроить подобную вещь.
Вы можете подумать, не слишком ли настройка целой CDN для перенаправления на основе заголовка пользовательского агента? Вероятно. Но на самом деле кода не так уж и много, пользователям не придется ждать холодного запуска или испытывать задержки на расстоянии, а CloudFront оплачивается по мере использования. Так почему бы не.
Я собираюсь писать код CDK на Typescript и не буду углубляться в настройку Route53 или проекта CDK, поскольку по этим темам существует множество учебных пособий.
Стек CDK
Первое, что следует отметить: убедитесь, что этот стек развернут в us-east-1, поскольку именно там должны быть развернуты функции/дистрибутивы CloudFront.
Сначала в стек CDK мы хотим добавить что-то вроде этого:
В стеке мы создаем распределение Cloudfront, корзину s3, сертификат ACM и функцию Cloudfront.
Ведро на самом деле здесь ничего не делает, но для распределения нужен какой-то источник. Обратите внимание, что мы устанавливаем функцию Cloudfront как запрос просмотра, что означает, что она будет запущена до того, как запрос дойдет до источника.
Поскольку мы будем настраивать функцию перенаправления запроса, запрос никогда не доходит до корзины.
Другой ключевой частью конфигурации является строка:
originRequestPolicy:
cloudfront.OriginRequestPolicy.ALL_VIEWER_AND_CLOUDFRONT_2022,
Это говорит Cloudfront пересылать нашей функции заголовки, которые нам понадобятся для перенаправления в зависимости от типа устройства. Вы можете прочитать больше об этом здесь:
Функция CloudFront
Далее нам нужен js-файл, на который мы указали функцию CloudFront в стеке:
Обязательно совместите путь к функции с тем, что вы установили в стеке. В нашем примере этот файл находится по адресу src/functions/app-store-redirect.js.
Функция использует заголовки CloudFront, которые мы указали для пересылки в источник. Настройте это в соответствии со своими потребностями, поскольку, вероятно, его можно использовать не только для этого простого варианта использования. Обязательно используйте перенаправление в каждом сценарии, если вы не настроили корзину для обработки запросов, иначе вы получите сообщение об ошибке.
Маршрут 53
Наконец, нам нужно создать запись, чтобы сообщить Route53 указать любой домен/путь, который мы хотим, к дистрибутиву Cloudfront.
Я просто использовал консоль для создания записи, используя псевдоним. О том, как это сделать, читайте здесь:
И все: если пользователи используют iPhone, они будут перенаправлены в магазин приложений IOS, а если пользователи Android — в магазин Google Play.
Надеюсь, вы нашли это полезным.
