Деплой Frontend приложения. Настройка nginx. Подключаем домен, настраиваем HTTPS, gzip, docker

В этом ролике мы задеплоим frontend приложение на React на облачный сервер, настроим Nginx, подключим домен, настроим https, gzip, посмотрим на конфигурацию докера.
Текстовая версия видео (Статья с инструкцией): slc.tl/7njx9
Гибкие облачные серверы от 10 рублей в день: slc.tl/we3op
Ссылка на исходный код - github.com/utimur/vite-boiler...
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
Ссылка на мой телеграм канал - t.me/ulbi_tv
Таймкоды:
00:00 ➝ Введение
00:40 ➝ План урока и обзор проекта
03:00 ➝ Аренда облачного сервера
04:40 ➝ Подключаемся по SSH
06:00 ➝ Настраиваем окружение. Устанавливаем git, nodejs, npm
09:10 ➝ Устанавливаем и настраиваем nginx. Делаем деплой приложения
18:20 ➝ Сжатие бандла. Настраиваем gzip nginx
21:15 ➝ Регистрируем и подключаем домен
25:20 ➝ Настраиваем сертификаты. HTTPS
29:40 ➝ Обновляем приложение на облачном сервере
32:40 ➝ Сохраняем nginx конфиг и смотрим на docker конфигурацию
35:10 ➝ Не забудь поставить лайк и написать комментарий для
продвижения видео, всем спасибо за поддержку!)
Поддержать меня и мой канал вы можете по ссылкам ниже.
Ссылка на мой телеграм канал - t.me/ulbi_tv
Patreon/boosty (доступ к бонусам) - boosty.to/ulbitv
Qiwi кошелек - qiwi.com/n/BODYE821
Яндекс деньги - yoomoney.ru/to/4100116193037469

[@user-dw8lb8lc7u]

это ровно те знания которых обычно не хватает жаваскрипизёрам и большинство гайдов на ютубе по этой теме слабые и неполные спасибо Тимуру за контент!

[@user-mo4ne2gi9o]

Блин не могу остановиться ржу над скрипизёрамм🤣

[@carved1883]

Чаще всего это нужно девопсерам

[@martingerman2457]

да перестань, тут тоже поверхностно все

[@kristinavolk2660]

Искренние душевные благодарности, Тебе , Тимур! За то, что продолжаешь радовать наши глаза и уши таким качеством контента, ёмкостью информации и толчку (пинку 🤭) на подумать! Действительно до сих пор удивляюсь как ты искусно ужимаешь инфу похлеще, чем какой-нибудь gzip)) Здоровья и сил, тебе)😇

[@user-fq3bl6ws2t]

Кто ЗА большой урок по докеру - лайк!

[@leonidberezin7320]

Считаю что требуется отдельное видео для ssr с докером и большим количеством фишек

[@user-zf3ze8wn7c]

Тимур, такого слова, которое бы точно определяло тот размер благодарности которого ты заслуживаешь, пока ещё не придумали, поэтому ограничусь старым добрым спасибо... Но ты должен чётко понимать, что это не простое спасибо: это огромнейшее спасибо!

[@Ramosok]

Очень жду твоих новых выпусков, спасибо.

[@Slavec5]

Спасибо, что всё очень подробно объяснил. Примерную картину представлял, было полезно про сертификат и иклюды в nginx

[@natalyaiv3414]

Спасибо, Тимур😊 Нужное видео. Очень-очень нужное 👍❤️

[@evollt]

Ulbi TV, ты не поверишь. Только вчера сел изучать nginx и уже сегодня утром ты залил видос о нем) Ты просто читаешь мысли)

[@user-st2fj8rt7v]

Посмотрел ровно минуту, но уже хочу сказать огромное спасибо тебе Тимур! Это очень нужный и важный контент

[@user-fq6sh6jh6s]

Тимур, спасибо тебе! Очень полезное видео!

[@k1llrill_cs]

Ту лучший, всегда радуешь качественным контентом, не останавливайся!

[@evgeny9945]

Возвращаюсь к этому видео не первый и не второй раз, всегда нахожу ответ на свой вопрос) Это гениально, спасибо автору

[@UlbiTV]

🤝

[@user-ji4xt3pn6e]

Спасибо, всё понятно и просто. Хотел бы добавить, что если пользуетесь vs code, то есть расширение для sftp и отображать структуру сервера у себя в vs code и в визуальном формате перекидывать файлы и папки, а так же их править находясь в powershell, а сразу в vscode

[@user-pt9wf1ug8n]

Спасибо большое за данное видео, очень полезные знания. Очень бы хотелось увидеть такое же видео, но по next js

[@ruslankashapov5443]

Просто космос! Год назад на эту тему задумывался, нормальной информации не было. Спасибо!

[@smeerch1892]

Еще не смотрел, но уже знаю что будет полезно и хорошо. Спасибо тебе

[@hardlabor9412]

Нативная реклама - оченб полезно😊

[@user-rt5wg9pz2u]

Пожалуйста

[@azikdinal2055]

​@@hardlabor9412 нытикам не сюда.

[@pashadotcenko7391]

Его ролики вообще обязательны к просмотру))

[@ipa_stor]

Тимур как всегда даёт мотивацию развиваться и делает максимально качественный контент. Спасибо большое за то, что заставляет развиваться и делаешь всё, чтобы зрители совершенствовались ❤❤❤

[@user-bb4oo5es6z]

Огромная благодарность за видео, особенно за часть с .nginx и докером, это то что было необходимо для решения головной боли с обновлением приложения из 5 частей.

[@konstantinpodgaets2313]

Это были невероятные 30 минут по уровню концентрированной полезности. Всегда бы так, когда ищешь материал для самообучения)

[@LionKingheh]

Спасибо, это как раз то, чего мне не хватало!

[@enveryakubov6855]

Как всегда информативно и без лишней траты времени. Спасибо! Еще не хватает обзора по SEO и инструментам для анализа SEO оптимизации. Часто бывает что оптимизацию как бы сделали, а какими параметрами для оценки проведенной работы не знаешь. Низкий поклон)

[@motolife4900]

Воу, воу.. Как обычно топ контент из IT. Спасибо! Невероятный канал

[@khayakhaya2953]

Супер полезное видео! Спасибо большое !

[@dinliri472]

Тимур, ну где ты был пару недель назад?) Я так намучался с этим. Но все же все настроил, теперь зато есть практический бесценный опыт. А под видео однозначно лайк, как и всегда)

[@user-mo4ne2gi9o]

Просто великолепно, спасибо за труд

[@vore770]

Ulbi TV бро прошу сделай такое же видео только с каким-нибудь сервером типа node.js + express лайк что бы автор увидел

[@FobosWorld]

Так тоже самое всё, только вместо статики надо nginx на твой бек редеректить

[@lisalisa2425]

Тимур, спасибо! Очень полезно как всегда! Ещё очень бы хотелось увидеть вариант с ssr на каком-нибудь экспрессе и его деплой♥

[@ksushakiseleva2644]

Спасибо за это видео, то, что нужно, когда нужно, прямо в точку. Ты лучший! ❤

[@Evgeny..]

Тимур привет! Спасибо тебе за видео инструкцию по деплою приложения. React, nginx, deploy, server

[@STELLS541]

Только начал смотреть, но уже влепил лайк и написал коммент, ибо знаю, что будет годно))))) За докер вот отдельный респект, когда-то на пхп пробовал в докер, но там был бэкенд же, а вот можно ли упаковать фронт в докер - это даже сразу так и сложно сказать, как раз узнаём это из ролика 💪🏻🙏🏻.

[@jus1xd193]

черт буквально пару дней назад бы выпустил! столько намучался, но все равно спасибо за материал, уверен очень ценный ролик

[@konstantinchuykov]

Хочу вторую часть. Где GitHub Actions собирает образ в Container Registry, и в локальном раннере на сервере подтягивает и запускает этот образ. Ну или какой-то более простой CI, чтоб на сервер ходить не нужно было, чтоб достаточно было создать релиз на гитхабе

[@visionxpro6956]

+, ведь именно это используется в реальных кейсах

[@usernamer519]

Огромное спасибо!! Твой контент на вес золота!

[@janikhawk1217]

