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

Рет қаралды 90,461

Күн бұрын

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

Пікірлер: 328

@user-dw8lb8lc7u 9 ай бұрын

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

@user-mo4ne2gi9o 9 ай бұрын

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

@carved1883 9 ай бұрын

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

@martingerman2457 9 ай бұрын

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

@kristinavolk2660 8 ай бұрын

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

@user-fq3bl6ws2t 9 ай бұрын

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

@user-zf3ze8wn7c 9 ай бұрын

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

@evollt 9 ай бұрын

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

@user-ji4xt3pn6e 9 ай бұрын

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

@leonidberezin7320 9 ай бұрын

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

@evgeny9945 3 ай бұрын

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

@UlbiTV 3 ай бұрын

🤝

@smeerch1892 9 ай бұрын

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

@hardlabor9412 9 ай бұрын

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

@user-rt5wg9pz2u 9 ай бұрын

Пожалуйста

@azikdinal2055 9 ай бұрын

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

@pashadotcenko7391 9 ай бұрын

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

@Slavec5 9 ай бұрын

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

@enveryakubov6855 9 ай бұрын

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

@natalyaiv3414 9 ай бұрын

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

@user-st2fj8rt7v 9 ай бұрын

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

@user-bb4oo5es6z 8 ай бұрын

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

@k1llrill_cs 9 ай бұрын

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

@konstantinpodgaets2313 4 ай бұрын

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

@ipa_stor 9 ай бұрын

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

@bm-algoritmik 8 ай бұрын

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

@Ramosok 9 ай бұрын

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

@lisalisa2425 9 ай бұрын

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

@user-pt9wf1ug8n 9 ай бұрын

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

@STELLS541 9 ай бұрын

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

@user-fq6sh6jh6s 9 ай бұрын

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

@dinliri472 9 ай бұрын

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

@konstantinchuykov 9 ай бұрын

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

@visionxpro6956 9 ай бұрын

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

@khayakhaya2953 9 ай бұрын

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

@kinofan_org 8 ай бұрын

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

@dontcode 9 ай бұрын

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

@Evgeny.. 9 ай бұрын

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

@user-mo4ne2gi9o 9 ай бұрын

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

@ruslankashapov5443 9 ай бұрын

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

@whyspxcyyy 9 ай бұрын

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

@motolife4900 9 ай бұрын

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

@LionKingheh 9 ай бұрын

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

@kat_katchinskiy 7 ай бұрын

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

@orthodox-chanel 4 ай бұрын

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

@falantogan92 Ай бұрын

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

@ksushakiseleva2644 9 ай бұрын

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

@Evgeny.. 9 ай бұрын

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

@jus1xd193 9 ай бұрын

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

@user-bx8by5gb3l 9 ай бұрын

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

@TitovValek 4 ай бұрын

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

@levshportak5401 8 ай бұрын

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

@Maria-eg4hj 9 ай бұрын

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

@barbatage5078 9 ай бұрын

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

@falsetrue7910 9 ай бұрын

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

@usernamer519 9 ай бұрын

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

@janikhawk1217 8 ай бұрын

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

@user-in8vs7yv3e 9 ай бұрын

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

@nikitasafonkin3077 9 ай бұрын

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

@rashch676 9 ай бұрын

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

@andrsh9388 9 ай бұрын

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

@nikitasafonkin3077 9 ай бұрын

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

@unicoxr5tj417 9 ай бұрын

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

@lemexaxa 6 ай бұрын

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

@mr_adw 9 ай бұрын

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

@romanr5962 9 ай бұрын

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

@alexxxpo 9 ай бұрын

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

@El-zp6ov 4 күн бұрын

Благодарю! Отличная подача информации, ясно и кратко!

@eunicsi 8 ай бұрын

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

@vore770 8 ай бұрын

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

@FobosWorld Ай бұрын

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

@user-tf1rn7qq2p 9 ай бұрын

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

