Тёмный

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

Ulbi TV
Подписаться 299 тыс.
Просмотров 92 тыс.
50% 1

В этом ролике мы задеплоим 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

Наука

Опубликовано:

 

2 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 330   
@user-dw8lb8lc7u
@user-dw8lb8lc7u 9 месяцев назад
это ровно те знания которых обычно не хватает жаваскрипизёрам и большинство гайдов на ютубе по этой теме слабые и неполные спасибо Тимуру за контент!
@user-mo4ne2gi9o
@user-mo4ne2gi9o 9 месяцев назад
Блин не могу остановиться ржу над скрипизёрамм🤣
@carved1883
@carved1883 9 месяцев назад
Чаще всего это нужно девопсерам
@martingerman2457
@martingerman2457 9 месяцев назад
да перестань, тут тоже поверхностно все
@kristinavolk2660
@kristinavolk2660 9 месяцев назад
Искренние душевные благодарности, Тебе , Тимур! За то, что продолжаешь радовать наши глаза и уши таким качеством контента, ёмкостью информации и толчку (пинку 🤭) на подумать! Действительно до сих пор удивляюсь как ты искусно ужимаешь инфу похлеще, чем какой-нибудь gzip)) Здоровья и сил, тебе)😇
@evollt
@evollt 9 месяцев назад
Ulbi TV, ты не поверишь. Только вчера сел изучать nginx и уже сегодня утром ты залил видос о нем) Ты просто читаешь мысли)
@Ramosok
@Ramosok 9 месяцев назад
Очень жду твоих новых выпусков, спасибо.
@Slavec5
@Slavec5 9 месяцев назад
Спасибо, что всё очень подробно объяснил. Примерную картину представлял, было полезно про сертификат и иклюды в nginx
@user-ji4xt3pn6e
@user-ji4xt3pn6e 9 месяцев назад
Спасибо, всё понятно и просто. Хотел бы добавить, что если пользуетесь vs code, то есть расширение для sftp и отображать структуру сервера у себя в vs code и в визуальном формате перекидывать файлы и папки, а так же их править находясь в powershell, а сразу в vscode
@natalyaiv3414
@natalyaiv3414 9 месяцев назад
Спасибо, Тимур😊 Нужное видео. Очень-очень нужное 👍❤️
@dinliri472
@dinliri472 9 месяцев назад
Тимур, ну где ты был пару недель назад?) Я так намучался с этим. Но все же все настроил, теперь зато есть практический бесценный опыт. А под видео однозначно лайк, как и всегда)
@user-zf3ze8wn7c
@user-zf3ze8wn7c 9 месяцев назад
Тимур, такого слова, которое бы точно определяло тот размер благодарности которого ты заслуживаешь, пока ещё не придумали, поэтому ограничусь старым добрым спасибо... Но ты должен чётко понимать, что это не простое спасибо: это огромнейшее спасибо!
@k1llrill_cs
@k1llrill_cs 9 месяцев назад
Ту лучший, всегда радуешь качественным контентом, не останавливайся!
@user-fq6sh6jh6s
@user-fq6sh6jh6s 9 месяцев назад
Тимур, спасибо тебе! Очень полезное видео!
@user-pt9wf1ug8n
@user-pt9wf1ug8n 9 месяцев назад
Спасибо большое за данное видео, очень полезные знания. Очень бы хотелось увидеть такое же видео, но по next js
@user-st2fj8rt7v
@user-st2fj8rt7v 9 месяцев назад
Посмотрел ровно минуту, но уже хочу сказать огромное спасибо тебе Тимур! Это очень нужный и важный контент
@leonidberezin7320
@leonidberezin7320 9 месяцев назад
Считаю что требуется отдельное видео для ssr с докером и большим количеством фишек
@STELLS541
@STELLS541 9 месяцев назад
Только начал смотреть, но уже влепил лайк и написал коммент, ибо знаю, что будет годно))))) За докер вот отдельный респект, когда-то на пхп пробовал в докер, но там был бэкенд же, а вот можно ли упаковать фронт в докер - это даже сразу так и сложно сказать, как раз узнаём это из ролика 💪🏻🙏🏻.
@user-bb4oo5es6z
@user-bb4oo5es6z 8 месяцев назад
Огромная благодарность за видео, особенно за часть с .nginx и докером, это то что было необходимо для решения головной боли с обновлением приложения из 5 частей.
@ipa_stor
@ipa_stor 9 месяцев назад
Тимур как всегда даёт мотивацию развиваться и делает максимально качественный контент. Спасибо большое за то, что заставляет развиваться и делаешь всё, чтобы зрители совершенствовались ❤❤❤
@bm-algoritmik
@bm-algoritmik 8 месяцев назад
Тимур спасибо! как всегда на уровне! Отдельно пожелаю создать вторую часть - с бэк на ноде + бд + фронт (процессы на pm2). За сертификат отдельно лайк 👍
@LionKingheh
@LionKingheh 9 месяцев назад
Спасибо, это как раз то, чего мне не хватало!
@Evgeny..
@Evgeny.. 9 месяцев назад
Тимур привет! Спасибо тебе за видео инструкцию по деплою приложения. React, nginx, deploy, server
@falantogan92
@falantogan92 2 месяца назад
Полезное видео. Спасибо. У меня стало появляться общее представление и понимание того как все это работает. Всегда было ощущение что это какая-то непостижимая магия.
@motolife4900
@motolife4900 9 месяцев назад
Воу, воу.. Как обычно топ контент из IT. Спасибо! Невероятный канал
@user-mo4ne2gi9o
@user-mo4ne2gi9o 9 месяцев назад
Просто великолепно, спасибо за труд
@konstantinpodgaets2313
@konstantinpodgaets2313 4 месяца назад
Это были невероятные 30 минут по уровню концентрированной полезности. Всегда бы так, когда ищешь материал для самообучения)
@ruslankashapov5443
@ruslankashapov5443 9 месяцев назад
Просто космос! Год назад на эту тему задумывался, нормальной информации не было. Спасибо!
@user-fq3bl6ws2t
@user-fq3bl6ws2t 9 месяцев назад
Кто ЗА большой урок по докеру - лайк!
@enveryakubov6855
@enveryakubov6855 9 месяцев назад
Как всегда информативно и без лишней траты времени. Спасибо! Еще не хватает обзора по SEO и инструментам для анализа SEO оптимизации. Часто бывает что оптимизацию как бы сделали, а какими параметрами для оценки проведенной работы не знаешь. Низкий поклон)
@janikhawk1217
@janikhawk1217 9 месяцев назад
Большое спасибо за подробный видео урок!
@whyspxcyyy
@whyspxcyyy 9 месяцев назад
Как же это полезно, редко пишу комментарии но ты реальный красавчик, как получу первые деньги с джаваскрипта обязательно тебя поддержу за этот труд!
@khayakhaya2953
@khayakhaya2953 9 месяцев назад
Супер полезное видео! Спасибо большое !
@mr_adw
@mr_adw 9 месяцев назад
Спасибо за контент, посмотрел с удовольствием!
@kinofan_org
@kinofan_org 9 месяцев назад
Изумительно!) Контент 🔥 подача - топчик, без лишних слов и по существу. Но по хорошему было бы ещё показать клонирование приватного репозитория и в кратце объяснить, как работать с vim
@jus1xd193
@jus1xd193 9 месяцев назад
черт буквально пару дней назад бы выпустил! столько намучался, но все равно спасибо за материал, уверен очень ценный ролик
@falsetrue7910
@falsetrue7910 9 месяцев назад
Редко ролики выходят последнее время, всегда жду И под каждым видео пишу комментарии и смотрю до конца, это меньшее что я могу сделать
@El-zp6ov
@El-zp6ov 15 дней назад
Благодарю! Отличная подача информации, ясно и кратко!
@evgeny9945
@evgeny9945 4 месяца назад
Возвращаюсь к этому видео не первый и не второй раз, всегда нахожу ответ на свой вопрос) Это гениально, спасибо автору
@UlbiTV
@UlbiTV 4 месяца назад
🤝
@usernamer519
@usernamer519 9 месяцев назад
Огромное спасибо!! Твой контент на вес золота!
@ksushakiseleva2644
@ksushakiseleva2644 9 месяцев назад
Спасибо за это видео, то, что нужно, когда нужно, прямо в точку. Ты лучший! ❤
@lisalisa2425
@lisalisa2425 9 месяцев назад
Тимур, спасибо! Очень полезно как всегда! Ещё очень бы хотелось увидеть вариант с ssr на каком-нибудь экспрессе и его деплой♥
@user-tf1rn7qq2p
@user-tf1rn7qq2p 9 месяцев назад
как раз недавно искал подобное видео, спасибо большое!
@alexxxpo
@alexxxpo 9 месяцев назад
Большое спасибо! Очень полезный контент!
@barbatage5078
@barbatage5078 9 месяцев назад
Тима, благодарю! Очень ждала
@Maria-eg4hj
@Maria-eg4hj 9 месяцев назад
Тимур, классный ролик, спасибо огромное за проделанную работу! Ты лучший!
@smeerch1892
@smeerch1892 9 месяцев назад
Еще не смотрел, но уже знаю что будет полезно и хорошо. Спасибо тебе
@hardlabor9412
@hardlabor9412 9 месяцев назад
Нативная реклама - оченб полезно😊
@user-rt5wg9pz2u
@user-rt5wg9pz2u 9 месяцев назад
Пожалуйста
@azikdinal2055
@azikdinal2055 9 месяцев назад
​@@hardlabor9412 нытикам не сюда.
@pashadotcenko7391
@pashadotcenko7391 9 месяцев назад
Его ролики вообще обязательны к просмотру))
@konstantinchuykov
@konstantinchuykov 9 месяцев назад
Хочу вторую часть. Где GitHub Actions собирает образ в Container Registry, и в локальном раннере на сервере подтягивает и запускает этот образ. Ну или какой-то более простой CI, чтоб на сервер ходить не нужно было, чтоб достаточно было создать релиз на гитхабе
@visionxpro6956
@visionxpro6956 9 месяцев назад
+, ведь именно это используется в реальных кейсах
@user-bx8by5gb3l
@user-bx8by5gb3l 9 месяцев назад
Супер, сижу уже 3 дня пытаюсь настроить фронт на сервере и думаю вот бы Ulib TV выпустил видос с объяснением как это все делается. Однозначно лайк, колокольчик))) Все видео уроки прост топ, лучше не найду)
@TitovValek
@TitovValek 4 месяца назад
Вообще лучший! а то пока техподдержку дождёшься - сто лет пройдёт. А с этим гайдом вообще всё понятно и быстро получилось. Реально лучший! Спасибо! Глубочайшая благодарность!
@data-center-project
@data-center-project 9 месяцев назад
Очень годный контент! Благодарствую!
@alexnaderklivets7225
@alexnaderklivets7225 9 месяцев назад
Вижу новый ролик от юби сразу лайк)
@user-tc1kk8vc8q
@user-tc1kk8vc8q 9 месяцев назад
большое спасибо за работу, которую ты проделываешь
@lemexaxa
@lemexaxa 6 месяцев назад
Низкий поклон за такую инструкцию!!! Бесценная информация.
@yans8930
@yans8930 3 месяца назад
Очень много полезной инфы. Больше спасибо за видео)
@eunicsi
@eunicsi 9 месяцев назад
Как всегда кратко и по делу. Спасибо!
@dontcode
@dontcode 9 месяцев назад
Подобное я делал уже на твоем курсе, но было полезно закрепить, оч хороший справочник по деплою простого фронтенд проекта.
@Evgeny..
@Evgeny.. 9 месяцев назад
​@@user-rt5wg9pz2uконечно, мы( выпускники курса) теперь везде его будем рекламировать))
@MrBombeman1
@MrBombeman1 9 месяцев назад
Спасибо большое! Очень познавательный видос!
@demidovmaxim1008
@demidovmaxim1008 8 месяцев назад
Большое Вам спасибо за выпуск. Очень полезная выжимка.
@levshportak5401
@levshportak5401 8 месяцев назад
Просто поток небесной манны в уши, годнота полная, обмазался аж руки зачесались задеплоить что-нибудь)) спасибо очень круто!!!
@kat_katchinskiy
@kat_katchinskiy 8 месяцев назад
В два слова объяснить для чего нужен Nginx - "что бы отдать статику", а то придурки на ютубе наделают миллион ролликов по 10-20 минут и хрен пойми для чего нужен nginx. Большое спасибо, ролик полезный.
@orthodox-chanel
@orthodox-chanel 4 месяца назад
не только, nginx еще проксирует запросы и перенаправляет их на сервер из под которого может работать приложение типа uvicorn, gunicorn и тд
@Virisound
@Virisound 4 месяца назад
Божечки, как же было интересно 🥲 Спасибо, Человек из ютуба.
@Plovchik90
@Plovchik90 9 месяцев назад
Спасибо. Давно такое искал. То что нужно.
@zloypapafan-ghost2875
@zloypapafan-ghost2875 9 месяцев назад
Не смотря - заранее кидаю в плейлист на будущее и лайк автору.
@sartjhon3300
@sartjhon3300 8 месяцев назад
Благодарочка. Понял мало чего, но за то понял куда копать.
@ivanmorhun3662
@ivanmorhun3662 9 месяцев назад
Блин, как же я ждал этого ролика.
@spadar1602
@spadar1602 9 месяцев назад
Как вовремя дядь, огромное спасибо, поцеловал бы в десна.
@romanr5962
@romanr5962 9 месяцев назад
как раз то, что было нужно!
@JS_Skyline
@JS_Skyline 8 месяцев назад
Плюсую за докер. Нужно подробное видео!
@BrestSouth
@BrestSouth 9 месяцев назад
Спасибо тебе огромное! Продолжай!
@ewgenbi
@ewgenbi 9 месяцев назад
Дружище, спасибо за контент, в первую очередь. Ну скажи ты, что тебе селектел заплатил за рекламу. Я ничего против не имею. Но блин называй вещи своими именами. Нужно добавить А-запись и т.д. Видео твои крутые, вопросов нет.
@psixoz3143
@psixoz3143 7 месяцев назад
Просто лучший, очень сильно такого видоса не хватало
@user-ux4le1tf3y
@user-ux4le1tf3y 9 месяцев назад
Где ты был две недели назад! Все пришлось самому искать и изучать =)
@user-in8vs7yv3e
@user-in8vs7yv3e 9 месяцев назад
Спасибо огромное за этот урок
@nikolaivasilev5428
@nikolaivasilev5428 3 месяца назад
Огромное спасибо за виде, очень полезно!!!
@sattorerror
@sattorerror 9 месяцев назад
Ураа, наконец-то деплой Просто лучший!!
@user-nv7kv1hj9y
@user-nv7kv1hj9y 9 месяцев назад
как всегда пушка, спасибо за труды
@unicoxr5tj417
@unicoxr5tj417 9 месяцев назад
давно тебя не было Улби)
@bestcoub9451
@bestcoub9451 9 месяцев назад
Как всегда топ🔥🔥
@user-lf5kk3bx9p
@user-lf5kk3bx9p 9 месяцев назад
Спасибо за практику! Добавьте еще информацию про деплой SSR проекта.
@vore770
@vore770 9 месяцев назад
Ulbi TV бро прошу сделай такое же видео только с каким-нибудь сервером типа node.js + express лайк что бы автор увидел
@FobosWorld
@FobosWorld Месяц назад
Так тоже самое всё, только вместо статики надо nginx на твой бек редеректить
@sergsergey4251
@sergsergey4251 9 месяцев назад
Спасибо за очередное отличное видео
@visionxpro6956
@visionxpro6956 9 месяцев назад
Тимур, давай видос про next 13 , ибо это самый популярный фреймворк для разработки на реакте, полезно хотя бы знать про него, + фишки про isr, SSR, и всякие стратегии рендера
@user-ue1ms9zt7y
@user-ue1ms9zt7y 9 месяцев назад
Тимур, спасибо за видео. Но хотелось бы узнать, как можно сделать deploy нашего проекта с курса, чтобы отрабатывал json-server или лучше создать свой сервер?
@greiner.1
@greiner.1 9 месяцев назад
Супер! Спасибо за ролик 👍
@ngnl820
@ngnl820 9 месяцев назад
Крутой видос, концовка хорошая
@user-lr5xx8sl7l
@user-lr5xx8sl7l 9 месяцев назад
Тимур, спасибо!! Очень круто!! А я ручками по RDP сборку закидываю) , а настройка nginx похожая)
@novikov-pavel
@novikov-pavel Месяц назад
Классный урок, спасибо. Ещё бы сюда добавить докер полноценный - вообще огонь был бы)
@daipohuy
@daipohuy 9 месяцев назад
Не, ну это лайк не глядя 😀
@user-dw4pi5gy7t
@user-dw4pi5gy7t 6 месяцев назад
Большое спасибо за контент.
@egorpobylets6597
@egorpobylets6597 7 месяцев назад
Отличное видео по deploy
@NovikovEugene84
@NovikovEugene84 4 месяца назад
Боже, какая же у этой песни энергетика!
@tirthadeva_yoga
@tirthadeva_yoga 7 месяцев назад
Спасибо большое 🙏 то, что нужно было! 👍
@voltmasterpavel8275
@voltmasterpavel8275 9 месяцев назад
когда я первый раз с этим разбирался потратил 7 дней и 7 ночей, через год нужно было повторить сделал за 3 дня))) и таких видео по толку нет) Спасибо!
@Reenya577
@Reenya577 9 месяцев назад
Спасибо, как раз искала эту инфу
@Arctect
@Arctect 9 месяцев назад
Для одного короткого видео оч. хорошо скомпанован большой объём инфы и всё по делу
@koreikin
@koreikin 9 месяцев назад
Залетаю сразу с лайка, другого и не бывает. Только с тобой расту как программист
@JackPts
@JackPts 9 месяцев назад
Спасибо за освещение nginx темы, было интересно! P.S.: По поводу использования редактора vim - может для его заядлых фанатов это и норм запоминать все эти комбинации клавиш навигации по коду, выхода, сохранения и т.п., но как по мне это полная жесть. ИМХО проще юзать nano - там просто Ctrl+S на сохранение и Ctrl+X на выход. А если нужна подсветка кода, то я открыл не так давно для себя аналог nano - это редактор micro, там почти всё так же, только на выход Ctrl+Q. Может кому-то поможет и упростит работу с линухом.
@evgenyqwerty5759
@evgenyqwerty5759 2 месяца назад
Крутой ролик. Спасибо. Было бы интерсно посмотреть еще на разворачивание приложения с примером бд(как пример - mongodb) и серверной части( как пример - express).
@makeevdimitry
@makeevdimitry 9 месяцев назад
эххх такой квест испортил кому-то, когда поделился сакральными знаниями как выйти из Vim'а)) p.s: спасибо за видео!)
@user-fq4pc7fm2z
@user-fq4pc7fm2z 9 месяцев назад
Спасибо, очень полезный материал! подскажи, а есть ли смысл фронт часть на сервере упаковывать в докер?
@romalvekasi5307
@romalvekasi5307 9 месяцев назад
Спасибо! Было очень полезно
@Leshgans
@Leshgans 9 месяцев назад
Лайк не глядя, сходу
Далее
Backstage or result?😈🔥 @milanaroller
00:12
Просмотров 8 млн
МЯСНОЙ ЦЕХ - Страшилки Minecraft
37:24
Nginx: зачем нужен веб-сервер?
22:00
Docker для Начинающих - Полный Курс
1:58:39
КАК GOOGLE УКРАЛ ANDROID?
17:44
Просмотров 60 тыс.
ПК с Авито за 3000р
0:58
Просмотров 1,6 млн
Power up all cell phones.
0:17
Просмотров 49 млн