node.ucp

node.ucp

นี่คือแผงควบคุม isomorphic JavaScript แบบเต็มรูปแบบที่เขียนไว้ด้านบนของ NodeJs และ React วัตถุประสงค์ของแผงควบคุมนี้คือการใช้เป็นตัวอย่างหรือรหัสหม้อไอน้ำสำหรับผู้อื่นเนื่องจากมีความสมบูรณ์และยืดหยุ่นมาก ฉันเขียนโค้ดให้ปรับเปลี่ยนได้ง่ายสำหรับกรณีการใช้งานและประเภทฐานข้อมูลที่แตกต่างกัน

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

รหัสใช้ฟังก์ชั่นลูกศรของ ES6 และสัญญาอย่างมากมายดังนั้นทำความคุ้นเคยกับแนวคิดเหล่านี้หากคุณยังไม่ได้อยู่!

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

การสาธิต

ข้อมูลเข้าสู่ระบบ:

ชื่อผู้ใช้: Jonas

รหัสผ่าน: ทดสอบ

คลิกที่นี่เพื่อสาธิต

คลิกที่นี่เพื่อดูภาพในกรณีการสาธิตไม่ทำงาน

ข้อกำหนดเบื้องต้น

• nodejs v6.11.3 หรือใหม่กว่า
• MySQL เวอร์ชัน 5.6.5 หรือใหม่กว่าหากคุณต้องการใช้ฐานข้อมูลตัวอย่าง
• หากคุณใช้ Linux คุณต้องติดตั้ง Node-Gyp ติดตั้งโดยใช้คำสั่งต่อไปนี้:

sudo npm install -g node-gyp

• หากคุณใช้ Windows คุณต้องติดตั้งเครื่องมือสร้าง Windows ด้วยสำหรับการรวบรวมและสร้าง depedencies บางส่วน ติดตั้งโดยใช้คำสั่งต่อไปนี้:

npm install --global --production windows-build-tools

การติดตั้ง

1. นำทางไปยังโฟลเดอร์ว่างเปล่าที่คุณต้องการให้ซอร์สโค้ดถูกวางไว้
2. โคลนที่เก็บโดยใช้คำสั่งต่อไปนี้:

git clone https://github.com/zeus2198/node.ucp 

หรือ

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

npm install

การติดตั้งแพ็คเกจอาจใช้เวลาพอสมควร 5. นำเข้าฐานข้อมูลตัวอย่าง ( ./sample-database.sql ) ลงในเซิร์ฟเวอร์ MySQL ของคุณ 4. เปิด ./config/config.json ไฟล์และแก้ไขไฟล์การกำหนดค่าตามการตั้งค่าระบบของคุณ

เริ่มต้นแอปพลิเคชัน

โหมดนักพัฒนา:

ในการเริ่มต้นแอปพลิเคชันในโหมดนักพัฒนาให้ใช้คำสั่งต่อไปนี้:

npm run start-dev

ในโหมดนักพัฒนาสิ่งต่อไปนี้เกิดขึ้น:

• แอปพลิเคชันรีสตาร์ทโดยอัตโนมัติเมื่อใดก็ตามที่มีการเปลี่ยนแปลงในไฟล์ใด ๆ ภายในโฟลเดอร์ ./src
• ส่วนที่แชร์ไคลเอนต์-เซิร์ฟเวอร์ของแอปพลิเคชันจะถูกรวมเข้าด้วยกันโดยอัตโนมัติในการเริ่มต้นแอปพลิเคชัน
• แอปพลิเคชันใช้ global.css แทน global.min.css ซึ่งไม่ได้ถูกแคชตามค่าเริ่มต้น โปรดทราบว่าหากคุณตัดสินใจที่จะใช้ nginx สำหรับให้บริการไฟล์คงที่ (ตามที่อธิบายไว้ในภายหลัง) มันอาจแคชไฟล์. css ขึ้นอยู่กับการกำหนดค่า Nginx
• แคชอัตโนมัติที่จับได้สำหรับไฟล์ชุดข้อมูลจะเกิดขึ้นในการรีสตาร์ทแอปพลิเคชัน การตรวจจับแคชนี้ถูกตรวจพบโดยผู้ปฏิบัติงานบริการ ( ./public/js/sw.js ) และไฟล์ชุดจะถูกแทนที่ในแคชของเรา!

โหมดการผลิต:

ก่อนที่จะเริ่มแอปพลิเคชันในโหมดการผลิตคุณต้องรวมส่วนที่แชร์ไคลเอน

npm run make

โปรดทราบว่าคำสั่งข้างต้นจะลดขนาดไฟล์ ./public/css/global.css และจัดเก็บเป็น ./public/css/global.min.css

หลังจากการรวมกลุ่มเสร็จสิ้นให้ใช้คำสั่งต่อไปนี้เพื่อเริ่มแอปพลิเคชัน:

