Как запустить node js на хостинге reg ru

Как залить сайт на хостинг reg.ru?

Ааааа. как же много вас таких. — не смогли определиться что вам надо? Куча-перекуча различных тегов и направлений. Заспамили.
Читайте правила сервиса уже наконец-то!

Решения вопроса 0
Ответы на вопрос 3

Денис Щербина @Denis_maker
✔ Инженер-программист. Веду весь спектр разработки

Привет! На обычном хостинге это не заработает, нужно чтобы был сервер — VDS, VPS. Распишу на примере таймвеба: Сервер Вы арендуете с какой-нибудь ОС, допустим, ubuntu. На ней должен стоять nginx, не apache! После успешной установки, загружаем наш проект в какую-нибудь директорию.
После этого нужно прописать наш проект в файлик конфигурации, лично у меня он по этому адресу лежит:
/etc/nginx/sites-available/hello-world.conf

Здесь в код добавляем вот это:

# Делаете сервер вот так. После этого по нужному url будет отображаться Ваш проект без порта (:3000 к примеру) server < listen 80; listen [::]:80; server_name твой-сайт.ру; client_max_body_size 100M; location / < proxy_pass http://localhost:8080; #Это порт, на котором работает Ваш проект proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; >>

Важно после этих манипуляций к доменному имени прикрепить IP адрес сервера (Запись «А»). Вообще, ребята из поддержки помогают всё это дело запустить, главное загрузить исходники и написать в поддержку)

Ну и всё в принципе. Запустить проект — запускаешь так же, как у себя локально. Я использую pm2, чтобы он работал в «фоновом режиме».

putty — программа для удалённого подключения к серверу и управления им через консоль
FileZilla — программа, чтобы файлы на сервер отправлять и скачивать.

Если мой ответ — то, что было нужно, с Вас галочка)

Что такое Node.js

Node или Node.js — это программная платформа, которая позволяет использовать JavaScript не только для браузера. В этой статье мы подробно разберем, что такое Node.js и какие особенности она имеет.

Node.js

Node.js ― это не отдельный язык программирования, а среда для выполнения JavaScript. Или, другими словами, платформа для работы с JavaScript на стороне сервера. Раньше JavaScript мог выполнять только браузер. С помощью Node.js это можно делать без него.

Чаще всего Node используют для написания серверной части сайта (для неё он и был создан изначально), однако сейчас на нём пишут и десктопные программы. На данный момент эту технологию для своего бэкенда используют PayPal, eBay, Amazon и Netflix.

Платформу разработал Райан Дал, а спонсором разработки выступила компания Joyent. Среда была представлена в 2009 году. Node.js основана на движке V8. V8 ― это программа, которая преобразует JavaScript в машинный код, то есть код понятный процессору. Этот же движок используется в основе браузера Google Chrome.

Одного V8 для удобной работы мало, так как он может работать только с JavaScript. Он не умеет читать файлы, не может работать с сетью вне браузера, поэтому Райан Дал вместе с разработчиками с помощью дополнительных библиотек и кода добавили дополнительные возможности к V8. Это позволило сделать из JavaScript веб-сервер.

• Использование одного языка JavaScript как на клиентской стороне в браузере, так и на сервере.
• NPM (Node Package Manager) ― это менеджер пакетов, или набор готовых модулей. Это своеобразный склад, где программисты делятся своим кодом. Комьюнити очень большое, поэтому в NPM на данный момент собрано огромное количество решений для разных задач.
• Увеличение скорости работы. Node.js ― это однопоточная и асинхронная система. Вы можете читать файлы, отправлять электронные письма, запрашивать данные и совершать другие действия одновременно. Подробнее об однопоточной работе мы расскажем ниже.

Node.js основы: что такое многопоточная и однопоточная работа

При изучении серверных процессов нужно знать, что есть 2 схемы работы с сервером ― многопоточная и однопоточная.

Работа с веб-приложением ― это передача запроса и получение ответа от сервера. Многопоточная система линейна. Вначале выполняется один запрос, затем другой и так далее по очереди. Например, нам нужно обратиться к базе данных. Веб-сервер делает запрос и ждёт, пока не придёт ответ. Как только ответ вернулся, он обрабатывает его и может приступить к отправке других запросов. Как видите, в процессе ожидания веб-сервер тратит ресурсы, но ничего не делает.

При выполнении запроса потребляются ресурсы сервера: память, процессорное время и количество ядер. Получается, при многопоточном подходе сервер может выполнить только один запрос за раз? Нет. Каждый запрос помещается в отдельный поток. Поток ― это время и ресурсы, которые выделяет сервер для выполнения небольшого блока инструкций. Таким образом, количество потоков зависит от мощности машины. Чем больше ресурсов, тем больше потоков и тем больше запросов может выполнить сервер одновременно. Такая модель работы называется thread-per-request model (модель потока на запрос).

Многопоточная система

Если свободные потоки заканчиваются, сервер не может выполнить задачу. Она попадает в очередь и ждёт, пока не освободиться один из потоков. Например, вам нужно выполнить 3 запроса. Вам доступно 4 потока. Мощность сервера позволяет вам выполнить их все за раз. Если вам нужно будет выполнить 5 запросов, то одна задача не поместится и ей придётся ждать свободного потока. Из-за нескольких потоков, которые обрабатывают запросы, система и получила название многоканальная.

