Как создать веб-сайт на Raspberry Pi с помощью Node.js, Express и MongoDB Часть 1: 6 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:52

Добро пожаловать в ЧАСТЬ 1 моего руководства по веб-приложению node.js. В первой части мы рассмотрим необходимое программное обеспечение, используемое для разработки приложений node.js, как использовать переадресацию портов, как создать приложение с помощью Express и как запустить ваше приложение. Во второй части этого руководства мы рассмотрим весь код и структуру моего полного веб-приложения. Если вы готовы к этому, посетите его здесь.

Итак, при создании своей персональной стартовой страницы мне было очень сложно выбраться из-под сорняков. В Интернете есть больше, чем я могу когда-либо понять о создании веб-страницы.

Это пошаговое руководство по использованию Node.js, Express и Mongodb. для создания веб-страницы.

Код для всего этого здесь.

Моя веб-страница называется Интернет. Посетите, если вы хотите более интерактивно взглянуть на личный веб-сайт.

Я начал эту страницу, чтобы лично присутствовать в Интернете с проектами, которые я реализовал, со ссылками на мои обучающие проекты для получения более подробной информации.

Этот сайт размещен в моем доме на пи-нуле W.

Шаг 1. Вещи, которые вам нужны

1 раз. Я не могу подчеркнуть, что разработка сайта и истинное понимание внутренней работы - это долгий процесс. У меня есть степень в области электротехники с акцентом на микроэлектронику и любовь к кодированию, и мне все равно потребовались месяцы, чтобы сделать это.

Этот учебник станет хорошим строительным блоком, но, пожалуйста, прочтите дополнительную документацию в Интернете, чтобы понять каждую часть.

2. Raspberry pi - подойдет любая модель. Также подойдет любой компьютер под управлением Linux. На самом деле подойдет любой компьютер, я просто более подробно расскажу, как запустить его на пи.

3. Подключение к Интернету - если вы планируете разместить это в мире. Для настройки переадресации портов необходим маршрутизатор или сетевой коммутатор.

4. Программное обеспечение - подойдет любая платформа для кодирования, Sublime, Webstorm, Notepadd ++, Visual Studios или что-нибудь еще. В основном я использовал Webstorm или Sublime.

Шаг 2: перенаправление портов на Raspberry Pi

Итак, я собираюсь предположить, что у вас уже настроен Raspberry Pi. Если нет, ознакомьтесь с этим простым руководством здесь.

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

Перенаправление порта

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

Мой сайт настроен на порт 3000, это можно изменить в исходном коде в файле app.js или www.

У меня также есть порт 22, настроенный для пересылки, поэтому я могу подключиться к моему пи по SSH, это можно настроить в настройках пи. SSH - это способ использовать терминал на вашем пи, когда он не находится в той же сети, а также без использования вывода дисплея с пи. Это позволяет мне обновлять свой веб-сайт с другого компьютера и вносить изменения в свой пи.

Следуйте рисункам, чтобы настроить переадресацию портов.

Служба DNS

Вам понадобится служба, которая связывает ваш IP-адрес с именем веб-адреса. Вы сможете ввести глобальный IP-адрес вашего маршрутизатора, а затем номер порта для доступа к вашему сайту. Однако это сложно, особенно если ваш глобальный IP-адрес меняется. Служба DNS отслеживает и обновляет эти изменения, чтобы ваше веб-имя и IP-адрес были связаны. Я предпочитаю пользоваться бесплатным сервисом через no-ip. Вы можете платить за все, что хотите. Это просто бесплатный способ, о котором я знаю.

www.noip.com/

Шаг 3: установка необходимого программного обеспечения на Pi

Если вы загрузили мой код GitHub, вам не нужно ничего делать, кроме запуска простой команды npm start, чтобы сайт заработал. Однако, поскольку это подробное руководство, я объясню, как установить все необходимое программное обеспечение и пакеты.

Находясь на вашем компьютере pi или linux (для использования Windows будут разные команды), выполните следующие команды.

Я разбил их на отдельные шаги, чтобы упростить выполнение.

1. Установите node.js и npm

Node.js - это, по сути, java-скрипт, который создает сервер. NPM - это диспетчер пакетов узлов и обрабатывает все необходимое промежуточное программное обеспечение с помощью node.js.

Для установки выполните следующие команды на компьютере с Linux или Mac.

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

Для загрузки в Windows просто используйте exe, найденный здесь.

Эта ссылка предназначена для помощи Linux, если не на Raspberry Pi.

2. Установите MongoDB

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

Для установки выполните следующие команды на компьютере с Linux или Mac.

sudo apt-key adv --keyserver hkp: //keyserver.ubuntu.com: 80 --recv 0C49F3730359A14518585931BC711F9BA15703C6

echo "deb https://repo.mongodb.org/apt/debian jessie / mongodb-org / 3.4 main" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list

sudo apt-get update

sudo apt-get install -y mongodb-org

Для загрузки в Windows просто используйте exe, найденный здесь.

Эта ссылка предназначена для помощи Linux, если не на Raspberry Pi.

3. Установите Grunt

Grunt похож на npm, так как вы можете использовать его вместе с другими плагинами. Я не использую его в своем приложении, но он очень помогает при автоматизации задач. Этот шаг можно полностью пропустить, чтобы ваше приложение работало.

Для Windows, Mac или Linux используйте следующую команду.

npm install -g grunt-cli

4. Установите Express

Express - это простой способ использовать фреймворк node js. Собираемся установить экспресс-генератор. Это создает простую в использовании структуру веб-приложения.

Для Windows, Mac или Linux используйте следующую команду.

npm установить экспресс-генератор -g

Шаг 4. Создайте приложение Express Node.js

Перейдите в папку, в которой вы планируете разместить свое приложение. После этого все будущие установки будут внутри этой папки.

Выполните следующие команды на компьютере Linux или Mac, чтобы сменить каталог.

sudo cd / home / pi / myapp

Для Windows:

компакт-диск C: / Users / pi / Desktop / myapp

Используйте экспресс-генератор для создания необходимой инфраструктуры node js.

выразить имя

Это создаст простой проект express node.js, вы можете редактировать его функции на этом этапе, находя различные команды, как показано ниже, с помощью команды -h. Или вы можете вручную отредактировать сгенерированный шаблон, как я. Я расскажу об этом более подробно в части 2. Вы можете добавлять в этот код другие переменные, чтобы изменять настройки в вашем приложении, например, используя html, handlebars, jade и другие. Для этого выполните команду:

экспресс -h

Продолжите настройку веб-приложения node.js, выполнив следующие команды:

имя компакт-диска

npm install

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

В этом примере путь к файлу приложения будет следующим:

/ главная / пи / myapp / nameofmyapp

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

Шаг 5. Запустите ваше веб-приложение

Чтобы запустить веб-приложение node.js, выполните команду:

npm start

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

npm install -g nodemon

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

Шаг 6: Кредит

Не совсем шаг, но я хочу перечислить свои источники и вдохновение для этого урока.

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

github.com/SDP-DT04/Web-Application/blob/m…

Это руководство было полезным инструментом в процессе создания веб-приложения.

kroltech.com/2013/12/29/boilerplate-web-app…

Для получения дополнительной информации о сайте node.js посетите мою часть 2.