หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

หัวหน้า

แอปพลิเคชั่นเว็บ Aurelia ที่ใช้ API chieftan สำหรับงานอัตโนมัติงาน

เริ่มต้น

ในการตั้งค่าสภาพแวดล้อมการพัฒนาคุณจะต้องติดตั้ง node.js บนเครื่องในเครื่องของคุณ คุณสามารถดาวน์โหลดได้จากที่นี่

เมื่อทำเสร็จแล้วให้โคลนที่เก็บของหัวหน้าและเรียกใช้ npm install เพื่อติดตั้งการอ้างอิงที่หลากหลายที่ Chieftan ต้องการ

การพัฒนา

สภาพแวดล้อมการพัฒนาถูกสร้างขึ้นรอบ ๆ webpack พร้อมเปิดใช้งานการโหลดโมดูลร้อนช่วยให้การอัปเดตแบบเรียลไทม์ (ใกล้) ของทั้งสไตล์และรหัส (หากยังไม่ได้รัน) โดยไม่ต้องโหลดหน้าใหม่ คุณสามารถเริ่มต้นเซิร์ฟเวอร์การพัฒนาได้โดยเรียกใช้ npm run server:dev จากโฟลเดอร์โครงการจากนั้นเข้าถึง http://localhost:3002 ในเบราว์เซอร์ของคุณ

การปรับใช้

การปรับใช้เกี่ยวข้องกับการสร้างแพ็คเกจการผลิตของแอปพลิเคชันจากนั้นวางเนื้อหาของโฟลเดอร์ dist บนเซิร์ฟเวอร์ของคุณ ในการสร้างแพ็คเกจการผลิตเพียงเรียกใช้ npm build และรอให้ WebPack เสร็จสมบูรณ์

หากคุณต้องการเปิดใช้งานการรายงานข้อผิดพลาดของ Sentry สำหรับข้อผิดพลาดส่วนหน้าคุณควรตั้งค่าตัวแปรสภาพแวดล้อม SENTRY_DSN เป็น DSN Sentry สาธารณะ คุณสามารถติดแท็กเวอร์ชันรุ่นโดยการตั้งค่าตัวแปรสภาพแวดล้อม VERSION

ตัวอย่างการสร้างสคริปต์ 

SENTRY_DSN= " https://[email protected]/1 " VERSION= " $( git rev-parse HEAD ) " npm run build

สคริปต์บิลด์นี้จะติดแท็กการเปิดตัวโดยใช้ GIT SHA ปัจจุบันและกำหนดค่าการรายงานข้อผิดพลาดของ Sentry

URL ที่ดี

เป็นที่น่าสังเกตว่าหากคุณต้องการใช้ประโยชน์จาก HTML5 Push State API สำหรับ URL ที่ดีคุณจะต้องกำหนดค่าเว็บเซิร์ฟเวอร์ของคุณเพื่อให้บริการไฟล์ index.html สำหรับ 404s ทั้งหมด

ด้วย nginx สิ่งนี้สามารถทำได้อย่างง่ายดายโดยใช้คำสั่ง try_files

ตัวอย่างการกำหนดค่า nginx 

 server {
  listen :80 default;
  hostname chieftan.emss.co.za;

  root /var/www/chieftan/dist;

  # Serve the frontend
  location / {
    try_files $url $url.html index.html;
  }

  # Pass API requests to the application instance (basic)
  location /api {
    proxy_pass http://127.0.0.1:8000;
  }
}

ภาพนักเทียบท่า

นอกจากนี้คุณยังสามารถปรับใช้ Frontend Chieftan โดยใช้ Docker เพื่อสร้างภาพเพียงแค่เรียกใช้ npm build && docker build . ในการสร้างภาพคอนเทนเนอร์ด้วยแพ็คเกจแอปพลิเคชันที่รวบรวมล่าสุด

คอนเทนเนอร์นี้ใช้ nginx:alpine ทำให้มีน้ำหนักเบามากและจะฟังบนพอร์ต 3000 โดยค่าเริ่มต้น คุณสามารถทำตามคำแนะนำในหน้าภาพ Nginx Docker เพื่อกำหนดค่าแตกต่างกันหรือวางไว้ด้านหลังพร็อกซีย้อนกลับในการปรับใช้การผลิต

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด