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

Рет қаралды 96,539

Күн бұрын

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

Пікірлер: 333

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

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

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

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

@carved1883 10 ай бұрын

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

@martingerman2457 10 ай бұрын

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

@kristinavolk2660 9 ай бұрын

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

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

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

@rishardsaifer1734 5 күн бұрын

Мощно. Учусь на девопса, русскоязычного материала где будет настолько много инфы, при этом без воды и пошагово действительно не много. Спасибо крутой видос. Успехов

@natalyaiv3414 10 ай бұрын

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

@Slavec5 10 ай бұрын

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

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

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

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

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

@Ramosok 10 ай бұрын

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

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

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

@ruslankashapov5443 10 ай бұрын

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

@evgeny9945 5 ай бұрын

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

@UlbiTV 5 ай бұрын

🤝

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

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

@khayakhaya2953 10 ай бұрын

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

@evollt 10 ай бұрын

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

@motolife4900 10 ай бұрын

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

@usernamer519 10 ай бұрын

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

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

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

@k1llrill_cs 10 ай бұрын

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

@barbatage5078 10 ай бұрын

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

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

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

@lemexaxa 7 ай бұрын

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

@LionKingheh 10 ай бұрын

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

@levshportak5401 9 ай бұрын

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

@yans8930 3 ай бұрын

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

@janikhawk1217 10 ай бұрын

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

@ksushakiseleva2644 10 ай бұрын

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

@ipa_stor 10 ай бұрын

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

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

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

@romanr5962 10 ай бұрын

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

@mr_adw 10 ай бұрын

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

@El-zp6ov Ай бұрын

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

@eunicsi 10 ай бұрын

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

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

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

@jus1xd193 10 ай бұрын

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

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

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

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

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

@falsetrue7910 10 ай бұрын

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

@Virisound 5 ай бұрын

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

@leonidberezin7320 10 ай бұрын

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

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

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

@alexxxpo 10 ай бұрын

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

@whyspxcyyy 10 ай бұрын

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

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

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

@ivanmorhun3662 10 ай бұрын

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

@falantogan92 3 ай бұрын

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

@demidovmaxim1008 9 ай бұрын

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

@konstantinpodgaets2313 5 ай бұрын

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

@dontcode 10 ай бұрын

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

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

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

@alexnaderklivets7225 10 ай бұрын

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

@JS_Skyline 9 ай бұрын

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

@Plovchik90 10 ай бұрын

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

@smeerch1892 10 ай бұрын

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

@hardlabor9412 10 ай бұрын

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

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

Пожалуйста

@azikdinal2055 10 ай бұрын

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

@pashadotcenko7391 10 ай бұрын

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

@TitovValek 5 ай бұрын

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

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

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

@psixoz3143 8 ай бұрын

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

@constyak9031 10 ай бұрын

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

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

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

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

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

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

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

@spadar1602 10 ай бұрын

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

@BrestSouth 10 ай бұрын

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

@daipohuy 10 ай бұрын

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

@bestcoub9451 10 ай бұрын

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

@sergsergey4251 10 ай бұрын

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

@MrBombeman1 10 ай бұрын

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

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

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

@user-nb1is5wc4k 17 күн бұрын

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

@tenada1529 10 ай бұрын

ооооо годнотааа

@kinofan_org 9 ай бұрын

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

@unicoxr5tj417 10 ай бұрын

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

@egorpobylets6597 8 ай бұрын

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

@ngnl820 10 ай бұрын

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

@STELLS541 10 ай бұрын

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

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

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

@enveryakubov6855 10 ай бұрын

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

@user-dw4pi5gy7t 7 ай бұрын

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

@nikolaiandrianov1856 10 ай бұрын

Велико дело делаешь!!!

@NovikovEugene84 5 ай бұрын

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

@Leshgans 10 ай бұрын

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

@nikolaivasilev5428 4 ай бұрын

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

@Reenya577 10 ай бұрын

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

@sartjhon3300 9 ай бұрын

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

@dinliri472 10 ай бұрын

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

@dinissaet9578 8 ай бұрын

Тимур, огромное спасибо!!!

@sattorerror 10 ай бұрын

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

@linqur7351 10 ай бұрын

Мужик, красава 👍

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

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

@kat_katchinskiy 8 ай бұрын

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

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

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

@lisalisa2425 10 ай бұрын

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

@helenit4365 10 ай бұрын

Ура, Тимур!!!

@user-ll5sp2zg1n 4 ай бұрын

Крутое видео, однозначно лайк

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

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

@egorbystrov9770 10 ай бұрын

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

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

Спасибо, классный урок 👍

@konstantinchuykov 10 ай бұрын

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

@visionxpro6956 10 ай бұрын

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