Как работает Node.js?

Node.js работает по однопоточному принципу в рамках событийно-ориентированной модели. Его архитектура не блокирует ввод и вывод. При этом подходе:

• все запросы обрабатываются в рамках одного потока,
• веб-сервер не тратит время на ожидание ответа,
• веб-сервер посылает запросы и обрабатывает ответы по мере их поступления.

Таким образом, веб-сервер всегда находится в работе, а не в процессе ожидания. Такой способ позволяет эффективно использовать ресурсы и выполнять команды намного быстрее.

Node.js для начинающих. Однопоточная система

Отличным примером является загрузка страницы сайта. Представьте, вы хотите загрузить страницу сайта. Веб-ресурс может показаться пользователю, как только браузер получит весь необходимый контент. При использовании обычного веб-сервера с многопоточной системой каждый файл (картинка, название, основной текст, фон) будет запрашиваться по отдельности. Например, сначала фон, затем, как только данные фона будут получены, веб-сервер отправит запрос на картинки и так далее. Из-за долгого ожидания ответа страница будет грузиться дольше. Как мы уже говорили Node.js не тратит время на ожидание. Во время поиска фоновой картинки нода запросит другую картинку. За счёт этого сайт загрузится быстрее.

Однопотоковая система работает благодаря циклу событий, который состоит из 6 фаз. Практически на каждой фазе выполняются коллбэки (обратные вызовы) — функции, которые срабатывают сразу после завершения работы предыдущих функций.

1. Таймеры (timers). На этом этапе срабатывают коллбэки методов setInterval() и setTimeout();
2. Ожидающие обратные вызовы (pending callbacks). В этой фазе срабатывает практически все коллбэки, отложенные в предыдущую фазу. Исключение — setImmediate(), close и таймеры;
3. Ожидание и подготовка (idle, prepare). Отвечает за внутренние цели;
4. Опрос (poll). Принимает новые события ввода/вывода;
5. Проверка (check). На этом этапе срабатывают коллбэки, вызванные методом setImmediate();
6. Закрытие (close callbacks). Закрывает обратный вызов, например, socket.on(‘close’, …).

Чаще всего платформу Node используют для создания веб-сервисов, которые требуют интенсивного обмена информацией с пользователями, например, чатов, социальных сетей и подобных систем. Также Node хорошо подходит для разработки RTA — веб-приложений, которые реагируют на действия пользователя в режиме реального времени. Например, онлайн-редакторов типа Google Docs, который позволяет работать над одним документом нескольким пользователям одновременно.

Node.js модули

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

Модуль можно подключить с помощью функции require() . В скобках нужно указать путь к файлу. Набор модулей уже обширен. Например, вы можете использовать модуль Node.js PostgreSQL для взаимодействия с базой данных.

Подробнее о встроенных модулях и их функциональности можно узнать в официальной документации.

Node.js, PHP или Python?

Node.js не такой популярный как PHP. На PHP написаны такие CMS как WordPress, Joomla!, Drupal. И именно на этих системах управления работает большинство сайтов.

Фреймворков для PHP пока больше, чем для Node.js. Инфраструктура ноды только начинает развиваться. Популярными фреймворками для Ноды являются:

AdonisJs. Это фреймворк, который работает на всех основных операционных системах. Он обладает стабильной экосистемой для написания серверных веб-приложений. Идеально подходит для разработчиков Laravel, которые пробуют переход на Node.js. Особенности AdonisJs:

• есть ORM, который помогает создавать безопасные SQL-запросы,
• API и система аутентификации на основе сеансов,
• лёгкий в освоении конструктор запросов,
• высокая безопасность,
• поддержка баз данных No-SQL, таких как MongoDB.

Express.js. Это самый простой, гибкий и быстрый фреймворк Node.js. Express.js подходит для быстрой разработки простых приложений, так как имеет легкодоступные инструменты генерации API. Особенности Express.js:

• высокая настраиваемость,
• быстрое освоение программы,
• быстрая разработка на стороне сервера,
• поддерживает архитектуру MVC,
• поддержка NoSQL-баз данных из коробки.

Koa.js. Этот фреймворк был создан командой Express.js. Разработчики хотели учесть все недостатки Express.js и создать более совершенный продукт. Koa работает в разных браузерах, без использования обратных вызовов и обладает мощной системой обработки ошибок. Может использоваться для фронтенд- и бэкэнд-системы. Особенности Koa.js:

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

Если сравнивать Python и Node, то их главное различие ― сфера применения. Нода подходит для веб-разработки и некоторых десктопных программ, в то время как Python является универсальным решением. С его помощью можно сделать не только веб-разработку, но и Data Science, Machine Learning.

Как попробовать работу в Node.js? Вам поможет статья Как установить Node.js на Ubuntu. Как проверить версию Node.js, если программа уже установлена? Зайдите в терминал и введите команду node -v . В результате вы увидите примерно такой вывод:

Помогла ли вам статья?

Спасибо за оценку. Рады помочь ��

Хостинг Node.js https сервера с авто-обновляемым SSL в облаке и как я настроил цикл разработки (+ git, react)

