Блог

Я совершенно новичок в react, но разрабатывал React SPA с использованием create-react-app пакета. Я также разрабатывал API с использованием Laravel и Laravel Sanctum. Все конечные точки моего API находятся в api.example.com . Я хотел бы иметь свой SPA по адресу example.com . В настоящее время API и SPA находятся в разных репозиториях. Я никогда не развертывал приложение React и не уверен, как их объединить для правильной работы.

Это может быть неуместно, поскольку мой Laravel API был создан и запущен в Homestead vagrant box, а SPA только localhost:3000 что запущен.

Этот вопрос может быть слишком широким, но любые ссылки на соответствующую информацию или примеры приветствуются.

Мне нужно знать, как правильно использовать npm / craco build упаковывать SPA, а затем как объединить это с моим Laravel API. Я бы предположил, что могу хранить их в разных репозиториях.

Мой SPA должен быть в example.com состоянии взаимодействовать с api.example.com использованием функций CSRF Sanctums.

В настоящее время читаю этот документ

Таким образом, running npm run-script build будет запускать craco build и создавать уменьшенные и скомпилированные файлы js и css в каталоге сборки. Теперь мне нужно знать, как взять этот каталог сборки и развернуть его example.com , чтобы с ним можно было взаимодействовать api.example.com . Могу ли я добавить этот каталог куда-нибудь в репозиторий API?

Одностраничные приложения — это по сути просто веб-страницы.

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

1. Создание приложения

Когда вы запускаете cracao build , вы получаете build папку с готовой к производству сборкой. Сборка выполняет несколько оптимизаций (например, объединяет приложение для браузеров, которые не поддерживают модули, сокращает пространство и т.д.) и выдает выходные данные в папке сборки.

2. Размещение приложения

После создания вы можете разместить свое приложение на любом сервере (даже что-то вроде S3 будет работать нормально), к которому у вас есть доступ с фиксированным IP-адресом. Теперь вы должны иметь возможность напрямую посещать IP-адрес и просматривать сайт!

Но функциональность приложения, вероятно, нарушится, потому что (как вы упомянули) CORS будет препятствовать доступу из разных доменов.

Чтобы исправить это, вам необходимо настроить сервер имен, чтобы указать домену новый IP.

3. Непрерывное развертывание (необязательно)

Вероятно, вы могли бы настроить конвейер CI / CD для автоматизации процесса сборки и загрузки приложений, поскольку это может стать утомительным. Процесс для этого будет запускать cracao buld и загружать выходные данные в правильный каталог.

Можете ли вы поддерживать два репозитория?

Да! Несмотря на то, что они должны использовать один и тот же домен, вы можете хранить приложения в двух репозиториях и иметь два разных конвейера CI / CD для развертывания ваших приложений в нужных местах.