Всем привет, меня зовут Александр, я являюсь фронтенд разработчиком с 4-х летним опытом работы. В этой статье я хочу поведать, о том, как разварачивал свое web приложение на сервере.
Вот и наступил тот момент, когда я закончил основную разработку своего блога и могу его вывести в продакшн. Проблему серверного рендеринга у меня получилось исправить с помощью фреймворка nest для react. Мне пришлось прибегнуть к готовому решению, потому что у меня не получилось самостоятельно настроить серверный рендеринг через webpack и прямую компиляцию файлов. На данный момент мой блог работает на ui с помощью nest.
Требования к серверу и его настройка
Так как я понимал, что у сайта, на данный момент будет мало посетителей и нагрузка на него будет минимальной, то передо мной стояла задача найти недорогой хостинг, на котором смогу разместить свой сайт и заниматься тестированием своих проектов. Изначально я хотел арендовать простой хостинг с готовыми решениями. Здесь меня ждало разочарование, все готовые решения были рассчитаны, в основном, на php. Такое меня не устраивало категорически, поэтому после гугления своего вопроса о размещении сайта, мною было принято решение искать хостинг, который за адекватные деньги позволит арендовать vps/vds хостинг.
Почему именно vps/vds? Причина довольна проста, т.к. готовые решения от хостингов меня не устраивали, то мне тогда нужен выделенный сервер с собственной конфигурацией, на котором я смогу размещать свои сайты. Под эти условия как раз и подпадает vps/vds сервера. В поисках данного сервера я облазил много сайтов и убил на это целый вечер, в итоге мой выбор пал на сервис timeweb. На выходе я получил свой недорогой сервер linux, на котором могу размещать свои проекты. Для себя я выбрал следующие параметры сервера:
- 1 — ядро 3.3 ггц;
- трафик — 200 мб/с;
- оперативаная память — 1 гб
- nvme диск — 15 гб.
Единственным слабым звеном в моей конфигурации — это мало оперативной памяти, при работе ui и backend частей у меня остается всего 200 мегабайт свободной оперативки. На данный момент мне ее хватает, но в будущем буду расширятся по мере необходимости.
- Давайте теперь поговорим об настройке сервера для работы моего проекта. Оговорюсь, здесь не будет подробного описания команд, моя задача здесь просто описать список действий, которые были мной проделаны для настройки сервера. Далее я опишу список действий, которые были сделаны мной для настройки сервера:
- для начала необходимо подключится к своему серверу через ssh, этот пункт здесь для описания полной картины.
- установить гит, чтобы можно было подтянуть мои проекты по ui и backend.
- установить nodejs, чтобы можно было развернуть проекты. В качестве альтернативы подойдет и nvm (node version manager).
- установить pm2, чтобы можно было запускать node процессы вне командной строки. Если эти процессы запускать в командной строке, то после выхода с сервера или прерывания процесса сайт будет недоступен, вот для этого и нужен pm2.
- установить nginx, он нужен для раздачи контента.
Вышеперечисленный алгоритм необходим для первоначальной настройки сервера. После его выполнения можно будет приступать к настройке и разворачиванию проектов.
Перенос ui части и серверной части на сервер через гит, проблемы, с которыми я столкнулся.
Далее необходимо клонировать оба проекта, подтянуть зависимости и скомпилировать их. После этого необходимо настроить конфигурацию nginx для раздачи сайта в интернете.
В файле необходимо указать доменное имя и локальный порт, на котором будет запущено приложение. Пример файла приведен на картинке «Пример файла конфигурации для nginx». После настройки файла конфигурации nginx необходимо перезагрузить, чтобы файлы вступили в действие.
У меня больше всего времени ушло на то, чтобы настроить раздачу файлов для фронта и бекенда. Они у меня не хотели запускаться; иногда я путал фронт с беком и мне на запрос бека приходил фронт; иногда что-то забывал запускать; иногда забывал заново скомпилировать проект, чтобы подтянулись внесенные изменения. К тому же здесь еще сыграло против меня то, что я изначально взял себе слабую настройку конфигурации и хотел ее расширять.
Сравнение с настройкой сервера для php.
Давайте теперь обсудим разницу в настройке сервера для php. В php входным файлом является в основном index.php, либо другой, который укажите в файле конфигурации nginx. Идем далее, приложение на php не надо компилировать, в следствии чего, его проще отлаживать. Еще одним существенным отличием от node js является то, что у php есть также свой пакетный менеджер — composer. Вот этим и отличается настройка php от node js.
Выводы
По итогу я сейчас имею готовый сервер, на котором работают оба моих приложения nodejs. Вам, мои дорогие читатели, я описал, каким образом я это сделал.
Больше статей в моем блоге. Спасибо, что дочитали и до новых встреч в следующих статьях.