@Virisound 4 ай бұрын

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

@BrestSouth 9 ай бұрын

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

@user-wk5ij2je3z 9 ай бұрын

Прямо сейчас занимаюсь изучением развёртывания fullstack приложения на nuxt, пришлось через все гуглёжки самому пройти😂 Информация мега полезная, к тому же от опытного человека!

@diamondserg-43 9 ай бұрын

я бы глянул твоей ролик с послдовательностью действий

@bigbigfoot3365 8 ай бұрын

Если есть информация как ты это сделал, и сделал ли я бы послушал

@user-tc1kk8vc8q 9 ай бұрын

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

@demidovmaxim1008 7 ай бұрын

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

@visionxpro6956 9 ай бұрын

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

@degradinguser 9 ай бұрын

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

@makssaga 9 ай бұрын

Потдерживаю

@minicodetutorials5310 9 ай бұрын

@bigbigfoot3365 8 ай бұрын

аналогично

@data-center-project 9 ай бұрын

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

@Plovchik90 9 ай бұрын

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

@user-ux4le1tf3y 8 ай бұрын

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

@user-lf5kk3bx9p 9 ай бұрын

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

@MrBombeman1 8 ай бұрын

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

@ivanmorhun3662 9 ай бұрын

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

@sartjhon3300 8 ай бұрын

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

@yans8930 2 ай бұрын

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

@alexnaderklivets7225 9 ай бұрын

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

@zloypapafan-ghost2875 8 ай бұрын

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

@Abramov1 9 ай бұрын

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

@xxcrypt234 8 ай бұрын

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

@egorbystrov9770 9 ай бұрын

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

@koreikin 9 ай бұрын

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

@sergsergey4251 9 ай бұрын

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

@JackPts 8 ай бұрын

Спасибо за освещение nginx темы, было интересно! P.S.: По поводу использования редактора vim - может для его заядлых фанатов это и норм запоминать все эти комбинации клавиш навигации по коду, выхода, сохранения и т.п., но как по мне это полная жесть. ИМХО проще юзать nano - там просто Ctrl+S на сохранение и Ctrl+X на выход. А если нужна подсветка кода, то я открыл не так давно для себя аналог nano - это редактор micro, там почти всё так же, только на выход Ctrl+Q. Может кому-то поможет и упростит работу с линухом.

@ewgenbi 9 ай бұрын

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

@makeevdimitry 9 ай бұрын

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

@spadar1602 8 ай бұрын

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

@psixoz3143 7 ай бұрын

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

@greiner.1 9 ай бұрын

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

@sattorerror 9 ай бұрын

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

@voltmasterpavel8275 9 ай бұрын

когда я первый раз с этим разбирался потратил 7 дней и 7 ночей, через год нужно было повторить сделал за 3 дня))) и таких видео по толку нет) Спасибо!

@Reenya577 9 ай бұрын

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

@Rasulyo 9 ай бұрын

познавательно, спасибо

@bestcoub9451 9 ай бұрын

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

@user-nv7kv1hj9y 9 ай бұрын

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

@user-lr5xx8sl7l 9 ай бұрын

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

@14brotherful 8 ай бұрын

Могли бы рассмотреть тему с Ci/CD очень хотелось бы чуть глубже залезть :) Спасибо большое за материал.

@ngnl820 9 ай бұрын

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

@romalvekasi5307 8 ай бұрын

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

@user-xj6xz1ki2f 9 ай бұрын

Коммент для продвижения 🤞

@novikov-pavel Ай бұрын

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

@annar8482 9 ай бұрын

Спасибо за видео

@daipohuy 9 ай бұрын

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

@JS_Skyline 8 ай бұрын

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

@evgenyqwerty5759 2 ай бұрын

Крутой ролик. Спасибо. Было бы интерсно посмотреть еще на разворачивание приложения с примером бд(как пример - mongodb) и серверной части( как пример - express).