วิธีสร้างเว็บไซต์บน Raspberry Pi ด้วย Node.js, Express และ MongoDBส่วนที่ 1: 6 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:06

ยินดีต้อนรับสู่ส่วนที่ 1 ของบทแนะนำเว็บแอป node.js ของฉัน ส่วนที่ 1 จะกล่าวถึงซอฟต์แวร์ที่จำเป็นสำหรับการพัฒนาแอป node.js วิธีใช้การส่งต่อพอร์ต วิธีสร้างแอปโดยใช้ Express และวิธีเรียกใช้แอป ส่วนที่สองของบทช่วยสอนนี้จะกล่าวถึงโค้ดและโครงสร้างทั้งหมดของเว็บแอปพลิเคชันทั้งหมดของฉัน หากคุณพร้อมสำหรับการเยี่ยมชมที่นี่

ดังนั้น ขณะสร้างหน้าเปิดตัวส่วนตัวของฉัน ฉันพบว่ามันยากมากที่จะกำจัดวัชพืช บนอินเทอร์เน็ตมีมากกว่าที่ฉันเคยเข้าใจเกี่ยวกับการสร้างหน้าเว็บ

นี่คือคำแนะนำในการใช้ Node.js, Express และ Mongodb เพื่อสร้างหน้าเว็บ

รหัสสำหรับทั้งหมดนี้อยู่ที่นี่

หน้าเว็บของฉันเรียกว่าอินเทอร์เน็ต โปรดเยี่ยมชมหากคุณต้องการดูเว็บไซต์ส่วนตัวแบบโต้ตอบมากขึ้น

ฉันเริ่มหน้านี้เพื่อให้มีตัวตนส่วนตัวบนอินเทอร์เน็ตด้วยโปรเจ็กต์ที่ฉันทำ พร้อมลิงก์ไปยังโปรเจ็กต์ที่สอนได้ของฉันสำหรับรายละเอียดเพิ่มเติม

ไซต์นี้โฮสต์ในบ้านของฉันบน pi zero W

ขั้นตอนที่ 1: สิ่งที่คุณต้องการ

1 ครั้ง. ฉันไม่สามารถเน้นได้ว่าการพัฒนาไซต์และเข้าใจการทำงานภายในอย่างแท้จริงนั้นเป็นกระบวนการที่ใช้เวลานาน ฉันมีปริญญาด้านวิศวกรรมไฟฟ้าโดยมุ่งเน้นที่ไมโครอิเล็กทรอนิกส์ และรักในการเขียนโปรแกรม และยังต้องใช้เวลาหลายเดือนกว่าจะสำเร็จ

บทช่วยสอนนี้จะเป็นพื้นฐานที่ดี แต่โปรดอ่านเอกสารออนไลน์เพิ่มเติมเพื่อทำความเข้าใจแต่ละส่วน

2. Raspberry pi - รุ่นใดก็ได้ คอมพิวเตอร์ทุกเครื่องที่ใช้ linux ก็สามารถทำได้เช่นกัน ที่จริงแล้ว คอมพิวเตอร์ทุกเครื่องก็ทำได้ ฉันแค่เข้าไปดูรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการรันบน pi

3. การเชื่อมต่ออินเทอร์เน็ต - หากคุณวางแผนที่จะโฮสต์สิ่งนี้ให้กับโลก จำเป็นต้องใช้เราเตอร์หรือสวิตช์เครือข่ายเพื่อกำหนดค่าการส่งต่อพอร์ต

4. ซอฟต์แวร์ - แพลตฟอร์มการเข้ารหัสใด ๆ จะใช้งานได้ Sublime, Webstorm, Notepadd++, Visual Studios หรืออย่างอื่น ฉันใช้ Webstorm หรือ Sublime เป็นหลัก

ขั้นตอนที่ 2: การส่งต่อพอร์ตบน Raspberry Pi ของคุณ

ดังนั้น ฉันจะถือว่าคุณมีราสเบอร์รี่ pi ของคุณอยู่แล้ว ถ้าไม่ลองดูบทช่วยสอนง่าย ๆ นี้ที่นี่

pi ของฉันใช้งาน Jessie lite และเป็นเทอร์มินัลทั้งหมด ประโยชน์ของสิ่งนี้คือ ฉันไม่มีกระบวนการทำงานมากมายในพื้นหลัง ซึ่งอาจทำให้เซิร์ฟเวอร์ของฉันทำงานช้าลงเมื่อมีปริมาณการใช้งานสูง ให้ฉันระบุตอนนี้ว่าบทช่วยสอนนี้มีไว้สำหรับไซต์ที่มีการเข้าชมต่ำ ไซต์ใด ๆ ที่มีทราฟฟิกสูงจะช้าบน pi และอาจทำให้เซิร์ฟเวอร์ของคุณขัดข้อง

การส่งต่อพอร์ต

ด้วยการตั้งค่า pi คุณจะต้องเปิดใช้งานการส่งต่อพอร์ตบนเราเตอร์หรือสวิตช์ของคุณ ในการดำเนินการนี้ ให้ค้นหาการตั้งค่าการส่งต่อพอร์ตในเราเตอร์ของคุณ เราเตอร์ทุกตัวแตกต่างกัน ฉันกำลังแสดง Linksys Velop GUI ที่นี่

ไซต์ของฉันกำหนดค่าเป็นพอร์ต 3000 ซึ่งสามารถเปลี่ยนแปลงได้ในซอร์สโค้ดในไฟล์ app.js หรือ www