Начну с того, что однажды мне захотелось создать приложение. Желание такое возникло из-за того, что я люблю читать, а нормальных книжных агрегаторов на просторах русского интернета просто нет. Собственно из боли поиска чего бы почитать и попыток вспомнить как называлась та книжка, которую я недавно читал и на какой же главе я остановился, родилось желание сделать веб-приложение, в котором всё это было бы возможно и удобно. Стоит отметить, что никакого опыта разработки, программирования и т.п. у меня не было, моя работа вообще с этим не связана. Тем не менее желание перебороло лень и переросло в конкретные действия, своеобразное хобби.

Не буду рассказывать как я изучал javascript, node.js, react, html, css и т.п., перейдём к тому, к чему я пришел на данный момент, чем хотел бы с вами поделится и, конечно, послушать конструктивную критику специалистов.

Как и многие я тренировался на собственном ПК на localhost:3000, создавал front/back-end’ы, верстал, работал с api и т.д., но меня всегда тревожила мысль а том, как же всё это потом перенести на хостинг? Будет ли оно работать? Нужно ли будет переписывать из-за этого код? И самое главное, нельзя ли всё настроить так, чтобы я мог работать над приложением с любого ПК и легко переносить всё на хостинг на production? Об этом я и расскажу.

Выбор хостинга

На своё хобби я готов был тратить 10$ в месяц, поэтому выбирал тот хостинг, с которым планировал и остаться в будущем. Как я и говорил, до этого у меня был 0 опыт, в том числе и с хостингом сайтов. Я попробовал и отказался от следующих:

Jelastic: красивый и удобный интерфейс, вроде всё интуитивно, масштабируемо и понятно. Тем не менее столкнулся с трудностями при настройке (nginx почему-то из vps не хотел работать, только их отдельным модулем) и подключении SSL(и автоматическом обновлении) к русскоязычном домену стандартными средствами (обещали баг пофиксить, но я не хочу ждать)

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

AWS и Google облака: попробовал, всё вроде хорошо, но вспомнил про наши «замечательные» законы и требование размешать данные пользователей на сервера в РФ. У этих ребят, к сожалению, серверов в РФ не оказалось. Не юрист, но от греха решил поискать облака с серверами в РФ. Если же ваше приложение маловероятно будет иметь проблемы с законом, то хороший выбор.

Облака с серверами в РФ хоть и были, но хотелось всё же что-то, что избавит меня от необходимости погружаться в администрирование PostgreSQL. Порыв немного наткнулся на не так давно ставшие доступными Яндекс.Облака, попробовал, вроде всё просто и удобно, поэтому остановился пока на них. Стоит отметить, что хостинг PostgreSQL у них сразу идёт с 1core и 4гб RAM, что по стоимости около 2к рублей в месяц, поэтому на время разработки и невысокой нагрузки я планирую запустить PostgreSQL на VPS за ~300р, а с повышением нагрузки перенести базу и пусть Яндекс занимается администрированием и обновлением.

Настройка Яндекс.Облака

Virtual Private Cloud

1) Создаём каталог под свой сайт:

2) Создаём Virtual Private Cloud:

Главное что он даёт для меня на текущем этапе — это IP для доступа к созданному ресурсу из вне. С подсетями, зонами, изоляцией и отказоустойчивостью ознакомился поверхностно, при необходимости наверстаю.

3) Создаём подсеть и присваиваем ей внутренний IP (как я понял, это примерно как локальная сеть)

4) Переходим на вкладку IP и резервируем себе статический IP.

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

Compute Cloud

Тут у нас будут происходить вычисления 🙂 То есть мы создадим виртуальную машину с Linux (я выбрал ubuntu 18.04), установим node.js приложения и postgreSQL.

Жмём создать ВМ, выкручиваем все настройки на минимум, так как при разработке нагрузки не будет (когда наше приложение выйдет в свет, тогда и подкрутим побольше, ну и будем мониторить по графикам).

SSH

Проблемный момент, с которым я столкнулся на этом этапе, это SSH:

Что это и зачем понятия не имел, поэтому пошел изучать. Оказалось — это просто метод доступа, но не по паролю, а по сгенерированному SSH ключу. Чтобы собственно его сгенерировать, скачиваем и устанавливаем Putty как нам советуют.

Запускаем C:\Program Files\PuTTY\puttygen.exe

Нажимаем кнопку Generate и водим мышкой, чтобы придать случайности сгенерированному ключа (как я понял). Далее копируем появившуюся строку начинающуюся с ssh-rsa куда-нибудь в текстовый файл и жмём Save private key, Save public key. Скопированный в текстовый файл ключ вставляем в поле SSH ключ открытой страницы Яндекса. Логин указываем root, иначе у вас не будет доступа при работе с графической файловой системой приложения по которому будете подключаться к облаку из дома/работы (возможно и есть способ, но я не разбирался).
Как заметил andreymal, лучше не использовать root, чтобы китайские боты не подобрали пароль к вашему облаку, но так как в яндекс.облаке доступ только по SSH, то жить вроде можно.

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

Подключаемся к облаку с ПК и выбираем бесплатный SSH клиент

Стандартный Putty позволяет работать только командной строкой, а так как мне пользователю windows это непривычно, то я начал искать клиент с псевдо-проводником. Сначала я попробовал Mobaxterm, но он после какого-то времени простоя отключается, проводник вообще зависает, поэтому сейчас работаю с bitvise ssh и пока проблем как у Mobaxterm не наблюдаю.

