ตั้งค่า Nuxt.js Web Application บน Ubuntu 18.04 LTS

• Nuxt.js: Universal Framework
• กำลังติดตั้ง Node.js
• แอปพลิเคชันนั่งร้าน
• เริ่มต้นครั้งแรก
• อาคารสำหรับการผลิต
• PM2: จัดการแอปพลิเคชันของคุณอย่างง่ายดาย

Nuxt.js: Universal Framework

Nuxt.js เป็นเฟรมเวิร์ก JavaScript ที่ออกแบบมาเพื่อสร้างแอปพลิเคชัน universal Vue.js อย่างรวดเร็ว มีชื่อเสียงมากที่สุดสำหรับความสามารถในการสร้างแอป Vue.js ที่สามารถแสดงผลบนเซิร์ฟเวอร์เช่นเดียวกับลูกค้า ในบทช่วยสอนนี้เราจะตั้งค่าแอปพลิเคชัน Nuxt.js ที่เซิร์ฟเวอร์แสดงผลและปรับใช้บน Ubuntu 18.04 LTS

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

ก่อนอื่นคุณต้องแน่ใจว่าคุณใช้ Ubuntu 18.04 LTS จากนั้นคุณจะต้องติดตั้ง Node.js หากยังไม่ได้ติดตั้ง ในบทช่วยสอนนี้เราจะใช้ประโยชน์จาก Node Version Manager หรือ NVM เพื่อทำให้กระบวนการนี้ง่ายขึ้นมาก

ติดตั้ง NVM โดยใช้คำสั่งต่อไปนี้

curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh -o install_nvm.sh
bash install_nvm.sh
source ~/.profile
nvm install 11.1.0
nvm use 11.1.0

แอปพลิเคชันนั่งร้าน

เมื่อคุณติดตั้ง Node.js ตอนนี้เราสามารถดำเนินการตั้งค่าแพ็คเกจที่เราต้องใช้โดยใช้ NPM เราจะใช้เครื่องมือเล็ก ๆ ที่มีประโยชน์ที่เรียกว่าcreate-nuxt-appเป็นเครื่องมือที่สร้างโดยชุมชนซึ่งสามารถสร้างแอปพลิเคชัน Nuxt.js ได้อย่างง่ายดาย

ในโฮมไดเร็กทอรีของคุณให้รันคำสั่งต่อไปนี้เพื่อเริ่มต้นการสร้างแอป

npx create-nuxt-app <nameofproject>

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

เริ่มต้นครั้งแรก

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

cd app

ตอนนี้เราสามารถเริ่มเซิร์ฟเวอร์การพัฒนา Nuxt.js

npm run dev

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

อาคารสำหรับการผลิต

โหมดการพัฒนาค่อนข้างมีประโยชน์เมื่อคุณกำลังพัฒนาแอปพลิเคชันของคุณอยู่ อย่างไรก็ตามเมื่อคุณพร้อมที่จะทำให้แอปพลิเคชันของคุณเป็นที่รู้จัก addons เช่น hot-reloading และเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์มีความสำคัญน้อยลง นี่คือเหตุผลที่เราต้องการสร้างแอปพลิเคชันของเราหนึ่งครั้งสำหรับสภาพแวดล้อมการผลิต โชคดีที่ Nuxt.js มีเครื่องมือที่เราสามารถใช้เพื่อสร้างโมดูลของแอพเพื่อการผลิตได้อย่างรวดเร็ว รันสิ่งต่อไปนี้เพื่อเริ่มกระบวนการสร้างการผลิต

npm run build

โดยพื้นฐานแล้วสิ่งที่เรากำลังทำอยู่ที่นี่คือเรากำลังรวบรวมโมดูล webpack ของเราทั้งหมดพร้อมการปรับแต่งเพื่อการผลิต

เมื่อการสร้างเสร็จสมบูรณ์คุณจะสามารถเรียกใช้ไซต์เพื่อการผลิตได้

npm start

ตอนนี้ถ้าคุณนำทางhttp://yourip:3000คุณจะเห็นหน้าจอสาด Nuxt.js ซึ่งยืนยันว่าคุณกำลังทำงานในโหมดการผลิต

PM2: จัดการแอปพลิเคชันของคุณอย่างง่ายดาย

ตอนนี้เราเข้าใจพื้นฐานของการใช้งานแอปพลิเคชันของเราเพื่อการผลิต ในแง่ของสภาพแวดล้อมการผลิตเราต้องการวิธีที่ดีในการทำให้แอปพลิเคชันของเราทำงานได้ตลอดไปรีสตาร์ทแอปพลิเคชันของเราโดยอัตโนมัติเมื่อจำเป็นและตรวจสอบทรัพยากรของแอปพลิเคชันของเรา นั่นคือสิ่งที่ Process Manager 2 (PM2) เข้ามา PM2 เป็นผู้จัดการกระบวนการ Node.js สำหรับแอปพลิเคชันการผลิตซึ่งรวมถึงเครื่องมือการผลิตที่สำคัญมากมายเช่นการปรับสมดุลโหลดบันทึกขั้นสูง ก่อนอื่นให้ติดตั้ง PM2

npm install pm2 -g

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

pm2 start <appfolder>/server/index.js

โปรดทราบว่าเรากำลังเริ่มต้นไฟล์เซิร์ฟเวอร์ที่อยู่ภายในรูทแอปพลิเคชันของเรา

หากคุณต้องการดูทรัพยากรที่แอปพลิเคชันของคุณกำลังใช้งานอยู่คุณสามารถทำได้ด้วยpm2 monitคำสั่ง สิ่งนี้จะแสดงอินเทอร์เฟซที่คล้ายกับของ ncurses ซึ่งคุณสามารถรวบรวมข้อมูลเกี่ยวกับการใช้ RAM, CPU และดิสก์ของแอปพลิเคชันได้อย่างแม่นยำ

ถึงตอนนี้แอปพลิเคชันของคุณจะทำงานอย่างที่เคยเป็นเมื่อก่อนหน้านี้เราใช้งานกับ npm ยกเว้นตอนนี้เรามีการควบคุมที่มากขึ้นเมื่อใช้กับการเพิ่มประสิทธิภาพการผลิต

ตอนนี้คุณมีแอปพลิเคชั่น Nuxt.js ที่ปรับใช้สำหรับการผลิตด้วย Node.js และ Ubuntu 18.04 หากคุณต้องการที่จะเรียนรู้เพิ่มเติมเกี่ยวกับ Nuxt และทั้งหมดของมันเป็นคุณสมบัติในเชิงลึกให้ความรู้สึกอิสระที่จะเยี่ยมชมของพวกเขาเอกสารอย่างเป็นทางการ