Ako vytvoriť webovú stránku na Raspberry Pi s Node.js, Express a MongoDB Časť 1: 6 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:59

Vitajte v ČASTI 1 môjho tutoriálu o webovej aplikácii node.js. Časť 1 sa bude zaoberať potrebným softvérom použitým na vývoj aplikácií node.js, ako používať presmerovanie portov, ako vytvoriť aplikáciu pomocou Expressu a ako ju spustiť. Druhá časť tohto tutoriálu sa bude zaoberať všetkým kódom a štruktúrou mojej úplnej webovej aplikácie. Ak ste na to pripravení, navštívte ho tu.

Takže pri vytváraní mojej osobnej úvodnej stránky bolo pre mňa veľmi ťažké dostať sa z buriny. Na internete je toho viac, ako by som kedy dokázal o vytvorení webovej stránky pochopiť.

Toto je návod, ako používať Node.js, Express a Mongodb. vytvoriť webovú stránku.

Kód pre toto všetko je tu.

Moja webová stránka sa nazýva Internet. Ak chcete interaktívnejší pohľad na osobnú webovú stránku, navštívte stránku.

Začal som na tejto stránke, aby som mal osobnú prítomnosť na internete s projektmi, ktoré som urobil, s odkazmi na moje projekty s pokynmi, kde nájdete ďalšie podrobnosti.

Táto stránka je umiestnená v mojom dome na adrese Pi zero W.

Krok 1: Veci, ktoré potrebujete

1krát. Nemôžem zdôrazniť, že vývoj stránky a skutočné porozumenie vnútornému fungovaniu je dlhý proces. Mám diplom z elektrotechniky so zameraním na mikroelektroniku a lásku k kódovaniu, a napriek tomu mi to trvalo mesiace.

Tento tutoriál bude dobrým stavebným kameňom, ale prečítajte si online dokumentáciu, aby ste porozumeli každému dielu.

2. Raspberry pi - postačí akýkoľvek model. Postačí aj akýkoľvek počítač so systémom Linux. V skutočnosti to urobí každý počítač, len sa podrobnejšie zaoberám tým, ako ho spustiť na pí.

3. Pripojenie k internetu - ak ho plánujete hostiť vo svete. Na konfiguráciu presmerovania portov je potrebný smerovač alebo sieťový prepínač.

4. Software - Bude fungovať akákoľvek platforma na kódovanie, Sublime, Webstorm, Notepadd ++, Visual Studios alebo čokoľvek iné. Používal som hlavne Webstorm alebo Sublime.

Krok 2: Presmerovanie portov na vašom Raspberry Pi

Budem teda predpokladať, že už máte svoje malinové pi nastavené. Ak nie, pozrite sa na tento ľahký návod tu.

Moje pi beží Jessie lite a je všetko terminál. Výhodou je, že na pozadí nebeží veľa procesov, ktoré by mohli spôsobiť, že môj server bude pri vysokej premávke bežať pomalšie. Dovoľte mi teraz uviesť, že tento návod je pre weby s nízkou návštevnosťou. Akákoľvek stránka s vysokou návštevnosťou bude pomalá a môže spôsobiť zlyhanie servera.

Presmerovanie portov

Keď je vaše pi nastavené, budete musieť na svojom smerovači alebo prepínači povoliť presmerovanie portov. Za týmto účelom vyhľadajte vo svojom smerovači nastavenia presmerovania portov. Každý smerovač je iný, tu uvádzam svoje GUI Linksys Velop.

Moja stránka je nakonfigurovaná na port 3000, čo je možné zmeniť v zdrojovom kóde v súbore app.js alebo www.

Mám tiež nastavený port 22 na presmerovanie, aby som mohol SSH vložiť do svojho pi, toto je možné nastaviť v nastaveniach pí. SSH je spôsob, ako používať terminál na vašom pí, keď nie ste v rovnakej sieti, a tiež bez toho, aby ste používali zobrazovací výstup z pi. To mi umožňuje aktualizovať moju webovú stránku z iného počítača a odoslať zmeny do svojho súboru pí.

Podľa obrázkov nastavte presmerovanie portov.

Služba DNS

Budete potrebovať službu, ktorá prepojí vašu IP adresu s názvom webovej adresy. Na prístup na svoje stránky budete môcť zadať globálnu adresu IP smerovača a číslo portu. To je však ťažké, najmä ak sa zmení vaša globálna adresa IP. Služba DNS sleduje a aktualizuje tieto zmeny, aby boli prepojené vaše webové meno a adresa IP. Rozhodol som sa použiť bezplatnú službu prostredníctvom no-ip. Môžete zaplatiť za čokoľvek, čo chcete. Toto je len bezplatný spôsob, o ktorom viem.

www.noip.com/

Krok 3: Inštalácia potrebného softvéru na Pi

