lagosta

لاجوستا

Lagosta هي واجهة المستخدم لـ Krill.

يستخدم المشروع Vue.js كإطار عمل Javascript والعنصر كإطار عمل لواجهة المستخدم.

متطلبات

• Node.js
• الغزل أو npm

لاحظ أن الغزل يتطلب تثبيت تبعية إضافية، بينما يتم تضمين npm في العقدة js. OTOH إذا كنت تستخدم npm فيجب عليك التأكد من التزام package-lock.json بالمستودع.

إعداد المشروع

للحصول على كافة مكتبات js المطلوبة، قم بتشغيل

yarn install

أو

npm install

تشغيل خادم التطوير

يستخدم Vue webpack وwebpack-dev-server لتشغيل خادم تطوير قابل لإعادة التحميل تلقائيًا، ولا يعد 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 هنا.

إنشاء بناء للنشر

لتجميع كل شيء وتصغيره في المجلد /dist ، يمكنك تشغيل:

 yarn run build

أو

 npm run build

سيؤدي هذا إلى تجميع وتصغير كافة JS وCSS. مرة أخرى، نظرًا لأن Vue يستخدم حزمة الويب، يمكنك تعديل الكثير من الإعدادات لعملية الإنشاء.

راجع https://webpack.js.org/concepts/.

توجيه طلبات API في الإنتاج

هناك طريقتان لتشغيل التطبيق في الإنتاج:

• قم بتكوين خادم الويب الخاص بك لتوكيل جميع الاستدعاءات لـ /api و /stats و /auth إلى البرنامج الخفي Krill.
• استخدم "server.js" المتوفر لتشغيل خادم HTTP بسيط يعمل وكيلاً لاستدعاءات واجهة برمجة التطبيقات (غير مستحسن).

لاستخدام الأخير، قم أولاً بإنشاء ملف .env بالمعلمات التي تناسب بيئتك

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

ومن ثم تشغيل

 node server.js

البناء في حاوية Docker

لمرة واحدة فقط، أنشئ صورة 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 في المضيف.