ฉันยังมีพอร์ต 22 ที่ตั้งค่าไว้สำหรับการส่งต่อเพื่อให้ฉันสามารถ SSH ลงใน pi ของฉันได้ ซึ่งสามารถตั้งค่าได้ในการตั้งค่า pi SSH เป็นวิธีการใช้เทอร์มินัลบน pi ของคุณในขณะที่ไม่ได้อยู่บนเครือข่ายเดียวกัน และในขณะที่ไม่ได้ใช้เอาต์พุตการแสดงผลจาก pi ซึ่งช่วยให้ฉันสามารถอัปเดตเว็บไซต์จากคอมพิวเตอร์เครื่องอื่นและผลักดันการเปลี่ยนแปลงไปยัง pi ของฉัน

ทำตามรูปภาพเพื่อตั้งค่าการส่งต่อพอร์ต

บริการ 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 นั้นเป็นจาวาสคริปต์ที่สร้างเซิร์ฟเวอร์ 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 เป็นวิธีที่ง่ายในการใช้เฟรมเวิร์กโหนด js เราจะติดตั้งเครื่องกำเนิดด่วน สิ่งนี้สร้างเฟรมเวิร์กที่ใช้งานง่ายของเว็บแอปพลิเคชัน

สำหรับ windows, mac หรือ linux ให้ใช้คำสั่งต่อไปนี้

npm ติดตั้ง express-generator -g

ขั้นตอนที่ 4: สร้างแอป Express Node.js

นำทางไปยังตำแหน่งโฟลเดอร์ที่คุณวางแผนจะมีแอปของคุณ เมื่ออยู่ที่นี่ การติดตั้งทั้งหมดในอนาคตจะอยู่ในโฟลเดอร์นี้

เรียกใช้คำสั่งต่อไปนี้บนเครื่อง linux หรือ mac เพื่อเปลี่ยนไดเร็กทอรี

sudo cd /home/pi/myapp

สำหรับ Windows:

cd C:\Users\pi\Desktop\myapp

ใช้ตัวสร้างด่วนเพื่อสร้างเฟรมเวิร์กโหนด js ที่จำเป็น

แสดงชื่อของ myapp

สิ่งนี้จะสร้างโปรเจ็กต์ bare express node.js คุณสามารถแก้ไขคุณสมบัติของมันในระหว่างขั้นตอนนี้โดยค้นหาคำสั่งต่างๆ ดังที่แสดงด้านล่างโดยใช้คำสั่ง -h หรือคุณสามารถแก้ไขเทมเพลตที่สร้างขึ้นเองได้เหมือนที่ฉันมี ฉันจะพูดถึงรายละเอียดเพิ่มเติมในส่วนที่ 2 คุณสามารถเพิ่มตัวแปรอื่น ๆ ในรหัสนี้เพื่อเปลี่ยนการตั้งค่าในแอปพลิเคชันของคุณเช่นการใช้ html, handlebars, jade และอื่น ๆ สำหรับสิ่งนี้ให้รันคำสั่ง:

ด่วน -h

ตั้งค่าเว็บแอปพลิเคชัน node.js ของคุณต่อไปโดยรันคำสั่งต่อไปนี้:

cd nameofmyapp

npm ติดตั้ง

สิ่งนี้จะติดตั้งแพ็คเกจที่จำเป็นทั้งหมดที่เว็บแอปพลิเคชัน node.js ของคุณจะต้องเรียกใช้และอื่น ๆ ที่พร้อมใช้งาน

ในตัวอย่างนี้ เส้นทางของไฟล์สำหรับแอปพลิเคชันจะเป็น:

/home/pi/myapp/nameofmyapp

เนื่องจากตัวสร้างด่วนสร้างไฟล์ตามสตริงที่คุณวางหลังจากนั้น หากคุณอยู่ในไดเร็กทอรีที่ต้องการอยู่แล้ว ให้ใช้ express

ขั้นตอนที่ 5: เรียกใช้เว็บแอปพลิเคชันของคุณ

ในการรันเว็บแอปพลิเคชัน node.js ของคุณ ให้รันคำสั่ง:

npm เริ่ม

เพื่อให้มีประสิทธิภาพมากขึ้นในขณะที่เขียนโค้ด ดังนั้นแอปพลิเคชันของเราจะอัปเดตโดยอัตโนมัติหลังจากที่เราทำการเปลี่ยนแปลง เราจะติดตั้ง nodemon

npm ติดตั้ง -g nodemon

นี่คือที่ที่บทช่วยสอนส่วนใหญ่จะบอกให้คุณสนุกกับการสร้างและปล่อยให้คุณคิดออกว่าต้องทำงานหนักแค่ไหน ในขั้นตอนต่อไป ฉันจะแนะนำคุณเกี่ยวกับวิธีที่ฉันสร้างแอปพลิเคชันของฉัน

ขั้นตอนที่ 6: เครดิต

ไม่ใช่ขั้นตอนจริงๆ แต่ฉันต้องการระบุแหล่งที่มาและแรงบันดาลใจสำหรับบทช่วยสอนนี้

Github ReadMe นี้เขียนขึ้นโดยเพื่อนที่ดีในขณะที่ทำงานในโครงการออกแบบระดับอาวุโสของเรา และได้ให้แรงบันดาลใจมากมายในการสร้างเว็บไซต์ของฉัน

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

บทช่วยสอนนี้เป็นเครื่องมือที่มีประโยชน์ในกระบวนการสร้างเว็บแอปพลิเคชัน

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

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับไซต์ node.js โปรดไปที่ส่วนที่ 2 ของฉัน