npm start

ในโหมดการผลิตสิ่งต่อไปนี้เกิดขึ้น:

• แอปพลิเคชันใช้ global.min.css และไม่ใช่ global.css ซึ่งเป็นทรัพยากรที่แคช
• แคชที่จับได้สำหรับไฟล์ Bundle จะยังคงเกิดขึ้น แต่เฉพาะสำหรับไฟล์ Bundle ที่สร้างขึ้นโดยใช้คำสั่ง npm run make
• Express's (เว็บเซิร์ฟเวอร์ของเรา API ที่ใช้ในแอปพลิเคชัน) เปิดใช้งานโหมดการผลิต

งานศิลปะ

คุณสามารถค้นหาไฟล์ Photoshop ของงานศิลปะที่ใช้ในโครงการนี้ได้จากที่นี่

หมายเหตุ

• ./src/shared/ ไดเรกทอรีมีรหัสทั่วไปในส่วนไคลเอนต์และเซิร์ฟเวอร์ดังนั้นให้แน่ใจว่าคุณไม่ได้เปิดเผยข้อมูลที่ละเอียดอ่อนใด ๆ ในส่วนนี้
• แอปพลิเคชันใช้พนักงานบริการซึ่งใช้งานได้กับโดเมนที่เปิดใช้งาน LocalHost และ HTTPS เท่านั้นดังนั้นตรวจสอบให้แน่ใจว่าคุณใช้โปรโตคอล HTTPS กับโดเมนของคุณ
• เส้นทางที่ได้รับการป้องกันจะไม่แสดงผลบนฝั่งเซิร์ฟเวอร์
• หากต้องการ ล้างแคช ให้เปิด ./public/js/sw.js และแก้ไขสตริงเวอร์ชัน จากนั้นปิดแท็บแอปพลิเคชันทั้งหมดที่เปิดในเบราว์เซอร์และเปิดแอปพลิเคชันอีกครั้ง ใช้สิ่งนี้เพื่อล้าง global.min.css ออกจากแคชเมื่อคุณแก้ไขไฟล์ global.css
• รับใบรับรอง SSL ฟรีและใช้ Nginx เพื่อย้อนกลับพร็อกซีโดเมนไปยังแอปพลิเคชันของคุณ

ใช้ฐานข้อมูลที่แตกต่างกัน

ไฟล์ ./src/db/db.api.abstract.js มีคลาสนามธรรมสำหรับ API ฐานข้อมูลของเราอ่านความคิดเห็นสำหรับข้อกำหนดของวิธีการ จากนั้นต้องการไฟล์นี้ในเลเยอร์ API ฐานข้อมูลที่กำหนดเองของคุณและแทนที่วิธีนามธรรม ดู ./src/db/mysql.api.js ไฟล์สำหรับตัวอย่างการใช้งาน โปรดทราบว่าแต่ละวิธีควรส่งคืนสัญญา

หลังจากเสร็จสิ้นการเขียน API สำหรับฐานข้อมูลของคุณให้ไปที่ ./config/config.json และแก้ไขตัวเลือก databaseAPI เพื่อจับคู่ชื่อของไฟล์ที่มีเลเยอร์ DB API ของคุณ ควรวางไฟล์ไว้ใน ./src/db/ / ไดเรกทอรี

ให้บริการไฟล์คงที่โดยใช้ nginx

ฉันขอแนะนำให้ใช้ Nginx เพื่อให้บริการไฟล์แบบคงที่แทน nodejs ในการทำเช่นนั้นคุณสามารถเพิ่มบล็อกตำแหน่งต่อไปนี้ในการกำหนดค่าบล็อก Sever ของคุณ:

 location /public {
	alias  /path/to/your/app/public;
}

หากคุณตัดสินใจที่จะไปกับ Nginx สำหรับการให้บริการไฟล์คงที่คุณอาจต้องการเปลี่ยนการบีบอัด GZIP สำหรับแอปพลิเคชันของคุณเป็น Nginx ด้วย หากคุณทำเช่นนั้นซึ่งคุณควรปิดใช้งานการบีบอัดทางด้านแอปพลิเคชันโดยแสดงความคิดเห็นสองบรรทัดต่อไปนี้จาก ./node.ucp.js ไฟล์:

 //./node.ucp.js
// comment out the following lines if you use nginx for gzip compression
import compression from 'compression' ;

app . use ( compression ( ) ) ;

การใช้ Process Manager เพื่อให้แน่ใจว่าแอปทำงานตลอดไปในโหมดการผลิต

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

npm install pm2 -g

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

ฉันได้สร้างไฟล์กำหนดค่าสำหรับ PM2 เพื่อเริ่มแอปพลิเคชันเพื่อเริ่มแอปพลิเคชันในโหมดการผลิตด้วยประเภท PM2:

pm2 start node.ucp.pm2.json