สร้างแอปพลิเคชันเว็บ Hapi.js โดยใช้ Node.js บน Ubuntu 16.04

• กำลังติดตั้ง Node.js
• การตั้งค่าไดเรกทอรีแอปพลิเคชัน
• กำลังติดตั้ง Hapi.js
• การตั้งค่าแอปพลิเคชันตัวอย่างของเรา
• ติดตั้ง Nginx
• กำหนดค่า Nginx
• ติดตั้ง PM2
• เริ่มแอพของเราด้วย PM2
• ข้อสรุป

Hapi.js เป็นเฟรมเวิร์ก Node.js ที่สมบูรณ์แข็งแรงและทรงพลังออกแบบมาสำหรับการสร้างเว็บแอปพลิเคชันในระบบนิเวศ Node.js การออกแบบที่เรียบง่ายทำให้ง่ายต่อการเริ่มต้นใช้งาน Hapi ใช้คุณสมบัติ JavaScript ES6 ล่าสุดมากมายที่เป็นแกนหลักเช่นสัญญา ES6 สำหรับผู้ที่เคยใช้ Express มาก่อน Hapi ให้คุณลองสิ่งใหม่ ๆ และสัมผัสกับคุณสมบัติล่าสุดของ JavaScript

ในบทช่วยสอนนี้เป้าหมายของเราคือการตั้งค่าหน้าเว็บพื้นฐาน Hapi.js ซึ่งโฮสต์จาก Vultr VPS ของเราบน Ubuntu 16.04 LTS สำหรับผู้ที่มีโดเมนสำหรับเว็บไซต์ของพวกเขาเราจะใช้ reverse proxy เพื่อเชื่อมโยงโดเมนของเรากับเว็บไซต์ของเรา ในที่สุดเราจะได้เรียนรู้วิธีจัดการกับผู้จัดการกระบวนการ ตอนนี้เราได้สิ่งนั้นมาเริ่มกันเลย

กำลังติดตั้ง Node.js

เราจะต้องติดตั้ง Node.js ในการทำเช่นนั้นบน Ubuntu 16.04 LTS ให้ทำตามคำแนะนำเหล่านี้

การเพิ่มพื้นที่เก็บข้อมูล

เราจะต้องเพิ่มที่เก็บ NodeSource APT ซึ่งมี LTS รุ่นล่าสุดของ Node.js

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

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

การติดตั้งเครื่องมือสร้าง

นอกจากการติดตั้ง Node.js แล้วเรายังต้องติดตั้งเครื่องมือสร้างที่จำเป็นซึ่งจะช่วยในการสร้างโมดูลใด ๆ ที่เราอาจจำเป็นต้องติดตั้ง

sudo apt-get install -y build-essential

เพียงดาวน์โหลดและติดตั้งเครื่องมือสร้างจากที่เก็บ

การตั้งค่าไดเรกทอรีแอปพลิเคชัน

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

mkdir site

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

npm init

มันจะขอให้คุณป้อนสิ่งต่าง ๆ เช่นชื่อแอปพลิเคชันของคุณเริ่มไฟล์สิทธิ์ใช้งานและอื่น ๆ ฟิลด์ส่วนใหญ่คุณสามารถปล่อยให้เป็นค่าเริ่มต้นได้ยกเว้นฟิลด์ที่ชัดเจนเช่นชื่อแอปพลิเคชัน ในท้ายที่สุดมันจะเป็นดังนี้:

{
  "name": "site",
  "version": "1.0.0",
  "description": "Hapi.js site",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "rich",
  "license": "MIT"
}

เมื่อคุณพอใจกับผลลัพธ์แล้วให้คลิกENTERเพื่อบันทึกไฟล์

กำลังติดตั้ง Hapi.js

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

npm install hapi.js

ดาวน์โหลดนี้ Hapi.js จาก NPM และติดตั้งในไดเรกทอรีโครงการของเรา ในการดำเนินการเดียวกันการอ้างอิงใด ๆ ที่ Hapi.js อาจใช้จะถูกดาวน์โหลดด้วยเพื่อความสะดวกของเรา

การตั้งค่าแอปพลิเคชันตัวอย่างของเรา

ตอนนี้ได้เวลาตั้งค่าไฟล์แอปพลิเคชัน Hapi.js ของเราแล้ว นี่จะมีรหัสทั้งหมดของเราสำหรับการสมัคร ไกลออกไปตามถนนเราสามารถขยายโค้ดแอปพลิเคชันของเราและเพิ่มสิ่งต่าง ๆ ให้มากขึ้นตามที่เราเห็นสมควร

ต่อไปเราจะสร้างไฟล์เริ่มต้นของเรา อ้างอิงกลับไปที่mainส่วนของpackage.jsonไฟล์ของคุณเพื่อกำหนดวิธีการตั้งชื่อไฟล์ index.jsตั้งแต่ผมใช้เริ่มต้นการตั้งชื่อโครงการไฟล์ของเราจะถูกเรียกว่า

nano index.js

เมื่อคุณอยู่ในโปรแกรมแก้ไขข้อความนาโนให้สร้างรหัสแอปพลิเคชันพื้นฐานเช่นนั้น

const Hapi=require('hapi');
const server=Hapi.server({
    host:'localhost',
    port: 3000
});

server.route({
    method:'GET',
    path:'/',
    handler:((request,h)) => {
        return 'Sample Hapi.js Application';
    }
});
async function start() {

    try {
        await server.start();
    } catch (err) {
        console.log(err);
        process.exit(1);
    }
    console.log(`Our server is running! ${server.info.uri}`);
};