Большое спасибо за подробный видео урок!

[@Maria-eg4hj]

Тимур, классный ролик, спасибо огромное за проделанную работу! Ты лучший!

[@bm-algoritmik]

Тимур спасибо! как всегда на уровне! Отдельно пожелаю создать вторую часть - с бэк на ноде + бд + фронт (процессы на pm2). За сертификат отдельно лайк 👍

[@falsetrue7910]

Редко ролики выходят последнее время, всегда жду И под каждым видео пишу комментарии и смотрю до конца, это меньшее что я могу сделать

[@dontcode]

Подобное я делал уже на твоем курсе, но было полезно закрепить, оч хороший справочник по деплою простого фронтенд проекта.

[@Evgeny..]

​@@user-rt5wg9pz2uконечно, мы( выпускники курса) теперь везде его будем рекламировать))

[@user-tf1rn7qq2p]

как раз недавно искал подобное видео, спасибо большое!

[@whyspxcyyy]

Как же это полезно, редко пишу комментарии но ты реальный красавчик, как получу первые деньги с джаваскрипта обязательно тебя поддержу за этот труд!

[@mr_adw]

Спасибо за контент, посмотрел с удовольствием!

[@alexnaderklivets7225]

Вижу новый ролик от юби сразу лайк)

[@lemexaxa]

Низкий поклон за такую инструкцию!!! Бесценная информация.

[@barbatage5078]

Тима, благодарю! Очень ждала

[@ewgenbi]

Дружище, спасибо за контент, в первую очередь. Ну скажи ты, что тебе селектел заплатил за рекламу. Я ничего против не имею. Но блин называй вещи своими именами. Нужно добавить А-запись и т.д. Видео твои крутые, вопросов нет.

[@kinofan_org]

Изумительно!) Контент 🔥 подача - топчик, без лишних слов и по существу. Но по хорошему было бы ещё показать клонирование приватного репозитория и в кратце объяснить, как работать с vim

[@Virisound]

Божечки, как же было интересно 🥲 Спасибо, Человек из ютуба.

[@ivanmorhun3662]

Блин, как же я ждал этого ролика.

[@eunicsi]

Как всегда кратко и по делу. Спасибо!

[@kat_katchinskiy]

В два слова объяснить для чего нужен Nginx - "что бы отдать статику", а то придурки на ютубе наделают миллион ролликов по 10-20 минут и хрен пойми для чего нужен nginx. Большое спасибо, ролик полезный.

[@orthodox-chanel]

не только, nginx еще проксирует запросы и перенаправляет их на сервер из под которого может работать приложение типа uvicorn, gunicorn и тд

[@zloypapafan-ghost2875]

Не смотря - заранее кидаю в плейлист на будущее и лайк автору.

[@unicoxr5tj417]

давно тебя не было Улби)

[@romanr5962]

как раз то, что было нужно!

[@falantogan92]

Полезное видео. Спасибо. У меня стало появляться общее представление и понимание того как все это работает. Всегда было ощущение что это какая-то непостижимая магия.

[@alexxxpo]

Большое спасибо! Очень полезный контент!

[@data-center-project]

Очень годный контент! Благодарствую!

[@levshportak5401]

Просто поток небесной манны в уши, годнота полная, обмазался аж руки зачесались задеплоить что-нибудь)) спасибо очень круто!!!

[@TitovValek]

Вообще лучший! а то пока техподдержку дождёшься - сто лет пройдёт. А с этим гайдом вообще всё понятно и быстро получилось. Реально лучший! Спасибо! Глубочайшая благодарность!

[@user-tc1kk8vc8q]

большое спасибо за работу, которую ты проделываешь

[@El-zp6ov]

Благодарю! Отличная подача информации, ясно и кратко, пока я не решила это реализовать.)

[@demidovmaxim1008]

Большое Вам спасибо за выпуск. Очень полезная выжимка.

[@yans8930]

Очень много полезной инфы. Больше спасибо за видео)

[@Plovchik90]

Спасибо. Давно такое искал. То что нужно.

[@visionxpro6956]