Настройка bitvise ssh

Тут в поле Server>Host указываем наш внешний IP облака. Порт 22. Нажимаем client key manager>import указываем в нём сгенерированный Putty ранее private ключ. Может ещё потребоваться ключевая фраза, выберите что-нибудь что не забудете. Закрываем это окошко и в поле authentication указываем username: root, method publick key, client key — выбираем импортированный ранее. Жмём login и если мы всё сделали правильно, то подключимся к облаку:

Устанавливаем Node.js

Тут я рекомендую пользоваться инструкциями digitalocean.com, они очень подробны и многие есть на русском. Обычно я так и гуглю «digitalocean ubuntu 18.04 node.js» или что вы там захотите установить или настроить.

Как установить Node.js можно почитать тут.

Если коротко, то заходим на nodesource (тут последние версии node.js можно установить), листаем сюда:

Копируем и по-очереди запускаем команды:

curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash - sudo apt-get install -y nodejs 

Проверяем как установилось командой

nodejs -v

Нам покажет версию node.js

npm -v

Нам покажет версию менеджера пакетов для node.js.

Далее идём в папку /opt/mysuperapp (my_super_app_name — эту папку вы должны создать). Каталог opt был выбран в качестве места расположения приложения после долгих гуглений «где уместно положить файлы node.js приложения в ubuntu».

Наконец-таки создаём файл server.js, который будет входной точкой приложения и вставляем туда код простого сервера на node.js:

const http = require('http'); const hostname = 'localhost'; const port = 80; const server = http.createServer((req, res) => < res.statusCode = 200; res.setHeader('Content-Type', 'text/plain'); res.end('Hello World!\n'); >); server.listen(port, hostname, () => < console.log(`Server running at http://$:$/`); >);

Порт 80 — это для http запросов, 443 — для https. Пока у нас сервер на http.

Сохраняем всё и запускаем командной:

node server.js

В консоли должно появиться строка ‘Server running at localhost:80/’

Теперь можно открыть браузер, ввести внешний IP (тот что в облаке яндекса у вашей ВМ ubuntu) и мы увидим «Hello World!»

Делаем всё удобно или цикл разработки с помощью git

Всё вроде работает, но мы же не будем работать всё время подключаясь к облаку. К тому же вдруг мы будем в будущем работать не одни.

Github

Github — это место, где будет лежать код нашего приложения. Если коротко, принцип работы для одного человека следующий:

• На домашнем ПК разрабатываем наше приложение.
• Сохраняем и в один клик выгружаем код на Github.
• На хостинге или на другом ПК скачиваем наше приложение с github, перезагружаем сервер (если это хостинг) и новая версия нашего веб-приложения доступна во всемирной паутине.

Собственно регистрируемся на Github и создаём private репозиторий для нашего приложения (он будет доступен только нам):

Копируем строку github.com/ReTWi/mysuperapp.git для скачивания приложения.

1. Возвращаемся в командную строку bitvise, останавливаем приложение нажав ctrl+c (если оно ещё работает).
2. Переходим в каталог /opt и удаляем созданную нами папку с приложением

sudo apt update sudo apt install git

Проверяем всё ли хорошо установилось:

git --version

Должна показаться версия git.

Заполняем данные git (так и не понял зачем, но видимо могут быть какие-то занудные предупреждения).

git config --global user.name "Your Name" git config --global user.email "youremail@domain.com"

Наконец-таки загружаем наше приложение на хостинг командой:
(тут должна быть ссылка на ваше приложение )

git clone https://github.com/ReTWi/mysuperapp.git 

В каталоге /opt появится новый mysuperapp, где будут находится файлы нашего приложения загруженные из github.

Теперь пора повторить тоже самое для ПК и замкнуть цепочку ПК(разные) —> Github —> Хостинг

Visual studio code

Для начала выберем редактор исходного кода, где будем работать. Я выбрал Visual studio code, так он прост, удобен, в нём много плагинов и можно настроить синхронизацию настроек если вы работаете с нескольких устройств. Собственно скачиваем, устанавливаем, запускаем, выбираем общую папку приложений, так как git clone создаст нам свою.

Плагины я использую следующие:

Устанавливаем git для ПК.
Открываем консоль в VScode с помощью ctrl+shift+` или terminal>new terminal

В консоли windows плохо с русскими символами и чтобы не было крякозяблов нужно открыть file>preferences>settings, ввести в поле terminal.integrated.shellArgs.windows, нажать

И добавить строку «terminal.integrated.shellArgs.windows»: [«-NoExit», «/c», «chcp 65001»],

Повторяем команду для загрузки файлов с github:

git clone https://github.com/ReTWi/mysuperapp.git 

В VScode нажимаем File>Open Folder и открываем папку нашего приложения.

Создаём файл server.js с тем же кодом простого сервера:

const http = require('http'); const hostname = 'localhost'; const port = 80; const server = http.createServer((req, res) => < res.statusCode = 200; res.setHeader('Content-Type', 'text/plain'); res.end('Hello World!\n'); >); server.listen(port, hostname, () => < console.log(`Server running at http://$:$/`); >);

Устанавливаем nodemon для автоматической перезагрузки сервера при изменениях в коде:

npm i nodemon -g

