كيفية جمع جميع الأصول الثابتة (js, css) المستخدمة بواسطة discourse

الدعم
1

أحاول إعداد شبكة تسليم المحتوى (CDN) لمنتداي. نظرًا لأن الصين حظرت Fastly والعديد من خوادم CDN، فلا يمكنني استخدامها لتسريع منتداي. بعد إجراء بعض البحث، لجأت إلى Jsdelivr، الذي يمكنه تقديم الملفات الثابتة من npm أو مستودع Github.

أعلم أنه يمكنني استخدام DISCOURSE_CDN_URL في ملف app.yml لإعداد عنوان URL. لكن قبل ذلك، يجب علي جمع جميع الملفات الثابتة (js و CSS) من منتداي ثم رفعها إلى Github حتى يتمكن Jsdelivr من الوصول إليها. وجدت أن الملفات الثابتة تقع فعليًا داخل حاوية Docker:

/var/www/discourse/app/assets

لذا أفكر في نسخ جميع الملفات من هذا المسار في كل مرة أعيد فيها بناء التطبيق ثم رفعها إلى Github. أعتقد أن هذه الفكرة يجب أن تنجح، لكن الطلب الفعلي يحتوي على اسم طويل يحتوي على تجزئة (hash) لا أعرف كيفية الحصول عليه. على سبيل المثال،

ستصبح ember_jquery.js
ember_jquery-8ef4e572f0bf9485e6ef9a35f088729735f82434cf495fbcd5acedefbcddb363.js

لذا فإن سؤالي هو:

  1. كيف يتم توليد اسم الملف التجزئي؟
  2. هل هناك طريقة أخرى لجمع الأصول الثابتة؟
2

إنه تجزئة SHA1 لمحتويات الملف. يتم إنشاؤه هنا:

تُوضع النسخ المُجمَّعة التي يتم استخدامها في /var/www/discourse/public/assets/.

إذا أضفت فقرة إلى ملف app.yml، فيمكنك تنفيذ إجراء بعد إعادة بناء الحاوية. على سبيل المثال، نستخدم شيئًا مشابهًا للتحميل إلى S3:

hooks:
  after_assets_precompile:
    - exec:
        cd: $home
        cmd:
          - sudo -E -u discourse bundle exec rake s3:upload_assets

في حالتك، استبدل مهمة rake بالأوامر التي تقوم بتشغيلها لنشر الأصول المُجمَّعة إلى GitHub عند بناء الحاوية.

3

شكرًا لك يا @schleifer. ردك مفيد جدًا. ومع ذلك، لا يزال لدي بعض الأسئلة التالية:

  1. أين يمكنني العثور على وثائق الخطافات (hooks) مثل after_assets_precompile؟ لقد بحثت في وثائق Docker وكذلك في مستودع discourse على GitHub، لكنني لم أجد أي معلومات عنها. هل يجب عليّ إعداد الخطافات المسماة after_assets_precompile بنفسي (وكيف أفعل ذلك؟) أم أنها مُعدّة مسبقًا من قبل discourse مثل after_code؟

  2. كما أفهم، فإن الكود الوهمي (pseudocode) الخاص بي سيبدو كالتالي:

     hooks:
   after_assets_precompile:
     - exec:
         cd: $home
         cmd:
           - الدخول إلى حاوية Docker
           - الانتقال إلى `/var/www/discourse/public/assets/`
           - تنفيذ git add و commit ثم الدفع (push) إلى مستودع GitHub

شكرًا لك.

4

سؤال جيد، لكن ليس لدي إجابة مرضية لك.

نظام التكوين المستخدم داخل الحاوية هو:

يصف ملف README كيفية عمل الخطافات بشكل عام. تعتمد الخطافات المحددة المتاحة للاستخدام على كيفية إعداد نسختك — حيث يتضمن ملف app.yml الرئيسي واحدًا أو أكثر من القوالب. في معظم الحالات، يكون أحد هذه القوالب هو web.template.yml:

هناك يتم تعريف خطاف assets_precompile (في السطر [L159] أثناء كتابتي لهذا). وفقًا لتوثيق Pups، يمكنك تشغيل أوامر أخرى قبل أو بعد اكتماله باستخدام before_assets_precompile و after_assets_precompile على التوالي.

يتم تشغيل الأوامر داخل حاوية Docker، لذا لا تحتاج إلى القيام بأي شيء بخصوص ذلك.

يمكن أن يشير التوجيه cd: مباشرة إلى /var/www/discourse/public/assets/، ويتم تنفيذ كل سطر في cmd من هذا الدليل. (تحذير: يتم تنفيذ كل سطر في مصفوفة cmd في قشرة منفصلة، كما هو الحال في Makefile).

لست متأكدًا مما إذا كان محتوى /var/www/discourse/public/assets/ سيبقى بين عمليات البناء، لذا قد تضطر إلى إنشاء مستودع Git محلي ودفعه قسرًا في كل مرة. قد تكون الحل “الأصح” هو تعريف حجم Docker في app.yml لمجلد الأصول على حجم Docker محدد في app.yml مثل الآخرين والحفاظ عليه خارج الحاوية.

5

شكرًا جزيلاً لك. لقد لاحظت أيضًا أن بعض الأصول الثابتة (مثل CSS) يتم وضعها في /var/www/discourse/tmp/stylesheet-cache. لكن هناك مشكلتان أخريان:

  1. يقوم المستخدمون برفع أصول مثل الصور الرمزية (avatars) والتي يتم تقديمها عبر CDN بعد إعداد DISCOURSE_CDN_URL. ومع ذلك، يبدو أن دفع الأصول المرفوعة إلى GitHub بعد كل مرة يرفع فيها المستخدم شيئًا ليس حلاً مثاليًا.
  2. عندما يطلب Discourse صورة رمزية للمستخدم مثل 2_2.png، فإنه يقوم بما يلي: 1) تقسيم اسم الملف، 2) إجراء بعض الفحوصات، 3) حساب اسم الملف الفعلي باستخدام التجزئة (hashing). إذا كنت بحاجة إلى تقديم صور رمزية للمستخدمين، فسأضطر إلى تنفيذ نفس المنطق بنفسي نظرًا لعدم وجود ملف باسم 2_2.png.

حلّي النهائي بسيط. 1) أضفت Nginx أمام منتداي مثل هذا المنشور. 2) قمت بجمع جميع الأصول الثابتة من المسار المذكور أعلاه ودفعها إلى GitHub. 3) في ملف إعدادات Nginx، أضفت بعض القواعد مثل:

location ~/(stylesheets|assets) {
    return 301 https://cdn.jsdelivr.net/gh/my_github/my_repo/$request_uri;
}

شكرًا مرة أخرى @schleifer