Een website bouwen op een Raspberry Pi, met Node.js, Express en MongoDB Deel 1: 6 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:17

Welkom bij DEEL 1 van mijn node.js webapp-tutorial. Deel 1 gaat door de benodigde software die wordt gebruikt voor de ontwikkeling van node.js-apps, hoe je port forwarding gebruikt, hoe je een app bouwt met Express en hoe je je app uitvoert. Het tweede deel van deze tutorial gaat over alle code en structuur van mijn volledige webapplicatie. Als je daar klaar voor bent, bezoek het dan hier.

Dus tijdens het bouwen van mijn persoonlijke startpagina vond ik het erg moeilijk om uit het onkruid te komen. Er is meer op internet dan zelfs ik ooit zal begrijpen over het bouwen van een webpagina.

Dit is een uitleg over het gebruik van Node.js, Express en Mongodb. om een webpagina te maken.

De code voor dit alles staat hier.

Mijn webpagina heet Internet. Bezoek alstublieft als u een meer interactieve kijk op een persoonlijke website wilt.

Ik ben deze pagina begonnen om persoonlijk aanwezig te zijn op internet met projecten die ik heb gedaan, met links naar mijn instructables-projecten voor meer details.

Deze site wordt bij mij thuis gehost op een pi zero W.

Stap 1: Dingen die je nodig hebt

1 keer. Ik kan niet benadrukken dat het ontwikkelen van een site en het echt begrijpen van de innerlijke werking een langdurig proces is. Ik heb een graad in elektrotechniek met een focus in micro-elektronica en een liefde voor coderen, en dit kostte me nog steeds maanden om te bereiken.

Deze tutorial zal een goede bouwsteen zijn, maar lees a.u.b. meer documentatie online om elk onderdeel te begrijpen.

2. Raspberry pi - elk model is geschikt. Ook elke computer met linux zal het doen. Eigenlijk zal elke computer het doen, ik ga alleen dieper in op hoe het op een pi moet worden uitgevoerd.

3. Internetverbinding - als u van plan bent dit aan de wereld te hosten. Een router of een netwerkswitch is nodig om port forwarding te configureren.

4. Software - Elk coderingsplatform werkt, Sublime, Webstorm, Notepadd++, Visual Studios of iets anders. Ik gebruikte voornamelijk Webstorm of Sublime.

Stap 2: Port Forwarding op uw Raspberry Pi

Dus ik ga ervan uit dat je je Raspberry Pi al hebt ingesteld. Zo niet, bekijk dan deze eenvoudige tutorial hier.

Mijn pi draait Jessie lite en is helemaal terminaal. Het voordeel hiervan is dat ik niet veel processen op de achtergrond heb die mijn server langzamer kunnen laten werken met veel verkeer. Laat me nu zeggen dat deze tutorial bedoeld is voor sites met weinig verkeer. Elke site met veel verkeer zal traag zijn op een pi en kan uw server laten crashen.

Port forwarding

Met je pi-configuratie moet je port forwarding op je router of switch inschakelen. Zoek hiervoor de port forwarding-instellingen in uw router. Elke router is anders, ik laat hier mijn Linksys Velop GUI zien.

Mijn site is geconfigureerd naar poort 3000, dit kan worden gewijzigd in de broncode in het app.js- of www-bestand.

Ik heb ook poort 22 ingesteld voor doorsturen, dus ik kan SSH naar mijn pi, dit kan worden ingesteld in de pi-instellingen. SSH is een manier om de terminal op uw pi te gebruiken terwijl u zich niet op hetzelfde netwerk bevindt, en ook terwijl u de weergave-uitvoer van de pi niet gebruikt. Hierdoor kan ik mijn website bijwerken vanaf een andere computer en de wijzigingen naar mijn pi pushen.

Volg de afbeeldingen om port forwarding in te stellen.

DNS-service

U hebt een service nodig die uw ip-adres koppelt aan de naam van een webadres. U kunt het globale ip-adres van uw router invoeren, gevolgd door het poortnummer om toegang te krijgen tot uw site. Dit is echter moeilijk, vooral als uw wereldwijde IP-adres verandert. Wat een DNS-service doet, is deze wijzigingen bijhouden en bijwerken, zodat uw webnaam en ip zijn gekoppeld. Ik kies ervoor om gebruik te maken van een gratis dienst via no-ip. U bent van harte welkom om te betalen voor alles wat u wilt. Dit is gewoon een gratis manier die ik ken.

www.noip.com/

Stap 3: Benodigde software installeren op Pi