i — сокращение от install
g — глобальная установка (чтобы было доступно в консоли), а не только для нашего приложения.

nodemon server.js

Открываем в браузере localhost:80/ или просто localhost:80 и видим Hello World.

Теперь настало время проверить нашу цепочку ПК>Github>Hosting.

Скачиваем Github desktop для большего удобства, подключаем свой github аккаунт, затем нажимаем файл add local repository и указываем каталог нашего приложения.

В приложении мы видим изменения которые мы сделали по сравнению с загруженной с Github версией (мы добавили server.js):

Жмём «commit to master»>«push origin», таким образом загружая файлы с ПК на Github.

Заходим в браузере на наш github аккаунт и видим загруженный файл server.js:

Потренируемся ещё немного, в VScode заменим строку «res.end(‘Hello World !\n’);» на «res.end(‘OmNomNom’);». Увидим, что сервер сам перезагрузился:

Проверим в браузере и увидим там сделанные нами изменения «OmNomNom».

Desktop github тоже покажет нам что мы поменяли строку:

Опять жмём «commit to master»>«push origin», чтобы отправить файлы на github.

Переключаемся на командную строку хостинга.

Останавливаем наше приложение, если оно ещё запущено (ctrl+c).

Скачиваем наше обновлённое приложение командами:

git config credential.helper store git pull 

Первая сохранит наши данные, чтобы постоянно не вводить логин и пароль. В дальнейшем нам достаточно будет git pull.

Установим pm2 — нечто похожее на nodemon, только для хостинга:

npm i pm2 -g

Запустим приложение с помощью pm2, которые при следующем git pull на хостинге сам перезагрузит наш сервер:

pm2 start server.js --watch

Откроем браузер по нашему внешнему IP облака и увидим наше «OmNomNom».

Таким образом мы замкнули цепочку работы с приложением и быстрым его развёртыванием на хостинге.

Создаём временные SSL сертификаты для HTTPS на localhost и хостинга

В поле domains, ip… вписываем сначала localhost, нажимаем generate и скачиваем 2 файла по кнопке:

Сохраняем их у нас в проекте в папке ssl/localhost.

Повторяем процедуру для внешнего IP Облака и сохраняем в ssl/myapp.

Запускаем более сложный https сервер node.js

• client — тут будет лежать наш front-end. У меня react.
• logs — сюда будут падать логи на хостинге
• node_modules — модули node.js
• private — ваши приватные файлы, я там храню SSH доступы к облаку
• server — ваш backend
• ssl — ssl сертификаты для работы https на localhost и на хостинге
• .babelrc — настройки сборки react приложения webpack’om (позволяет использовать более современный JS при разработке frontend)
• .gitignore — файлы, которые не будут перемещаться на github (git их как бы не видит)
• client.js — точка входа для генерации react сборки
• package.json — используемые вами node_modeles и различные снипеты команд.
• package-lock.json — изменения в модулях (насколько я понял, по файлу будет проверяться одинаковые ли у вас установлены модули на хостинге и на ПК).
• pm2-watch.json — настройки запуска pm2 для хостинга
• README.md — обложка для github
• server.js — точка запуска нашего backend сервера Node.js
• webpack.config.js — конфигурация сборки react

.gitignore

Тут мы указываем те файлы/папки, которые мы не хотим выгружать на github. Они будут только на данном устройстве и git не будет отслеживать/показывать их изменения. Открываем и вставляем:

