Развертывание веб сайта на сервере

Жмем кнопку "Получить ингредиенты" и скачиваем готовые под наш проект index.js, restore.js, config.json, package.json. Это действие также изменит конфиг Nginx, инструкции по распаковке и запуску на этой странице!

Ингредиенты

Облачный сервер (у любого хостинг провайдера покупаем стандартный тариф с ubuntu 24 + IP, получаем IP и пароль)

Настройка сервера

На компьютер устанавливаем PUTTY, чтобы подключится к серверу по SSH. Открываем PUTTY, прописываем IP, называем сессию и жмем сохранить. Вводим пользователя root, вводим пароль, принимаем условия. Далее вся настройка сервера происходит через PUTTY. Вставлять что-либо в PUTTY из буфера не CTR+V, а правая кнопка мыши.

Nginx

Устанавливаем Nginx следующей командой

sudo apt install nginx

Запускаем службу

sudo systemctl restart nginx

Проверяем статус

sudo systemctl status nginx

Домен

Привязываем домен к IP адресу. Сделать это можно у регистратора домена в настройках DNS добавив А запись с IP. Проверяем, заходим на наш домен и видим тестовую страницу Nginx.

Node.js

Устанавливаем curl для загрузки ресурсов

sudo apt install curl

Ресурсы для установки Node.js

curl -fsSL https://deb.nodesource.com/setup_24.x | sudo -E bash -

Установка

sudo apt install nodejs

Проверяем версию

node -v && npm -v

MongoDB

Устанавливаем curl, gnupg2, и software-properties-common

sudo apt install curl gnupg2 software-properties-common -y

Импортируем ключ GPG для MongoDB

curl -fsSL https://www.mongodb.org/static/pgp/server-8.0.asc | sudo gpg --dearmor -o /usr/share/keyrings/mongodb-server-8.0.gpg

Ресурсы для установки

echo "deb [arch=amd64,arm64 signed-by=/usr/share/keyrings/mongodb-server-8.0.gpg] https://repo.mongodb.org/apt/ubuntu noble/mongodb-org/8.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-8.0.list

Включаем новый репозиторий

sudo apt update

Устанавливаем MongoDB

sudo apt install mongodb-org -y

Запускаем службу MongoDB

sudo systemctl start mongod

Проверяем статус

sudo systemctl status mongod

Включаем автоматический запуск при старте системы

sudo systemctl enable mongod

Еще раз проверяем статус, убеждаемся что все работает

sudo systemctl status mongod

PM2

Обеспечивает устойчивость сервера. В случае, если что-то пойдет не так, система себя перезапустит.

npm install pm2 -g && pm2 update

SSL

Сертификат безопасности для зашифрованной передачи данных. Устанавливаем snap

sudo apt install snapd; sudo snap install core; sudo snap refresh core

Устанавливаем certbot

sudo snap install --classic certbot

Права на директорию

Мы будем записывать файлы в папку /var/www, поэтому выдадим ей разрешение.

sudo chmod -R 777 /var/www

Новый проект

На компьютер устанавливаем VSCODE, добавляем раcширение REMOTE SSH
В настройках конфига VSCODE указываем IP Host (IP) HostName (IP) User root
Подключаемся к серверу, вводим пароль
Создаем папку проекта, например /var/www/mysite
Помещаем в папку проекта ингредиенты, которые мы скачали: index.js, restore.js, config.json, package.json вместе с резервной копией

Установка модулей

Установим модули из файла package.json

cd /var/www/mysite && npm install

Конфиг Nginx

Создадим конфиг Nginx

touch /etc/nginx/sites-available/mysite.ru.conf && ln -s /etc/nginx/sites-available/mysite.ru.conf /etc/nginx/sites-enabled/ && echo "server {
    listen 443 ssl;
    server_name mysite.ru;

    # SSL certificate and key paths
    ssl_certificate /etc/letsencrypt/live/mysite.ru/cert.pem;
    ssl_certificate_key /etc/letsencrypt/live/mysite.ru/privkey.pem;

    # Optional: Strong SSL protocols and ciphers for enhanced security
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers 'ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384';
    ssl_prefer_server_ciphers on;

    # Optional: SSL session reuse for performance
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;

    location / {
        # Proxy to your backend server (e.g., an application running on localhost:8080)
        proxy_pass http://localhost:3300; 

	    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; # This line is crucial for WebSockets
        # Other proxy caching directives can be added here

        # Forward important headers to the backend
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    gzip on;
    gzip_comp_level 4;
    gzip_types model/gltf-binary text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}

# Optional: Redirect HTTP traffic to HTTPS
server {
    listen 80;
    server_name mysite.ru;
    return 301 https://$host$request_uri;
}" > /etc/nginx/sites-available/mysite.ru.conf

SSL сертификат

На основании конфигов Nginx выпускаем SSL и соглашаемся с условиями

sudo certbot certonly --nginx

Включаем авто обновление

sudo certbot renew --dry-run

Распаковываем

Запускаем index.js, чтобы распаковать резервную копию

cd /var/www/mysite && sudo node index.js

Проект распакуется из резервной копии, файл index.js изменится примерно на такой

;(async () => {
    console.log('попытка начать')

    require('./app/clickplayer/index.js')
    const express = require('express')
    const app = express()
    const server = app.listen(3300)
    await cb.Run(app, server)
    app.get('*', cb.Render)

    console.log('сервер онлайн', new Date().toString())
})()

Пуск

Теперь, если еще раз запустить индексный файл, сайт будет онлайн. Убеждаемся, что так и есть.

cd /var/www/mysite && sudo node index.js

Сейчас, если мы закроем PUTTY сайт выключится. Чтобы сайт работал стабильно и включался при старте системы мы рекомендуем управлять пуском всех проектов из одного файла с помощью утилиты PM2

Если у вас несколько приложений на одном сервере, отредактируйте файл ecosystem.config.js вручную примерно так

module.exports = {
    apps: [
        {
            name: 'mysite.ru',
            script: '/var/www/mysite.ru/index.js',
            autorestart: true,
            merge_logs: true,
            ignore_watch: ['./mysite.ru'],
            watch: false,
        },
        {
            name: 'mysite2.ru',
            script: '/var/www/mysite2.ru/index.js',
            autorestart: true,
            merge_logs: true,
            ignore_watch: ['./mysite2.ru'],
            watch: false,
        },
    ],
}

Запускаем проекты перечисленные в конфиге ecosystem.config.js

sudo pm2 start --no-daemon /var/www/ecosystem.config.js

Сохраняем состояние для запуска при старте системы

sudo pm2 startup

На этом все. Несколько полезных команд для pm2: Список проектов

sudo pm2 list

Остановка проекта с индексом 0

sudo pm2 stop 0

Старт проекта с индексом 0

sudo pm2 start 0

Сохранение состояния

sudo pm2 save

Инструменты разработчика

HTML

CSS

Бэкенд

Бэкенд

HTML

JavaScript

Компоненты

JavaScript

Бэкенд

Развертывание веб сайта на сервере

Ингредиенты

Настройка сервера

Nginx

Домен

Node.js

MongoDB

PM2

SSL

Права на директорию

Новый проект

Установка модулей

Конфиг Nginx

SSL сертификат

Распаковываем

Пуск