Этот учебник покажет вам, как преобразовать статический веб-сайт, который использует HTML, CSS и JavaScript (JS) к динамическому использованию MongoDB, Express, Static HTML, CSS, JS и Node.js.
Наш текстовый стек будет похож на популярный средний стек/Mern (Mongodb, Express, угловые или реагирование, а nodejs). Но вместо того, чтобы использовать угловые или реагировать, мы будем использовать шаблонный двигатель под названием EJS (Встроенный JavaScript.)
Другие популярные шаблонные двигатели включают руль, мопс и Nunjucks.
После этого мы разверним наш веб-приложение Node.js к Digitalocean и прикрыть доменные имена, SSL, обратный прокси и менеджеры процесса.
Изучение языка шаблонов может быть проще, чем структура JS. Вы можете просто написать HTML, и он позволяет вставлять один и тот же кусок кода в нескольких местах (называемые частичными) или передавать переменные на стороне серверов, которые будут отображаться на переднем конце (например, имя пользователя).
Оглавление
- Разработка вашего первого веб-приложения Node.js
- Установка Node.js.
- Тестирование установки
- Создание вашего первого сервера
- Следующие шаги
- Основы шаблонов
- Передача данных сервера в интерфейс
- Развертывание вашего первого веб-приложения Node.js
- Настройка на цифровой камень
- Подключение к вашей капельке
- Развертывание вашего приложения Node.js
- Настройка вашего доменного имени
- Удаление номера порта с вашего URL
- Запуск приложения на загрузке (настройка менеджера процесса)
Разработка вашего первого веб-приложения Node.js
Установка Node.js.
Во-первых, убедитесь, что вы установили Node.js на локальном компьютере или поставщике хостинга VPS. Если вы не установили его, перейдите к Node.js сайт сделать это.
С Node.js вы можете писать серверный код, используя специальную форму JavaScript, чтобы вы могли использовать уже знакомый язык.
Установщик Node.js поставляется в комплекте с управляющим пакетом NPM. NPM – это репозиторий для узлов модулей, многоразовых кусков кода, который может продлить функциональность вашего сервера. Это похоже на репозиторий плагина, а модули узлов можно рассматривать как фрагменты кода или библиотеки (в зависимости от того, насколько они велики).
Пользователи Windows: Нужно добавлять узла и NPM на свой путь, чтобы они могли легко вызвать их в командной строке. Для более глубоких инструкций см. Мой Руководство здесь.
Тестирование установки
Чтобы проверить, что установка работает правильно, открыть окно терминала и введите узел -v и NPM -v . Если полученное сообщение начинается с V и сопровождается некоторыми числами (указывая версию), то установка была успешной. Теперь вы готовы создать свой первый сервер.
Создание вашего первого сервера
После того, как вы создали статический сайт, первый шаг в создании приложения Node.js – создать Express Web-сервер.
Во-первых, переместите все статические файлы вашего сайта (HTML, CSS, JS, изображения и т. Д.) в папку, называемую публику и создайте файл, называемый server.js в корневом каталоге папки вашего веб-сайта. В типе файла Server.js:
// Load Node modules
var express = require('express');
// Initialise Express
var app = express();
// Render static files
app.use(express.static('public'));
// Port website will run on
app.listen(8080);
Затем в терминале типа: NPM init Отказ Нажмите Enter, чтобы принять параметры по умолчанию для всех следующих параметров, но убедитесь, что точка входа – Server.js.
Наконец, введите: NPM Start. А затем перейдите на IP-адрес вашего VPS-хоста или localhost: 8080/index.html (или имя одного из ваших веб-страниц) в браузере. Экспресс-сервер, который вы только что создали, теперь должен служить статическими файлами вашего сайта.
Следующие шаги
Продвижение вперед, мы обсудим, как преобразовать ваши статические файлы в динамические с помощью устройства шаблонов EJS. Затем мы посмотрим, как скопировать повторный код, используя частичные и вводить переменные на стороне серверов к интерфейсу.
Основы шаблонов
Установка EJS.
Первый шаг к использованию EJS – это установить его. Простой NPM установить EJS --save сделаю трюк. --save Параметр сохраняет модуль к package.json файл.
Это делает его так, чтобы кто-то, кто клонирует Git Repo (или иным образом загружает файлы сайта), может установить все необходимые модули узлов для проекта (называемые зависимостями), используя NPM установить команда вместо этого. Тогда им не нужно печатать NPM Установка (Имя модуля) Однако многие модули им нужны.
Преобразование статических страниц в файлы EJS
Далее необходимо преобразовать ваши статические HTML-файлы в динамические EJS и настроить структуру вашей папки в способе ожидаемых EJS.
В корневом каталоге вашего сайта создайте папку под названием Views. Внутри этой папки создают две подпапки, называемые страницы и частичными. Переместите все ваши HTML-файлы в подпапку страниц и переименуйте расширения файлов .html в .ejs.
Структура вашей папки должна выглядеть аналогичной картинке ниже.
Повторное использование кода – создание ваших первых EJS частичных
При создании статических сайтов часто бывают код, который вы повторите на каждой странице, такой как голова (где расположены мета теги), заголовок и нижнего колонтитула.
Это неудобно изменить их на каждой странице (особенно на больших участках), если необходимы изменения. Но если вы используете частичные части EJS, то вам не придется. Редактирование одного шаблона (частичный) файл обновит код на каждой странице, в которую входит файл.
Мы возьмем типичную часть сайта, который будет шаблон, заголовок, в качестве примера. Создайте новый файл под названием Header.ejs в папке частиц. Скопируйте и вставьте весь код между <заголовок> Теги на одной из ваших страниц EJS в нее.
Наконец, на всех страницах с заголовком удалите код между <заголовок> Теги (тот же код, который вы скопировали на частичный файл header.ejs) и замените его с помощью <% включают ('..//Partials/Header')%> Отказ Теперь вы создали свой первый EJS частичной. Повторите процесс для любых других повторяющихся кусков кода, таких как участки головы и нижнего колонтитула.
Небольшой совет: Если вам трудно различиваться между вашими страницами и частичными, так как у них есть одно и то же расширение файла .ejs, может быть полезно поставить подчеркивание _ перед именами частиц (так _ header.ejs). Это Конвенция об именах, что некоторые разработчики используют, которые могут быть полезны.
Рендеринг страниц EJS.
Теперь мы добираемся до захватывающей части: создание сервера оказывать страницы EJS и частичными, чтобы вы могли видеть их на переднем углу.
server.js. Пример
// Load Node modules
var express = require('express');
const ejs = require('ejs');
// Initialise Express
var app = express();
// Render static files
app.use(express.static('public'));
// Set the view engine to ejs
app.set('view engine', 'ejs');
// Port website will run on
app.listen(8080);
// *** GET Routes - display pages ***
// Root Route
app.get('/', function (req, res) {
res.render('pages/index');
});
Во-первых, нам нужно добавить модуль узла EJS на наш сервер. Итак, в Server.js Файл (см. Пример выше), добавьте const ('ejs'); Отказ
Во-вторых, нам нужно сказать наш экспресс-сервер использовать EJS, так что добавить app.set («Просмотр двигателя», «EJS»); Отказ
Теперь нам нужно настроить маршруты. Маршруты Скажите серверу, что делать, когда пользователь отправляется на определенный URL на вашем сайте, например http://testapp.com/login Отказ
Есть два типа маршрутов, Get и Post. Получите маршруты Display Pages и Post Marls Загрузить данные с интерфейса на сервер (обычно через форму), как правило, перед отображением страницы, и загруженные данные как-то используются.
Поскольку мы хотим только показать наши страницы EJS, мы просто будем использовать маршруты получения. Добавьте их после app.listen (8080) линия в Server.js Отказ Для указательной страницы маршрут будет:
// *** GET Routes - display pages ***
// Root Route
app.get('/', function (req, res) {
res.render('pages/index');
});
‘/’ Указывает URL веб-сайта, который будет активировать код req Стенды за запрос и res для ответа. Итак, ответ вернулся при переходе на http://testapp.com рендеринг (отображение в браузере) страницы/index.ejs. Добавить похожие маршруты для других страниц EJS.
Передача данных сервера данных на интерфейс
Основная достопримечательность шаблонов, кроме повторного использования кода, состоит в том, что вы можете пропустить переменные на стороне серверов к интерфейну. Либо одна переменная, такая как имя пользователя текущего пользователя, или массив, как детали каждого зарегистрированного пользователя.
Однако реальная прочность прохождения переменных на стороне сервера становится очевидной при использовании API или баз данных.
Для основного примера код ниже отобразится «Луиза» в теге H2 индекса.
server.js.
// Route Route
app.get('/', function (req, res) {
var name = "Louise";
// Render index page
res.render('pages/index', {
// EJS variable and server-side variable
name: name
});
});
Первый Имя Имя переменной EJS (имя для отображения его на переднем углу), а вторая – переменная, которая содержит данные, которые вы хотите отправить. (Они не должны быть идентичными.)
index.ejs.
My name is <%= name %>
Для простого массива вы можете использовать этот пример вместо этого, который создаст метка P для каждого имени в переменной Listmas:
server.js.
// Route Route
app.get('/', function (req, res) {
var listnames = ["Louise", "Sadie", "Erik", "Raph", "Gina"];
// Render index page
res.render('pages/index', {
// EJS variable and server-side variable
listnames: listnames
});
});
index.ejs.
<% listnames.forEach(function(name) { %>
<%= name %>
<% }); %>
Поздравляю. Вы закончили разработать ваш первый веб-приложение Node.js. В следующей части мы увидим, как мы можем заставить его жить (развернуть его) в Интернете, чтобы вы могли показать это.
Развертывание вашего первого веб-приложения Node.js
Есть много хостинговых платформ, которые вы можете использовать для развертывания веб-приложений Node.js, таких как Раздел , Heroku , Вультр , Линодель , Google Cloud Platform и Amazon Web Services Отказ
На этой проходе мы будем использовать Digitalocean Развернуть наше приложение Node.js.
Настройка на цифровой камень
Во-первых, создайте учетную запись на платформе на цифровой платформе. Доступны коды дисконтных скидок, чтобы добавить бесплатный кредит на вашу учетную запись, такую как код, доступный в пакете разработчиков студента GitHub. Помните, что вы можете использовать только один код на счет.
Во-вторых, вам нужно создать капельку. Капля представляет собой VPS (виртуальный частный сервер.) Это похоже на VM Linux, который где-то размещается на ферме серверов.
После того, как вы вошли в свою учетную запись, перейдите в SATELETS под управлением заголовки и нажмите «Создать», а затем SULTLETS.
Вы можете оставить большинство настроек в качестве по умолчанию, но измените план на основные 5 долларов в месяц, который содержит достаточно ресурсов для вашего приложения. Вы можете масштабировать это позже, если это необходимо.
Кроме того, выберите «Токарчик, ближайший к целевой аудитории вашего приложения» и измените аутентификацию на пароль. В то время как пароль аутентификация менее безопасна (рекомендуется настроить ключи SSH), настроить намного проще. Итак, для демонстрационных целей мы будем использовать этот метод.
Все, что осталось сейчас, состоит в том, чтобы выбрать имя (имя хоста) и нажмите «Создать капельку».
Подключение к вашей капельке
Вскоре после этого вы получите электронное письмо, содержащее имя пользователя и пароль вашей капельки, который вы будете использовать для входа в систему.
Вернуться на веб-сайт Digitalocean, под каплями щелкните имя вашей недавно созданной капельки, а затем нажмите на консоль. Это откроет новую вкладку, которая позволит вам контролировать вашу капельку.
Альтернативно, вы можете использовать любой клиент SSH с IP-адресом и учетными данными пользователя, содержащиеся в электронном письме.
На вашем первом входе в систему, поскольку вы использовали аутентификацию Password, он предложит вам установить новый пароль. Отличный способ генерировать безопасные пароли и хранить их – это менеджер паролей, как LastPass Отказ
Развертывание вашего приложения Node.js
Во-первых, вам нужно скопировать код для вашего веб-приложения в свою капельку. Если вы используете контроль источника, такие как Гит тогда это так же просто, как установка Git, используя apt-get install git -Я а затем с помощью команды GIT Clone Git Clone (ссылка на ваш репозиторий) Добавляя ссылку на ваш репозиторий в конце.
Во-вторых, вам нужно установить узел. Тип:
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash - sudo apt-get install -y nodejs
В-третьих, вам нужно перейти к папке, содержащей ваше веб-приложение. Тип Ls. А затем введите, чтобы просмотреть все папки в вашем текущем рабочем каталоге (местоположение). Это будет выглядеть как изображение ниже:
Введите CD, а затем имя появившегося папки. Введите Ls снова, и вы должны увидеть файлы в корневом каталоге вашего веб-приложения.
Далее вам нужно установить модули узлов (зависимости) для вашего веб-приложения. Если вы установили все свои модули с помощью -save В конце, что спасает их в файл package.json, то просто введите NPM установить и нажмите Enter.
Если нет, когда вы запустите NPM начать Ошибка появится с модулем, не найденным. Тип NPM Установка (Имя модуля) и нажмите Enter, а затем попробуйте запустить NPM начать опять таки. Повторите процесс, пока ошибка не исчезнет.
Если вам нужно установить MongoDB (если вы создали базу данных MongoDB), затем следуйте этим Инструкции Отказ
Наконец, введите NPM начать Чтобы запустить ваше веб-приложение. Теперь, когда ваше веб-приложение работает, на вкладке «Новый браузер» введите IP-адрес вашей капли (найден в электронном письме, который отправляется на цифровой камень, когда вы создали капельку), а затем колонна, и порт вашего приложения работает. Например, 167.172.54.51:8080 Отказ
Если вы используете Express Web-сервер (который, если вы следите за моим начать работу с Руководство по телефону , вы сделали), вы найдете номер порта, расположенный в app.listen () Строка внутри файла server.js. Например, app.listen (8080) который является обычным портом.
Поздравляем, ваш первый веб-приложение Node.js должен отображаться в вашем веб-браузере, который работает на вашей капельке Digitalocean.
Настройка вашего доменного имени
Вы набрали в IP-адресе и номере порта для просмотра вашего веб-приложения, но вы не предпочли бы не пользовательское доменное имя, такое как yourapp.com?
Предполагая, что вы уже купили домен, первый шаг – добавить запись DNS, чтобы ваше доменное имя будет разрешено на IP-адрес вашей капельки DigatalCean. Запись DNS сообщает вашему браузеру, что делать, когда они загружают ваш домен. В этом случае он должен перейти на IP-адрес вашей капельки.
Если вы не купили домен, регистраторы домена, такие как Namecheap Продавайте доменные имена и часто другие услуги, такие как почтовый и статический/CMS хостинг, хотя есть преимущества для проведения выделенного хостинга и поставщика электронной почты.
NetLify предлагает хостинг для статических сайтов и Siteground Для веб-сайтов CMS. Office365 и Gsuite – это короли пользовательских поставщиков электронной почты. Смотри мое руководство для Создание профессионального электронного письма Читать сравнение Office365 и Gsuite.
Войдите в свой регистратор домена и перейдите в Advanced DNS-настройки вашего домена. Например, на NameCheap это продвинутая вкладка DNS на экране «Управление доменом».
Вы хотите добавить новую запись следующим образом: тип должен быть установлен на A, хост должен быть либо @ или пробел (в зависимости от вашего провайдера), и значение должно быть IP-адрес вашей капли. Повторите процесс для хоста www, который сделает то же самое для версии WWW вашего домена.
Это может занять до 24-48 часов для изменений в процессе, но это обычно от 15 минут до часа. Быстрый способ проверить, когда это сделано, это перейти к Dnschecker. Введите свое доменное имя и убедитесь, что тип установлен в A. Когда результат возвращается в качестве IP-адреса вашей капельки, то вы успешно подключили свой домен.
Последний тест состоит в том, чтобы ввести свое доменное имя, сопровождаемое толстой кишки, а затем номер порта (E.g. yourdomain.com: 8080 ). Теперь вы должны увидеть загрузку вашего веб-приложения.
Удаление номера порта с вашего URL
Теперь, когда у вас есть крутое доменное имя, подключенное к вашему веб-приложению, вы, вероятно, захотите удалить этот номер Pesky Port.
Мы можем сделать это, настроив то, что называется обратный прокси. Обратный прокси скажет вашу каплю, когда пользователь отправляется на yourdomain.com, он должен служить сайту в yourdomain.com: 8080. Мы будем использовать популярное обратное прокси Nginx сделать это.
Первый шаг – установить nginx. Введите следующее, чтобы обновить свой список пакетов (так что вы можете получить последнюю версию) и установить Nginx:
sudo apt-get update sudo apt-get install nginx
Поскольку капельки на цифровой камере создаются с включенным брандмауэром, вам придется разрешать Nginx через него, чтобы он мог работать правильно. Sudo Ufw Разрешить «Nginx Full» сделаю это.
Чтобы проверить установку прошел гладко, перейдите к HTTP-версию вашего доменного имени например http://yourdomain.com . Если вы видите добро пожаловать на посадочную страницу Nginx, то это было успешно.
Второй шаг – защитить ваш обратный прокси. В настоящее время собирается https://yourdomain.com не будет работать. Это потому, что мы еще не настроили SSL, и нам нужно установить пакет под названием Certbot для этого.
Чтобы установить CERTBOT, введите следующее, чтобы убедиться, что вы получите последнюю версию:
sudo add-apt-repository ppa:certbot/certbot sudo apt-get install python-certbot-nginx
Далее необходимо добавить свой домен в Nginx, поэтому CERTBOT может генерировать сертификат на правильный домен. Откройте файл конфигурации, используя Sudo Nano/etc/nginx/сайты - доступны/по умолчанию И замените подчеркивания в строке сервера_name в свой домен. Например, server_name yourdomain.com www.yourdomain.com; Отказ Сохраните файл и выйдите, набрав Ctrl + X, Y, а затем введите.
Чтобы проверить, что в файле нет ошибок, введите sudo nginx -t И если нет, введите Sudo Systemctl Перезагрузка Nginx Перезагрузить Nginx, чтобы он использовал обновленную конфигурацию.
Теперь нам просто нужно создать сертификат SSL. sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com начнут процесс. Вы должны выбрать вариант 2 для процесса перенаправления, поскольку он будет пересылать любого, кто пытается получить доступ к небезопасному варианту вашего сайта (HTTP) в версию Secure (HTTPS).
Чтобы проверить это, перейдите к https://yourdomain.com. И вы должны увидеть экран приветствия Nginx снова.
Наконец, мы на последнем шаге, добавляя конфигурацию Nginx для вашего веб-приложения. Для демонстрационных целей мы просто модифицируем по умолчанию, вместо того, чтобы создавать новый специально для вашего веб-приложения. Если вам нужно провести несколько веб-приложений на одной капле, вам нужно добавить новую конфигурацию для каждого сайта.
Тип: Sudo Nano/etc/nginx/сайты - доступны/по умолчанию Для редактирования файла конфигурации по умолчанию.
Вам нужно изменить Server_name Параметр на имя вашего домена. Например: yourdomain.com. При место/, Proxy_Pass следует изменить на http://localhost: (имя порта) Отказ ssl_certificate_key следует модифицировать: /etc/leteSensrypt/live/(домен Имя)/privkey.pem Отказ Наконец, добавьте блок кода ниже до конца файла, а затем введите Ctrl + X, а затем Y для выхода.
server {
if ($host = auroraspotter.space) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 80 default_server;
listen [::]:80 default_server;
server_name auroraspotter.space;
return 404; # managed by Certbot
Вот полный пример того, что он должен выглядеть так. Примечание: Server_name должно быть название вашего домена.
server {
root /var/www/html;
index index.html index.htm index.nginx-debian.html;
server_name auroraspotter.space;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://localhost:8080;
proxy_set_header Host $http_host;
proxy_cache_bypass $http_upgrade;
proxy_redirect off;
}
listen [::]:443 ssl ipv6only=on; # managed by Certbot
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/auroraspotter.space/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/auroraspotter.space/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
server {
if ($host = auroraspotter.space) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 80 default_server;
listen [::]:80 default_server;
server_name auroraspotter.space;
return 404; # managed by Certbot
Чтобы проверить, что в файле нет ошибок, введите sudo nginx -t Отказ Если нет, введите Sudo Systemctl Перезагрузка Nginx Перезагрузить Nginx, чтобы он использовал обновленную конфигурацию.
Наконец, вы должны быть в состоянии пойти на yourdomain.com, и ваше веб-приложение будет работать.
Запуск приложения на загрузке (настройка менеджера процесса)
Вы подсели свое доменное имя до вашей капли и настроили NGINX, чтобы обслуживать ваше веб-приложение, но как вы сохраняете его все время, особенно после перезапуска вашей капли?
Вот где находится менеджер процесса. Он будет управлять вашим приложением Node.js, регистрируйте любые ошибки и запускайте/остановите его по мере необходимости. Мы будем использовать менеджер процессов, называемый PM2.
Первый шаг – установить PM2, используя Sudo NPM Установить PM2 @ Последние -G Отказ Далее, чтобы запустить его на загрузке, запустить PM2 Startup Systemdd Отказ Следует сказать, чтобы настроить сценарий запуска, скопировать и вставить следующую команду, которая будет Sudo Env Path = $ PATH:/USR/BIN/USR/LIB/NODE_MODULES/PM2/BIN/PM2 Startup Systemdd -U (имя пользователя) --hp/home/(имя пользователя) .
Если вы используете вход в систему по умолчанию, который предоставлен Digitalocean, это будет root. Введите это в терминал и нажмите Enter. Если он говорит, что команда успешно выполняется (например, ниже), то она сработала.
[ 'systemctl enable pm2-root' ] [PM2] Writing init configuration in /etc/systemd/system/pm2-root.service [PM2] Making script booting at startup... [PM2] [-] Executing: systemctl enable pm2-root... [PM2] [v] Command successfully executed.
Используя команду CD, перейдите к папке вашего веб-приложения. Затем введите PM2 запуска Server.js Отказ Это начнет веб-приложение, используя PM2. После этого типа PM2 Сохранить Что сохранит его, чтобы быть запущенным при загрузке. Если он говорит успешно сохранен, то он был исправлен правильно.
[PM2] Saving current process list... [PM2] Successfully saved in /root/.pm2/dump.pm2
Наконец, введите sudo systemctl начать PM2- (имя пользователя) Отказ
Попробуйте перезапустить капуницу, набрав перезагрузку и через несколько минут перейдите в yourdomain.com Отказ Ваше веб-приложение должно быть и работает как обычно.
Если вы хотите создать навыки, которые вы узнали в этом руководстве, я предлагаю использовать шаблон EJS для работы с API и базы данных .
Оригинал: “https://www.freecodecamp.org/news/develop-deploy-first-fullstack-web-app/”