/node_modules/ /logs/* # exception to the rule !logs/.gitkeep /public/react_bundle.js /public/isProd.js

Так как github не выгружает пустые папки, то можно внутрь что-нибудь положить, к примеру пустой файл .gitkeep. Сохраняем файл и закрываем.

package.json

Открываем и вставляем следующее (после // добавил комментарии)

< "name": "myapp", // название вашего приложения "version": "1.0.0", "description": "OmNomNom", "main": "server.js", "scripts": < "server": "pm2 start pm2-watch.json", // командой npm run server можно запустить этот скрипт "client": "webpack -w --mode development", // командой npm client можно запустить этот скрипт. Собирает приложение реакт и отслеживает изменения в коде, автоматически обновляя сборку. "client-prod": "webpack --mode production", // собирает сжатый вариант для production "client-analyze": "webpack --mode production --analyze true" // собирает сжатый вариант для production и позволяет посмотреть размеры разных модулей приложения. Полезно для оптимизации >, "repository": < "type": "git", "url": "git+https://github.com/myapp/knigam.git" // ссылка на ваш репозиторий github >, "author": "rtw", "license": "UNLICENSED", // запрет на любое использование (личное приложение) "bugs": < "url": https://github.com/myapp/knigam.git" >, "homepage": "https://github.com/myapp/knigam.git#readme", "dependencies": < "@babel/core": "^7.2.2", // Современный js для frontend "@babel/plugin-transform-runtime": "^7.2.0", // Современный js для frontend "@babel/preset-env": "^7.3.1", // Современный js для frontend "@babel/preset-react": "^7.0.0", // Современный js для frontend "ajv": "^6.8.1", // Проверка типов переменных "babel-loader": "^8.0.5", // Современный js для frontend "babel-plugin-styled-components": "^1.10.0", // Работа со styled-components "css-loader": "^2.1.0", // Для сборки webpack'om css "fastify": "^2.0.0-rc.6", // аналог express, более живой и активно развивающийся "fastify-cookie": "^2.1.6", // Работа с куки "fastify-static": "^2.2.0", // Работа со статичными файлами "moment": "^2.24.0", // Работа со временем "pg": "^7.8.0", // Работа со временем "pino": "^5.11.1", // Работа с postgreSQL из node.js "pino-pretty": "^2.5.0", // Читаемые логи в консоли "react": "^16.8.1", // Frontend библиотека. Выбор был между ней и Vue.js, но второй больше фрэймворк. В реакте больше нужно делать руками, что полезно для обучения "react-dom": "^16.8.1", // React для работы с браузером "style-loader": "^0.23.1", // Для сборки webpack'om стилей, уже не помню "styled-components": "^4.1.3", // CSS in JS, очень удобно для динамических стилей и локализации стилей в компонентах "webpack": "^4.29.3", // Сборщик реакт приложения "webpack-bundle-analyzer": "^3.0.3", // Анализатор размеров модулей собранного реакт приложения "webpack-cli": "^3.2.3" // Консоль сборщик реакт приложения, не помню уже зачем >> 

Остановлюсь на двух основных фрэймворках/библиотеках выбранных для приложения:
Fastify был выбран в качестве альтернативы express.js, так как в первом уже есть экспериментальная поддержка htpp2, он активно развивается и мне кажется у него больше будущего, нежели у express.js, который стал очень неповоротлив и кое-как развивается. С другой стороны express.js уже долгое время в работе и по нему вам легче будет найти информацию.

React был выбран так как мне с ним было проще работать, понять и пробовать всё своими руками. Vue — показался уже чем-то со своими правилами, направлением. Хотя во Vue может и меньше придётся писать что-то своими руками, но так как приоритет сделан на обучении и для человека ранее не программировавшего react пошел как-то легче.

Сохраняем файл package.json и устанавливаем все модули указанные в dependencies командой:

npm i

У нас появится папка node_modules, в которой будут все модули для нашего приложения.

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

public

Тут статические файлы нашего сайта будут лежать, изображения там, фавиконки и т.д.
Отдельно остановимся на двух файлах:
index.html:

       
Этот текст заменится содержимым react_bundle после его загрузки
 Система: онлайн подключение возможно только при наличии Javscript  

— тут у нас подгружается react-фронтэнд и рендерится в тег по его id.

isProd.js содержит единственную строку «module.exports = false»
Так как он находится в исключениях .gitignore, то не переносится. Соответственно на ПК мы устанавливаем его в false, а на хостинге в true. Затем используем этот файл, чтобы понять в какой мы сейчас среде (разработка/продакшн). Мне показалось наиболее удобным, к тому же можно частично в коде поменять при разработке и проверить работу модулей в продакшне.

ssl — там лежат сохранённые ранее сертификаты в папках localhost и myapp

.babelrc

< "presets": [ [ "@babel/preset-env", < "targets": < "browsers": [">0.25%", "not ie 11", "not op_mini all"] > > ], "@babel/preset-react" ], "plugins": [ "babel-plugin-styled-components", "@babel/plugin-transform-runtime" ] > 

Настройки для создания нашего react_bundle с поддержкой браузеров используемых более >0.25% пользователей.

client.js

import React from 'react' import < render >from 'react-dom' render(
Реакт!!
, document.getElementById('cookies'))

Рендерит наш фронтэнд в div с тегом cookies.

pm2-watch.json — позволяет на хостинге командой «npm run server» запустить сервер с отслеживанием изменений в коде и автоматической перезагрузкой.

webpack.config.js

Сборщик реакт приложения:

const webpack = require('webpack'), path = require('path'), BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports = (env, argv) => < let prod = argv.mode == 'production' let config = < entry: './client.js', output: < path: path.resolve('./public'), filename: 'react_bundle.js' >, module: < rules: [ < test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader' >, < test: /\.css$/, use: ['style-loader', 'css-loader'] >] >, resolve: < alias: < client: path.resolve('./client/shared'), public: path.resolve('./public') >>, plugins: [ argv.analyze ? new BundleAnalyzerPlugin() : false, prod ? new webpack.optimize.AggressiveMergingPlugin() : false, new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /ru/) ].filter(Boolean), optimization: < minimize: prod ? true : false >, performance: < hints: false >> return config > 

Если коротко, то он открывает файл client.js и все что у него внутри, собирая react_bundle и помещая его в папку public, откуда потом через открытый index.html он будет загружен.

server.js

const isProd = require('./public/isProd'), fs = require('fs'), log = require('./server/logger'), path = require('path') // Ошибки среды node.js, чтобы приложение никогда не падало process.on('unhandledRejection', (reason, promise) => < log.error(< reason, promise >, 'серверный процесс unhandledRejection') >) process.on('uncaughtException', err => < log.error(< err >, 'серверный процесс uncaughtException') >) // Redirect server from http port 80 to https 443 const fastifyHttp = require('fastify')(< logger: log, ignoreTrailingSlash: true >) fastifyHttp.listen(80, '::', (err, address) => < if (err) < log.error(< err, address >, 'Ошибка при запуске HTTP сервера') > else < log.warn('Http cервер запущен') >>) // Let's Encrypt challenge fastifyHttp.get('/.well-known/acme-challenge/:file', (req, res) => < let stream = fs.createReadStream( path.join(__dirname + '/ssl/.well-known/acme-challenge/' + req.params.file) ) res.type('text/html').send(stream) >) fastifyHttp.get('/*', (req, res) => < res.redirect(301, 'https://' + req.headers.host + req.raw.url) >) fastifyHttp.get('/', (req, res) => < res.redirect(301, 'https://' + req.headers.host + req.raw.url) >) // Сервер let fastifyOptions = < logger: log, ignoreTrailingSlash: true, http2: true >fastifyOptions.https = isProd ? < allowHTTP1: true, key: fs.readFileSync('./ssl/myapp/key.txt'), cert: fs.readFileSync('./ssl/myapp/crt.txt') >: < allowHTTP1: true, key: fs.readFileSync('./ssl/localhost/cert.key'), cert: fs.readFileSync('./ssl/localhost/cert.pem') >const fastify = require('fastify')(fastifyOptions) fastify.listen(443, '::', (err, address) => < if (err) < log.error(< err, address >, 'Ошибка при запуске сервера') > else < log.warn( `Сервер запущен в $< isProd ? 'продакшен' : 'режиме разработки' >` ) > >) // Валидатор fastify.setSchemaCompiler(schema => < return ajv.compile(schema) >) // Ошибки fastify fastify.setErrorHandler((err, req, res) => < log.error(< err, req >, 'fastify errorHandler') // Ошибка валидации данных запроса if (err.validation) < return res.send(< error: 'Ошибка валидации данных запроса' >) > else < return res.send(< error: 'Ошибка errorHandler' >) > >) // Статические файлы fastify.register(require('fastify-static'), < root: path.join(__dirname, './public') >) // Куки fastify.register(require('fastify-cookie'), err => < if (err) log.error(< err >, 'fastify-cookie') >) // Ответ на любой запрос исключая апи / несуществующая страница // Тут мы на любой запрос отдаём index.html, по сути наш фронэнд // Запросы фронтэнда у нас принимаются с префиксом api, то есть GET /api/userdata fastify.setNotFoundHandler((req, res) => < res.sendFile('index.html') >) // Routes fastify.register( async openRoutes => < // Пути доступные всем openRoutes.register(require('./server/api/open')) openRoutes.register(async withSession => < // Пути доступные только после авторизации и проверки сессии // Проверяем прямо тут хуком, пример: ///withSession.addHook('preHandler', async (req, res) =>< // if (!(await sessionManagerIsOk(req, res))) return // >) withSession.register(require('./server/api/with_session')) >) >, < prefix: '/api' >// префикс всех путей ) 

Папка server

Тут лежит на бэкэнд и все пути.
logger.js — в зависимости от среды isProd логирует или в консоль или в errors.log

'use strict' const pino = require('pino'), isProd = require('../public/isProd') let logOptions = isProd ? < level: 'warn', // уровень логирования timestamp: () => < return ',"time":"' + new Date() + '"' >> : < level: 'warn', prettifier: require('pino-pretty'), prettyPrint: < levelFirst: true, translateTime: true >> let dest = isProd ? pino.destination('./logs/errors.log') : pino.destination(1) let log = pino(logOptions, dest) module.exports = log 

server/api/
open.js — сюда добавляем наши пути.

'use strict' module.exports = function(fastify, options, next) < fastify.route(< method: 'GET', url: '/', handler: async (req, res) => < res.send('api / route') >>) fastify.route( < method: 'GET', url: '/hi', handler: async (req, res) => < res.send('api / route hi') >>) next() >

После настройки и проверки всего на Localhost, просто выгружаем всё на github, а оттуда git pull на хостинг. Всё что на хостинге нужно будет сделать, это установить модули node.js командой «npm i» и создать файл isProd.js

Автоматически обновляемый SSL

Когда вы купите себе домен и привяжете его к IP облака, пример инструкции для REG.RU, можно установить на сервере автоматически обновляемый бесплатный SSL для работы сайта по https.

Наш сервер работает без nginx. Возможно он понадобится нам в будущем как балансировщик нагрузки или более быстрый HTTP-сервер для раздачи статических файлов, но пока необходимости я в нём не вижу. Балансировка нагрузки пока нам не требуется, а касательно скорости раздачи статики сравнений я не нашел.

Перед установкой в папке ssl создадим папку .well-known, а в ней acme-challenge. Получится /opt/myapp/ssl/.well-known/acme-challenge

Для установке на сервере с node.js без nginx автоматически обновляемого SSL переходим по ссылке. По очереди выполняем команды в консоли хостинга:

sudo apt-get update sudo apt-get install software-properties-common sudo add-apt-repository universe sudo add-apt-repository ppa:certbot/certbot sudo apt-get update sudo apt-get install certbot sudo certbot certonly 

Выбираем второй способ проверки, который разместит в папке /opt/myapp/ssl/.well-known/acme-challenge определённый файл, а после подтверждения владельца сервера его удалит.

Указываем по запросу наш домен, к примеру: «example.com» и путь к ssl папке нашего приложения (сервер настроен так, что отдаст созданный ботом файл) «/opt/myapp/ssl».

Бот сам настроит cron-задачу для обновления сертификата до срока его истечения в течение 90-дней.

Не думал, что займёт столько времени всё написать, к 4 часам ночи уже мог что-то упустить :/

Интересно мнение хабравчан и специалистов, кто осилил это полотно или прочитал какие-то отдельные моменты. Как у вас устроен цикл разработки? Есть ли какие-то моменты в которых я ошибаюсь или поступаю не лучшим образом?

Как сделать деплой приложения next js на хостинг?

Как сделать деплой? У менять есть различные файлы, я так поняла, мне нужно всё это загрузить на хостинг, и там уже с помощью node js, попытаться собрать?

Отслеживать
11.9k 5 5 золотых знаков 28 28 серебряных знаков 40 40 бронзовых знаков
задан 4 июн 2022 в 17:37
35 1 1 серебряный знак 7 7 бронзовых знаков
Вы знакомы с git?
14 июн 2022 в 19:43

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

У меня то же возник такой вопрос и я нашел два способа:

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

1) Первый — генерация статических страниц next js.

Это подойдет, если страницы сайта можно представить без генерации на сервере.(в принципе, node для этого не нужен) для этого необходимо выполнить npm run build, npm run export. убедитесь сперва, что ваш package.json содержит следующий код:

после выполнения next export появится папка out в корне проекта — это и есть статический сайт — содержимое папки просто нужно перенести в паблик хоста и провести настройки создав файл .htaccess с содержанием:

в момент создания статических страниц next не отдает изображения компонента Image, т.к. по умолчанию сервер node должен отправлять оптимизированные изображения(но в данном случае node не используется)

Решение проблемы с экспортом картинок next js:

установка и включение в проект next-image-export-optimizer подробнее в документации https://www.npmjs.com/package/next-image-export-optimizer

2) Второй вариант — перенос готового приложения next js на хостинг.

сперва я установил node по документации хостинга, на вашем хосте такая то же должна быть. после подготовить экспорт серверного приложения — все детали описаны в доке: https://nextjs.org/docs/advanced-features/output-file-tracing просто копируете папку standalone на хостинг и настраиваете .htaccess у меня этот файл выглядел примерно так:

PassengerNodejs /home/v/valkeru/.local/bin/node # место нахождение node
PassengerAppRoot /home/v/valkeru/node/HelloWorld # адрес проекта, до файла server.js
PassengerAppType node
PassengerStartupFile server.js

пример содержания файла .htaccess и порядок установки node я нашел в документации хоста, можете спросить в техподдержке

Отслеживать
ответ дан 24 дек 2022 в 13:02
Stanislav Volobuev Stanislav Volobuev
56 2 2 бронзовых знака

Вот статья по теме деплоя next.js приложения — https://nextjs.org/docs/deployment. Самый лучший способ разобраться — начать с этой статьи.

Вы можете задеплоить статические файлы, сгенерировав их с помощь. next build && next export и задеплоить на любую машину с помощью nginx.

Бзовая конфигурация nginx для статических файлов будет выглядеть так:

 server < listen 80; server_name your_server_name.com; location / < root /www/data; index index.html index.htm; >> 

В этом случае nginx сервер будет отвечать на запрос на 80 порт (стандартный порт для http) файлом index.html находящимся в директории /www/data

Вторым вариантом будет деплой непосредственно node.js приложения. В этом случае сгенерируйте билд и запустите его на машине хосте с помощью команды next build && next start . На этом этапе вы имеете рабочий проект на порте 3000. После этого потребуется настроить nginx в качестве прокси сервера, вот ссылка на документацию — https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/. Базовая конфигурация для таких задач будет выглядеть так:

server < listen 80; server_name your_server_name.com; location / < proxy_pass http://127.0.0.1:3000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; >> 

Теперь nginx будет перенаправлять все http запросы на ваше next.js приложение.

Стоит понимать, что существует много способов и соответствующих инструментов, чтобы задеплоить приложение. В качестве альтренативы nginx существует Apache web server (https://httpd.apache.org/).

Для запуска node.js приложений в продакшн есть проект pm2, думаю, он подойдет лучше, чем стандартный next.js. Официальный сайт pm2 — https://pm2.keymetrics.io/ и его npm пакет — https://www.npmjs.com/package/pm2.

В качестве альтернативы pm2 вариант запуска next.js приложения в докер контейнере, пример есть на гитхабе — https://github.com/vercel/next.js/tree/canary/examples/with-docker. Этот вариант можно использовать вместе с docker-compose для того, чтобы в случае возникновения ошибок контейнер перезагрузился самостоятельно и ваше приложения работало без перебоев и необходимости ручного перезапуска.

Для конфигурации docker-compose добавьте в пример с гитхаба файл docker-compose.yml с содержимым:

services: web: build: . ports: - 3000:3000 restart: unless-stopped 

И запустите docker-compose командой docker-compose up . Конечно для этого необходимо установить на машину-хост docker (инструкция установки https://docs.docker.com/engine/install/) и docker-compose (и еще инструкция — https://docs.docker.com/compose/install/)

В завершении хочу добавить, что я не являюсь специалистом ни в одной из перечисленных технологий и самый лучший вариант что-то изучить — это попробовать сделать это самостоятельно. Вы можете попробовать задеплоить ваш проект на собственном компьютере с помощью любого описанного выше способа, а потом арендовать виртуальную машину, например, на yandex.cloud и задеплоить там уже в продакшн, подключившись к машине с помощью ssh.