lagosta

ลาโกสตา

Lagosta เป็นส่วนต่อประสานผู้ใช้สำหรับ Krill

โครงการใช้ Vue.js เป็นเฟรมเวิร์ก Javascript และองค์ประกอบเป็นเฟรมเวิร์ก UI

ความต้องการ

• โหนด js
• เส้นด้ายหรือ npm

โปรดทราบว่าเส้นด้ายจำเป็นต้องติดตั้งการพึ่งพาเพิ่มเติม ในขณะที่ npm จะรวมอยู่ใน node.js OTOH หากคุณใช้ npm คุณควรตรวจสอบให้แน่ใจว่าได้ส่ง package-lock.json ไปยังที่เก็บแล้ว

การตั้งค่าโครงการ

หากต้องการรับไลบรารี js ที่จำเป็นทั้งหมด ให้รัน

yarn install

หรือ

npm install

ใช้งานเซิร์ฟเวอร์การพัฒนา

Vue ใช้ webpack และ webpack-dev-server เพื่อรันเซิร์ฟเวอร์การพัฒนาที่คอมไพล์อัตโนมัติและโหลดซ้ำได้แบบ hot และ Krill ก็ไม่มีข้อยกเว้น

คุณสามารถเริ่มเซิร์ฟเวอร์การพัฒนาได้โดยการออก:

npm run serve

การตั้งค่าส่วนใหญ่สำหรับเซิร์ฟเวอร์การพัฒนาระบุไว้ในไฟล์ /vue.config.js

คุณสามารถเลือกที่อยู่ IP และพอร์ตเพื่อรันเซิร์ฟเวอร์การพัฒนา Krill บน:

    port: "3003",
    https: true

คุณสามารถใช้การตั้ง proxy สำหรับ webpkack-dev-server เพื่อเปลี่ยนเส้นทางคำขอ HTTP ไปยังอินสแตนซ์ Krill ในเครื่องของคุณได้ แก้ไขไฟล์ /vue.config.js โดยการระบุอ็อพชัน proxy

การดำเนินการนี้จะส่งต่อคำขอสำหรับตำแหน่งข้อมูลนั้นไปยังอินสแตนซ์ Krill ในพื้นที่ของคุณ โปรดทราบว่าคุณจะต้องเปลี่ยนเส้นทางปลายทาง /api , /auth และ /stats ไปที่ Krill

ตัวอย่างเช่น:

...
  devServer : {
    // Krill proxy instance (for API calls).
    // see: https://webpack.js.org/configuration/dev-server/#devserverproxy
    proxy : {
      "/api" : { target : "https://localhost:3000" } ,
      "/auth" : { target : "https://localhost:3000" } ,
      "/stats" : { target : "https://localhost:3000" }
    } ,
...

ในตัวอย่างนี้ อินสแตนซ์ Krill ภายในเครื่องทำงานบน https://localhost:3000 (ค่าเริ่มต้นในการกำหนดค่า krill)

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ webpack-dev-server ได้ที่นี่

การสร้างบิลด์สำหรับการปรับใช้

หากต้องการรวบรวมและย่อทุกอย่างในโฟลเดอร์ /dist คุณสามารถเรียกใช้:

 yarn run build

หรือ

 npm run build

สิ่งนี้จะรวบรวมและลดขนาด JS และ CSS ทั้งหมด ขอย้ำอีกครั้ง เนื่องจาก Vue ใช้ webpack คุณสามารถแก้ไขการตั้งค่าจำนวนมากสำหรับกระบวนการสร้างได้

ดูhttps://webpack.js.org/concepts/

คำขอ API การกำหนดเส้นทางในการผลิต

มีสองวิธีในการรันแอปในการผลิต:

• กำหนดค่าเว็บเซิร์ฟเวอร์ของคุณให้พร็อกซีการเรียกทั้งหมดสำหรับ /api , /stats และ /auth ไปยัง Krill daemon
• ใช้ 'server.js' ที่ให้มาเพื่อหมุนเซิร์ฟเวอร์ HTTP แบบธรรมดาที่พร็อกซีการเรียก API (ไม่แนะนำ)

หากต้องการใช้อย่างหลัง ขั้นแรกให้สร้างไฟล์ .env ด้วยพารามิเตอร์ที่เหมาะกับสภาพแวดล้อมของคุณ

 PROXY_BASE_URL=https://your-host
SERVE_FOLDER=dist

แล้วจึงวิ่ง

 node server.js

สร้างในคอนเทนเนอร์นักเทียบท่า

เพียงครั้งเดียวเท่านั้น สร้างอิมเมจ Docker ในเครื่อง:

 docker build -t lagosta-builder .

เมื่อคุณมีสิ่งนั้นแล้ว คุณก็สามารถทำได้:

 docker run -it --rm --name lagosta-builder -v ${PWD}:/tmp/src lagosta-builder /bin/bash
root@06a45bcc9a3e:/tmp/src# yarn install
root@06a45bcc9a3e:/tmp/src# exit

ตอนนี้เมื่ออิมเมจ Docker และไดเร็กทอรีบิวด์ Lagosta ในเครื่องของคุณพร้อมแล้ว ในอนาคต คุณสามารถรัน yarn build ได้ดังนี้:

 docker run -it --rm --name lagosta-builder -v ${PWD}:/tmp/src lagosta-builder /bin/bash
root@06a45bcc9a3e:/tmp/src# yarn build
...
 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
                                  
Done in 19.66s.

ผลลัพธ์จะอยู่ในโฟลเดอร์ ${PWD}/dist ในโฮสต์