Как загрузить сайт React JS на хостинг


1 580 просмотров.

Краткое описание видео: .всем привет друзья вы на канале web.developer блок не забывайте подписаться.на канал а так же поставить лайк этому.видео мы продолжаем курс урока верстки.порядке с применением bootstrap для.начинающих друзья для разработки сайта в.этом курсе уроков я использую хостинг.хинди хост это проверенный хостинг с.хорошей репутацией и отличной службой.поддержки по ссылке в описании вы.получите специальный бонус от меня два.месяца хостинга бесплатно.переходите и регистрируйтесь в прошлом.видео мы создали последнюю страницу в.нашем сайте и фактически можно.предположить что наш сайт наряд джесс.готов далее нужно загрузить его на.хостинг но здесь есть некоторые нюансы и.в этом видео я вам их покажу сейчас.react джесс приложение лири.или же react джея сайт работает на вашей.локальной машине то есть это у вас.локалхост и порт чтобы данное приложение.загрузить на хостинг и дать возможность.другим людям его посетить нам нужно.заменить локальный адрес на доменное имя.чтобы развернуть как джесс приложения на.хостинг во первых его нужно забил деть.то есть построить для этого нам нужно.ввести команду.npm ран build если вы использовали.npm если вы использовали yarn то тут все.проще просто вводите yarn билд в папке.вашего сайта или в папке вашего.приложения соответственно после.исполнения данной команды у нас.создается папка билд и при переходе в.нее у нас здесь будут создаваться.определенные файлы эта папка сборки и.содержит все ваши статические файлы.проекта можем например открыть индекс.html visual studio куат но здесь все.будет мини fits и равана и в дальнейшем.мы не будете работать с данным файлом.и давайте также попробуем открыть в.браузере то есть сейчас у нас ничего не.отобразится.а все дело в том что и для загрузки.данного сайта нам необходимо подключить.локальный сервер для запуска приложений.в терминале нам сразу предлагаются.команды которые нужно выполнить данном.случае это ярно global этот серв и surf.билд с флагом с соответственно давайте.их выполним и запустим далее мы просто.копируем данный путь то есть на слух.локалхост.и порт здесь нас сейчас будет 5 тысяч ну.и соответственно наш сайт вот он нас в.рабочем состоянии что ж давайте закроем.его окей с этим разобрались теперь.давайте перейдем к хостингу в данном.курсе мы используем хостинг хинди хост у.них есть тестовый режим на 30 дней для.этого вам нужно перейти на вкладку.хостинг сайтов далее попробовать здесь.нажимаем получить.вводим ваше имя и email и соответственно.получаете 30 дней хостинга бесплатно с.тестовым доменном и сейчас я покажу как.с ним работать и как вообще загрузить.сайт реакции на данный хостинг.после того как вы ввели все данные вам.на почту придет вся необходимая.информация о частности письмо будет.выглядеть так только мне пришлось все.замазать чтобы у вас не было этих данных.но думаю что с этим все понятно далее.чтобы загрузить приложение на свой.учетную запись хостинга вам нужна.программа файл зила она есть как под.макияж так и под windows не что этот.способ наиболее удобным так что в видео.покажу именно его для того чтобы.получить соединение по ftp давайте.загрузим файлзиллу соответственно.интерфейс программы для подключения по.ftp выглядит таким образом сейчас вы.увидите на экране надеюсь что вы тоже.скачали и тоже пробуйте вместе со мной.далее вам нужно ввести сюда определенные.данные это хост это имя пользователя.пароль и порт эти данные вы можете.получить в данном поле там где доступ по.фтп копируйте и пи адрес это у нас host.the leopard.имя пользователя и так же пароль.соединение у нас установлена и мы.подключились успешно по ftp к нашему.хостингу что у нас далее сейчас вы.можете перейти на прикрепленный домен.это будет ваш тестовый домен он у нас на.он у вас находится здесь и по нему вы.можете перейти на сайт в данном случае у.меня отсутствует страница потому что я.ее удалил.далее вам нужно перейти в папку www.здесь будет написан ваш домен который у.вас является тестовым сейчас и здесь у.меня нет файлов потому что я их удалил у.вас здесь будет если я не ошибаюсь два.файла индекс html еще какой-то и далее.сюда остается только загрузить.внутреннее содержимое папки build.давайте же это сделаем вот моя папка.build я просто копирую все в папку моего.домена соответственно в доме не наш сайт.сейчас должен появиться все у нас.скопирована успешно перезагружаем наш.страницу и как вы видите на нашем доме.не появился наш сайт ну тут есть тоже.некоторые нюансы в принципе первый.успешный шаг уже пройден далее если мы.захотим перейти на другую какую-то.страницу то мы получим ошибку то есть.наш велел будет не найден ok.но мы всегда можем это решить для этого.нам понадобится создать еще один файл.перейдем в папку билд и внутри папки.build там где у нас лежит файл index.page tml сюда мы создаем новый файл он у.нас называется аж текст с таким образом.и в данный файл вам нужно скопировать.такое содержимое oj txs это файл.дополнительной конфигурации веб-сервера.apache а также ему подобных серверов он.позволяет задавать большое количество.дополнительных параметров и разрешений.для работы веб-сервера у отдельных.пользователей таких как управляемый.доступ к каталогам предназначение типов.файлов и так далее это происходит не.предоставляя доступа к главному.конфигурационном у файлу то есть не.влияет на работу всего сервиса целиком.соответственно мы не будем углу.отца в все значения файл h текст с.данная содержимое я оставлю где-нибудь в.комментарии и закреплю его чтобы вы.быстро скопировали его.и у вас также все получилось.соответственно последний шаг который вам.нужно сделать это вам нужно обновить.каталог в файл зила и скопировать данный.файл.к вам в папку вашего проекта на хостинге.соответственно обновили переходим google.chrome перезагружаем нашу страницу и.соответственно все страницы теперь мы.можем посетить в целом вот такая вот.несложная работа с react джесс на.хостинге.мы использовали хостинг энди хост.попробуйте и вы абсолютно бесплатно всем.рекомендую а на этом у меня все всем.огромное спасибо за ваш просмотр.ставьте like этому видео до новых встреч.всем огромной огромной удачи и пока

Как загрузить сайт React JS на хостинг

Как? Вы еще не смотрели? Ну это зря...