Ak ste si stiahli môj kód GitHub, nebudete musieť na spustenie stránky robiť nič okrem spustenia jednoduchého príkazu npm start. Keďže sa však jedná o podrobný návod, vysvetlím, ako nainštalovať všetok potrebný softvér a balíky.

Na počítači pi alebo linux (na používanie systému Windows budú existovať rôzne príkazy) spustite nasledujúce príkazy.

Rozdelil som ich na jednotlivé kroky, aby som ich ľahšie dodržal.

1. Nainštalujte node.js a npm

Node.js je v podstate skript java, ktorý vytvára server. NPM je správca balíkov uzlov a spracováva všetok stredný softvér potrebný pre node.js.

Na inštaláciu spustite na počítači so systémom Linux alebo Mac nasledujúce príkazy.

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

Na stiahnutie do systému Windows použite exe, ktorý nájdete tu.

Tento odkaz slúži na pomoc Linuxu, ak nie na malinovom pi.

2. Nainštalujte MongoDB

MongoDB je práve to, databáza. Používam to na časť svojej webovej stránky na prihlásenie a počítadlo návštevnosti.

Na inštaláciu spustite na počítači so systémom Linux alebo Mac nasledujúce príkazy.

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 aktualizácia

sudo apt-get install -y mongodb-org

Na stiahnutie do systému Windows použite exe, ktorý nájdete tu.

Tento odkaz slúži na pomoc Linuxu, ak nie na malinovom pi.

3. Nainštalujte Grunt

Grunt je ako npm, pretože ho môžete používať v spojení s inými doplnkami. Nepoužívam to pre svoju aplikáciu, ale je to veľmi užitočné pri automatizácii úloh. Tento krok je možné úplne preskočiť, aby vaša aplikácia fungovala.

V systéme Windows, Mac alebo Linux použite nasledujúci príkaz.

npm install -g grunt -cli

4. Nainštalujte Express

Express je jednoduchý spôsob použitia rámca uzlov js. Chystáme sa nainštalovať expresný generátor. To vytvára ľahko použiteľný rámec webovej aplikácie.

V systéme Windows, Mac alebo Linux použite nasledujúci príkaz.

npm nainštalovať expresný generátor -g

Krok 4: Vytvorte aplikáciu Express Node.js

Prejdite do umiestnenia priečinka, v ktorom chcete mať aplikáciu. V tomto priečinku sa budú nachádzať všetky budúce inštalácie.

Ak chcete zmeniť adresár, spustite na počítači so systémom Linux alebo Mac nasledujúce príkazy.

sudo cd/home/pi/myapp

Pre Windows:

cd C: / Users / pi / Desktop / myapp

Na vytvorenie potrebnej architektúry uzlov js použite expresný generátor.

expresné menoofapp

Tým sa vytvorí holý expresný projekt node.js, ktorého funkcie môžete v tomto kroku upravovať vyhľadávaním rôznych príkazov, ako je uvedené nižšie, pomocou príkazu -h. Alebo môžete vygenerovanú šablónu manuálne upraviť, ako mám ja. Podrobnejšie to prediskutujem v časti 2. Do tohto kódu môžete pridať ďalšie premenné, aby ste zmenili nastavenia vo svojej aplikácii, napríklad pomocou html, riadidiel, nefritu a ďalších. Na tento účel spustite príkaz:

expresne -h

Pokračujte v nastavovaní svojej webovej aplikácie node.js spustením nasledujúcich príkazov:

cd menoofmyapp

npm nainštalovať

Tým sa nainštalujú všetky potrebné balíky, ktoré bude potrebná na spustenie vašej webovej aplikácie node.js, a ďalšie, ktoré sú k dispozícii na použitie.

V tomto prípade bude cesta k súboru pre aplikáciu nasledovná:

/home/pi/myapp/nameofmyapp

Dôvodom je, že expresný generátor vytvorí súbor na základe reťazca, ktorý zaň umiestnite. Ak sa už nachádzate v požadovanom adresári, použite príkaz express.

Krok 5: Spustite webovú aplikáciu

Ak chcete spustiť webovú aplikáciu node.js, spustite príkaz:

npm začiatok

Aby bola kódovanie efektívnejšia a aby sa naše aplikácie automaticky aktualizovali po vykonaní zmien, nainštalujeme nodemon.

npm install -g nodemon

Tu by vám väčšina návodov povedala, aby ste sa zabavili pri stavaní, a nechajte vás, aby ste zistili náročnú prácu s nohami. V ďalších krokoch vás prevediem tým, ako som zostavil svoju aplikáciu.

Krok 6: Kredit

Nie je to krok, ale chcem uviesť svoje zdroje a inšpiráciu pre tento tutoriál.

Túto Github ReadMe napísal dobrý priateľ počas práce na našom seniorskom projekte dizajnu a poslúžila ako inšpirácia pri vytváraní mojej stránky.

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

Tento tutoriál bol užitočným nástrojom pri vytváraní webovej aplikácie.

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

Ďalšie informácie o webe node.js nájdete v mojej časti 2.