Als je mijn GitHub-code hebt gedownload, hoef je niets anders te doen dan een eenvoudige npm-startopdracht uit te voeren om de site te laten werken. Omdat dit echter een diepgaande tutorial is, zal ik uitleggen hoe je alle benodigde software en pakketten installeert.

Terwijl u op uw pi- of linux-computer bent (er zullen verschillende opdrachten zijn voor het gebruik van Windows), voert u de volgende opdrachten uit.

Ik heb deze opgesplitst als afzonderlijke stappen om het gemakkelijker te maken om te volgen.

1. Installeer node.js en npm

Node.js is in feite het java-script dat de server maakt. NPM is node-pakketbeheerder en verwerkt alle benodigde middleware met node.js.

Voer de volgende opdrachten uit op een linux- of mac-machine om te installeren.

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

Gebruik de exe die u hier vindt om te downloaden op Windows.

Deze link is voor linux-hulp, zo niet op een raspberry pi.

2. Installeer MongoDB

MongoDB is precies dat, een database. Ik gebruik dit voor een login- en verkeerstellergedeelte van mijn webpagina.

Voer de volgende opdrachten uit op een linux- of mac-machine om te installeren.

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

Gebruik de exe die u hier vindt om te downloaden op Windows.

Deze link is voor linux-hulp, zo niet op een raspberry pi.

3. Installeer Grunt

Grunt is als npm, omdat je het in combinatie met andere plug-ins kunt gebruiken. Ik gebruik het niet voor mijn app, maar het is erg handig bij het automatiseren van taken. Deze stap kan volledig worden overgeslagen om uw app te laten werken.

Gebruik voor Windows, Mac of Linux de volgende opdracht.

npm install -g grunt-cli

4. Installeer Express

Express is een gemakkelijke manier om node js-framework te gebruiken. We gaan een expresgenerator installeren. Dit creëert het gebruiksvriendelijke raamwerk van een webapplicatie.

Gebruik voor Windows, Mac of Linux de volgende opdracht.

npm install express-generator -g

Stap 4: Maak een Express Node.js-app

Navigeer naar de maplocatie waarin u uw app wilt hebben. Eenmaal hier bevinden alle toekomstige installaties zich in deze map.

Voer de volgende opdrachten uit op een linux- of mac-machine om van directory te veranderen.

sudo cd /home/pi/mijnapp

Voor ramen:

cd C:\Gebruikers\pi\Desktop\mijnapp

Gebruik de express-generator om het benodigde js-framework voor nodes te maken.

naam van mijn app uitdrukken

Hiermee wordt een bare express node.js-project gemaakt, u kunt de functies ervan tijdens deze stap bewerken door verschillende opdrachten te vinden, zoals hieronder te zien is met de opdracht -h. Of u kunt de gegenereerde sjabloon handmatig bewerken, zoals ik heb gedaan. Ik zal dit in meer detail bespreken in deel 2. Je kunt andere variabelen aan deze code toevoegen om instellingen in je applicatie te wijzigen, zoals het gebruik van html, stuur, jade en andere. Voer hiervoor het commando uit:

express -h

Ga door met het instellen van uw node.js-webtoepassing door de volgende opdrachten uit te voeren:

cd naamvanmijnapp

npm installeren

Hiermee worden alle benodigde pakketten geïnstalleerd die uw node.js-webtoepassing moet uitvoeren en meer die beschikbaar zijn voor gebruik.

In dit voorbeeld zou het bestandspad voor de toepassing zijn:

/home/pi/mijnapp/naamvanmijnapp

Dit komt omdat de express-generator een bestand maakt op basis van de tekenreeks die u erna plaatst. Als u zich al in de gewenste directory bevindt, gebruikt u gewoon express.

Stap 5: voer uw webtoepassing uit

Voer de opdracht uit om uw node.js-webtoepassing uit te voeren:

npm start

Om het tijdens het coderen efficiënter te maken, zodat onze applicatie automatisch wordt bijgewerkt nadat we wijzigingen hebben aangebracht, zullen we nodemon installeren.

npm install -g nodemon

Hier is waar de meeste tutorials je zouden vertellen dat je plezier moet hebben met bouwen en je het harde beenwerk moet laten uitzoeken. In de volgende stappen ga ik je uitleggen hoe ik mijn applicatie heb gebouwd.

Stap 6: Krediet

Niet echt een stap, maar ik wil mijn bronnen en inspiratie voor deze tutorial opsommen.

Deze Github ReadMe is geschreven door een goede vriend tijdens het werken aan ons senior ontwerpproject en het heeft veel inspiratie opgeleverd voor het maken van mijn site.

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

Deze tutorial was een handig hulpmiddel bij het maken van een webapplicatie.

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

Ga voor meer informatie over een node.js-site naar mijn deel 2.