Com crear un lloc web en un Raspberry Pi, amb Node.js, Express i MongoDB Part 1: 6 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:14

Benvingut a la PART 1 del meu tutorial d'aplicacions web node.js. La primera part revisarà el programari necessari que s’utilitza per al desenvolupament d’aplicacions node.js, com utilitzar el reenviament de ports, com crear una aplicació mitjançant Express i com executar la vostra aplicació. La segona part d’aquest tutorial repassarà tot el codi i l’estructura de la meva aplicació web completa. Si esteu preparats per a això, visiteu-lo aquí.

Per tant, mentre construïa la meva pàgina personal de llançament, em va costar molt sortir de la mala herba. Hi ha més a Internet del que fins i tot no entendré mai sobre la creació d’una pàgina web.

Es tracta d’un recorregut per fer servir Node.js, Express i Mongodb. per crear una pàgina web.

El codi per a tot això és aquí.

La meva pàgina web es diu Internet. Si voleu una visió més interactiva, visiteu un lloc web personal.

Vaig començar aquesta pàgina per tenir presència personal a Internet amb els projectes que he fet, amb enllaços als meus projectes instructius per obtenir més detalls.

Aquest lloc està allotjat a casa meva en un pi zero W.

Pas 1: coses que necessiteu

1. Temps. No puc subratllar que desenvolupar un lloc i entendre de debò el funcionament intern és un procés llarg. Tinc una llicenciatura en enginyeria elèctrica amb un enfocament en microelectrònica i un amor per la codificació, i això encara em va costar mesos complir-ho.

Aquest tutorial serà un bon element bàsic, però si us plau llegiu més documentació en línia per entendre cada peça.

2. Raspberry pi: qualsevol model ho farà. També ho farà qualsevol equip amb Linux. De fet, qualsevol ordinador ho farà, només vaig a detallar més sobre com executar-lo en un pi.

3. Connexió a Internet: si teniu previst allotjar-lo al món. Cal configurar un encaminador o un commutador de xarxa per configurar el reenviament de ports.

4. Programari: funcionarà qualsevol plataforma de codificació, Sublim, Webstorm, Notepadd ++, Visual Studios o qualsevol altra cosa. He utilitzat principalment Webstorm o Sublime.

Pas 2: reenviament de ports al vostre Raspberry Pi

Per tant, vaig a suposar que ja teniu configurat el vostre raspberry pi. Si no, fes un cop d'ull a aquest senzill tutorial aquí.

El meu pi està executant Jessie lite i és tot terminal. L’avantatge d’això és que no tinc molts processos en execució en segon pla que puguin fer que el meu servidor funcioni més lent amb un trànsit elevat. Permeteu-me afirmar ara que aquest tutorial és per a llocs amb poc trànsit. Qualsevol lloc amb un gran trànsit serà lent en un pi i pot provocar un bloqueig del servidor.

Desviament de ports

Amb el pi configurat, haureu d’habilitar el reenviament de ports al vostre encaminador o commutador. Per fer-ho, busqueu la configuració de reenviament de ports al vostre encaminador. Tots els encaminadors són diferents, aquí mostro la meva GUI de Linksys Velop.

El meu lloc està configurat al port 3000, es pot canviar al codi font al fitxer app.js o www.

També tinc el port 22 configurat per reenviar-lo per poder SSH al meu pi, això es pot configurar a la configuració de pi. SSH és una manera d’utilitzar el terminal del vostre pi mentre no esteu a la mateixa xarxa, i també mentre no utilitzeu la sortida de visualització del pi. Això em permet actualitzar el meu lloc web des d’un altre equip i introduir els canvis al meu pi.

Seguiu les imatges per configurar el reenviament de ports.

Servei DNS

Necessitareu un servei que enllaci la vostra adreça IP amb un nom d’adreça web. Podreu escriure l'adreça IP global dels vostres routers seguida del número de port per accedir al vostre lloc. Això, però, és difícil sobretot si el vostre IP global canvia. El que fa un servei DNS és fer un seguiment i actualitzar aquests canvis de manera que el vostre nom web i la vostra IP estiguin enllaçats. Decideixo utilitzar un servei gratuït mitjançant no-ip. Podeu pagar tot el que vulgueu. Aquesta és només una forma gratuïta que conec.

www.noip.com/

Pas 3: Instal·lació del programari necessari a Pi