start();

ก่อนอื่นเรานำเข้าโมดูล Hapi จากนั้นเราเริ่มต้นตัวสร้างเซิร์ฟเวอร์ของเราซึ่งมีโฮสต์ที่เราต้องการเรียกใช้เซิร์ฟเวอร์รวมถึงพอร์ตซึ่งใช้3000สำหรับการกวดวิชานี้ ต่อไปเราตั้งค่าเราเตอร์ขั้นพื้นฐานซึ่งระบุว่าเมื่อใดก็ตามที่มีคนเยี่ยมชมเว็บไซต์พวกเขาจะได้รับการต้อนรับด้วยข้อความง่ายๆ ยิ่งไปกว่านั้นเรายังมีฟังก์ชั่น async เพื่อเริ่มต้นเซิร์ฟเวอร์ของเราซึ่งจะเข้าสู่คอนโซลที่เซิร์ฟเวอร์ของเรากำลังทำงานอยู่ เมื่อเสร็จแล้วให้บันทึกและปิดไฟล์ ( CTRL+ X)

เมื่อไฟล์หลักของเราได้รับการตั้งค่าเราก็พร้อมที่จะเริ่มต้นแอปพลิเคชันของเราแล้ว

node index.js

หากคุณเห็น " Our server is running!" ในคอนโซลแสดงว่าเซิร์ฟเวอร์เริ่มทำงานได้สำเร็จ

ติดตั้ง Nginx

เนื่องจาก Nginx พร้อมใช้งานในที่เก็บเริ่มต้นของ Ubuntu การติดตั้งจึงไม่ซับซ้อน เพียงอัปเดตรายการแพคเกจของคุณและติดตั้ง

sudo apt update
sudo apt install nginx -y 

หลังจากรีเฟรชรายการแพ็คเกจแล้ว Nginx และการขึ้นต่อกันของมันจะถูกติดตั้ง

กำหนดค่า Nginx

เพื่อให้ Nginx ย้อนกลับพร็อกซีแอปพลิเคชันของเราเราจะต้องสร้างไฟล์กำหนดค่า ไฟล์กำหนดค่านี้จะเก็บข้อมูลเกี่ยวกับแอปพลิเคชันของเราซึ่ง Nginx จะใช้สำหรับ reverse proxy

ลบการกำหนดค่าเริ่มต้นที่ Nginx สร้างขึ้นเนื่องจากเราจะแทนที่ด้วยตัวเราเองในภายหลัง

sudo rm /etc/nginx/sites-enabled/default

สร้างไฟล์ใหม่ในsites-availableโฟลเดอร์ สำหรับการตั้งชื่อเราสามารถทำได้ง่ายsiteๆ เพื่อความเรียบง่าย

sudo nano /etc/nginx/sites-available/site

ในไฟล์วางต่อไปนี้และบันทึก

server {
    listen 80;
    location / {
          proxy_set_header X-Real-IP 
          $remote_addr;
          proxy_set_header 
          X-Forwarded-For 
          $proxy_add_x_forwarded_for;
          proxy_set_header Host 
          $http_host;
          proxy_set_header 
        X-NginX-Proxy true; proxy_pass 
       http://127.0.0.1:3000/;
    proxy_redirect off;
    proxy_http_version 1.1;
    proxy_set_header Upgrade 
     $http_upgrade;
    proxy_set_header Connection 
    "upgrade";
    proxy_redirect off;
    proxy_set_header 
   X-Forwarded-Proto $scheme;
    }
}

ในแฟ้มนี้เรากำลังบอก Nginx 80เพื่อฟังบนพอร์ต นอกจากนี้เรายังตั้งค่าพร็อกซีส่งผ่านไปยังที่localhostอยู่และพอร์ต3000ซึ่งเป็นพอร์ตเดียวกับแอปพลิเคชัน Hapi ของเรา

ตอนนี้คุณสามารถนำทางกลับไปยังไดเรกทอรีแอปพลิเคชันของคุณและเริ่มไซต์ เมื่อไซต์เริ่มต้นขึ้นให้ไปที่http://yourdomain.comหรือhttp://youripคุณจะเห็นข้อความ " Hello World"

ติดตั้ง PM2

PM2 สามารถพบได้ในที่เก็บ NPM และคุณสามารถติดตั้งทั่วโลกเพื่อให้สามารถเข้าถึงได้จากทุกที่เช่นนั้น

sudo npm install pm2 -g

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

เริ่มแอพของเราด้วย PM2

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

pm2 start index.js --name site

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

pm2 logs site

คุณสามารถระบุจำนวนบรรทัดของบันทึกที่คุณต้องการดูด้วย--linesอาร์กิวเมนต์

ข้อสรุป

คุณได้ตั้งค่าเว็บเซิร์ฟเวอร์ Hapi.js สำเร็จแล้วย้อนกลับ proxied ด้วย Nginx และเรียนรู้วิธีจัดการกับ PM2 ได้ดีขึ้น ด้วยความรู้นี้คุณสามารถขยายบทช่วยสอนนี้และสร้างแอปพลิเคชัน Hapi.js ขั้นสูงมากขึ้น ต้องการเรียนรู้เพิ่มเติมเกี่ยวกับความเป็นไปได้ของ Hapi การเยี่ยมชมของพวกเขาเอกสารอย่างเป็นทางการ หากคุณต้องการที่จะเรียนรู้เพิ่มเติมเกี่ยวกับความเป็นไปได้ของ PM2 ให้ดูพวกเขาคู่มือเริ่มต้นอย่างรวดเร็ว