Какими способами можно развернуть приложение Reactjs
Итак, я потратил пару месяцев на изучение реакции и теперь создал приложение реагирования, которое прекрасно работает на моем локальном компьютере с использованием веб-адреса localhost: 3000. Но теперь возникает большой вопрос: как мне развернуть приложение, чтобы оно стало доступным в Интернете для всеобщего обозрения. Раньше у меня было место в веб-отеле, где я мог разместить некоторые файлы php. Но как мне разместить приложение React в этом веб-отеле? Или мне нужна какая-то другая услуга, с которой не справится обычный веб-отель.
Спасибо за любую помощь
/ Саймон :-)
Ответы 4
Короткий ответ - просто запустите npm run build или yarn buildкоманда, затем сценарии попытаются создать файл js, файл CSS и файл HTML, и все ваши файлы могут получить доступ из папки build. поэтому просто скопируйте папку сборки и все, что в ней, на сервер, например, загрузите ее в Heroku или AWS
Есть несколько отличных вариантов для выпуска вашего первого приложения React. После создания и размещения на GitHub появляется несколько бесплатных вариантов развертывания статических веб-сайтов (при условии, что ваше приложение соответствует этому требованию). Я предлагаю проверить GitHub Pages (https://pages.github.com/) или Netlify (https://www.netlify.com/); они предлагают вам инструменты для развертывания прямо из вашего репозитория.
Сначала вы должны создать build. Используйте npm run build или, если вы используете yarn, используйте команду yarn build. После этого вы увидите папку сборки в своем приложении со статической папкой html файла.
Вы можете протестировать с любым локальным сервером на вашем компьютере. Вы можете использовать следующее расширение Chrome для локального развертывания приложения. Просто импортируйте папку сборки в это расширение. Веб-сервер для Chrome
Спасибо, Кейт!
Я использовал «страницы Github» для развертывания моего приложения React, и это было на удивление просто. Я нашел на Youtube отличный короткий 5-минутный туториал: "https://thewikihow.com/video_1Y-PqBH-htk". Вот как я это сделал:
Добавил эту строку в мой файл package.json на верхнем уровне: "домашняя страница": "https://zimon42.github.io/helloworld" (zimon42 - ваше имя пользователя на Github. helloworld - это имя вашего репозитория)
Установил так называемый модуль страниц Github, запустив: npm install --save gh-pages
Добавил эти две строки в мой файл package.json в разделе скриптов: "predploy": "npm run build", "развертывание": "gh-pages -d build"
Зафиксировал и отправил все в Git (не знаю, нужен ли этот шаг)
Развертывание приложения путем запуска npm запустить развертывание
Теперь просто проверьте страницу по адресу https://zimon42.github.io/helloworld. (Для меня была задержка до того, как изменения вступили в силу.)
Также мои маршруты не работали. Получилась пустая страница. Но увидел это видео: https://thewikihow.com/video_7yA7BGos2KQ&t=114s, в котором вместо этого описывалось использование HashRoutes, и тогда это сработало!
/ Саймон :-)