Si heu descarregat el meu codi GitHub, no haureu de fer res excepte executar una senzilla ordre npm start per fer funcionar el lloc. Tanmateix, atès que es tracta d’un tutorial en profunditat, explicaré com instal·lar tot el programari i paquets necessaris.

Al vostre ordinador pi o Linux (hi haurà diferents ordres per utilitzar Windows), executeu les ordres següents.

Els he dividit com a passos individuals per facilitar-ne el seguiment.

1. Instal·leu node.js i npm

Node.js és bàsicament l’escript Java que crea el servidor. NPM és el gestor de paquets de nodes i gestiona tots els productes intermedis necessaris amb node.js.

Executeu les ordres següents en una màquina Linux o Mac per instal·lar-les.

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

Per descarregar a Windows, només cal que utilitzeu l'exe que es troba aquí.

Aquest enllaç serveix per ajudar Linux si no en un raspberry pi.

2. Instal·leu MongoDB

MongoDB és només això, una base de dades. Ho faig servir per a una part d'inici de sessió i comptador de trànsit de la meva pàgina web.

Executeu les ordres següents en una màquina Linux o Mac per instal·lar-les.

sudo apt-key adv --keyyserver 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

Per descarregar a Windows, només cal que utilitzeu l'exe que es troba aquí.

Aquest enllaç serveix per ajudar Linux si no en un raspberry pi.

3. Instal·leu Grunt

Grunt és com npm, ja que el podeu utilitzar juntament amb altres connectors. No l’utilitzo per a la meva aplicació, però és molt útil a l’hora d’automatitzar tasques. Aquest pas es pot ometre completament perquè la vostra aplicació funcioni.

Per a Windows, Mac o Linux utilitzeu l'ordre següent.

npm install -g grunt-cli

4. Instal·leu Express

Express és una manera senzilla d’utilitzar el framework js de node. Instal·larem un generador exprés. Això crea el marc fàcil d’utilitzar d’una aplicació web.

Per a Windows, Mac o Linux utilitzeu l'ordre següent.

npm instal·la express-generator -g

Pas 4: creeu una aplicació Express Node.js

Aneu a la ubicació de la carpeta on voleu tenir l'aplicació. Un cop aquí, totes les instal·lacions futures seran dins d'aquesta carpeta.

Executeu les ordres següents en una màquina Linux o Mac per canviar de directori.

sudo cd / home / pi / myapp

Per a Windows:

cd C: / Users / pi / Desktop / myapp

Utilitzeu el generador express per crear el marc js del node necessari.

expressa el nom de la meva aplicació

Això crearà un projecte node.js express, podeu editar-ne les funcions durant aquest pas trobant diferents ordres tal com es veu a continuació mitjançant l'ordre -h. O podeu editar manualment la plantilla generada, com he fet jo. Ho parlaré amb més detall a la part 2. Podeu afegir altres variables a aquest codi per canviar la configuració de la vostra aplicació, com ara utilitzar HTML, manillar, jade i altres. Per a això, executeu l'ordre:

expressar -h

Continueu configurant l'aplicació web node.js executant les ordres següents:

cd nameofmyapp

Instal·lació de npm

Això instal·la tots els paquets necessaris que haureu d'executar l'aplicació web node.js i molts més que estiguin disponibles per utilitzar.

En aquest exemple, la ruta del fitxer de l'aplicació seria:

/ home / pi / myapp / nameofmyapp

Això es deu al fet que el generador exprés crea un fitxer basat en la cadena que col·loqueu després. Si ja esteu al directori desitjat, feu servir express.

Pas 5: executeu l'aplicació web

Per executar l'aplicació web node.js, executeu l'ordre:

npm d'inici

Per fer-lo més eficient mentre es codifica, de manera que la nostra aplicació s’actualitzi automàticament després de fer canvis, instal·larem nodemon.

npm install -g nodemon

Aquí és on la majoria de tutorials us indiquen que us divertireu a construir i us deixareu esbrinar el treball dur de la cama. En els passos següents us explicaré com he creat la meva aplicació.

Pas 6: crèdit

Realment no és un pas, però vull enumerar les fonts i la inspiració d’aquest tutorial.

Aquest Github ReadMe va ser escrit per un bon amic mentre treballava en el nostre projecte de disseny sènior i ens ha servit de molta inspiració sobre com crear el meu lloc.

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

Aquest tutorial va ser una eina útil en el procés de creació d'una aplicació web.

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

Per obtenir més informació sobre un lloc node.js, visiteu la meva part 2.