Тимур, давай видос про next 13 , ибо это самый популярный фреймворк для разработки на реакте, полезно хотя бы знать про него, + фишки про isr, SSR, и всякие стратегии рендера

[@spadar1602]

Как вовремя дядь, огромное спасибо, поцеловал бы в десна.

[@psixoz3143]

Просто лучший, очень сильно такого видоса не хватало

[@user-bx8by5gb3l]

Супер, сижу уже 3 дня пытаюсь настроить фронт на сервере и думаю вот бы Ulib TV выпустил видос с объяснением как это все делается. Однозначно лайк, колокольчик))) Все видео уроки прост топ, лучше не найду)

[@sartjhon3300]

Благодарочка. Понял мало чего, но за то понял куда копать.

[@MrBombeman1]

Спасибо большое! Очень познавательный видос!

[@bestcoub9451]

Как всегда топ🔥🔥

[@user-in8vs7yv3e]

Спасибо огромное за этот урок

[@BrestSouth]

Спасибо тебе огромное! Продолжай!

[@user-nv7kv1hj9y]

как всегда пушка, спасибо за труды

[@user-ux4le1tf3y]

Где ты был две недели назад! Все пришлось самому искать и изучать =)

[@JS_Skyline]

Плюсую за докер. Нужно подробное видео!

[@daipohuy]

Не, ну это лайк не глядя 😀

[@sattorerror]

Ураа, наконец-то деплой Просто лучший!!

[@ngnl820]

Крутой видос, концовка хорошая

[@sergsergey4251]

Спасибо за очередное отличное видео

[@user-lf5kk3bx9p]

Спасибо за практику! Добавьте еще информацию про деплой SSR проекта.

[@makeevdimitry]

эххх такой квест испортил кому-то, когда поделился сакральными знаниями как выйти из Vim'а)) p.s: спасибо за видео!)

[@NovikovEugene84]

Боже, какая же у этой песни энергетика!

[@degradinguser]

Очень бы хотелось что бы ты снял видео про загрузку fullstack, например express + react. Огромное спасибо)

[@makssaga]

Потдерживаю

[@minicodetutorials5310]

+

[@bigbigfoot3365]

аналогично

[@greiner.1]

Супер! Спасибо за ролик 👍

[@Reenya577]

Спасибо, как раз искала эту инфу

[@constyak9031]

Лайкос авансом.

[@Leshgans]

Лайк не глядя, сходу

[@user-nb1is5wc4k]

Замечательный ролик, было полезно. Спасибо!

[@novikov-pavel]

Классный урок, спасибо. Ещё бы сюда добавить докер полноценный - вообще огонь был бы)

[@egorbystrov9770]

Спасибо, как раз в тему, закрываю свой первый проект

[@scorpion_msk]

respect man! your content is one of the best!

[@nikolaivasilev5428]

Огромное спасибо за виде, очень полезно!!!

[@user-lr5xx8sl7l]

Тимур, спасибо!! Очень круто!! А я ручками по RDP сборку закидываю) , а настройка nginx похожая)

[@egorpobylets6597]

Отличное видео по deploy

[@user-dw4pi5gy7t]

Большое спасибо за контент.

[@koreikin]

Залетаю сразу с лайка, другого и не бывает. Только с тобой расту как программист

[@Abramov1]

Спасибо ! Очень полезное видео, сделай еще пожалуйста видео по тому, как деплоить фронт + бэкенд ,как их между собой подключать и тд. И как еще на next.js деплоить тоже было бы интересно

[@xxcrypt234]

я деплоил, это был полный пиздец. неделя боли и страданий

[@romalvekasi5307]

Спасибо! Было очень полезно

[@nikitasafonkin3077]

вот прям мысли читаешь ! сделал фронт и бэк, и сижу думаю, как это заказчику показать... Респект мужик !

[@rashch676]

Можешь это бесплатно сделать, front - vercel, back - railway, база данных можно supabase для postgres

[@andrsh9388]

@@rashch676 Привет на верселе также можно домен подключить?? типа купить на другом сервисе и подключить в личном кабинете верселя к своему проекту??

[@nikitasafonkin3077]

@@rashch676 тут такие дела , что авторизация через куки реализована, короче на одном ресурсе все должно быть