static website

تم تصميم CDN رقم 1 المجاني والمفتوح لجعل الحياة أسهل للمطورين.

---

موقع CDNJS

مرحبًا بك في مستودع CDNJS/Static-Website ، منزل موقع CDNJS الجديد المصمم باستخدام Vue & Nuxt ، في أعقاب اقتراح العلامة التجارية CDNJS الجديد من CDNJS/Brand.

يعتمد موقع الويب هذا تمامًا على واجهة برمجة تطبيقات CDNJS للعمل ، مما يؤدي إلى استخدام الموارد المنخفض للغاية لخدمة الموقع ومنطق التطبيق المحدود لتحديث البيانات المستخدمة (يجب تحديث خرائط Sitemap فقط ، كل شيء يستخدم مكالمات API عند تحميل الصفحة).

ابدء

يعمل هذا المشروع على Node.js. يرجى التأكد من أن لديك إصدارًا مثبتًا يتطابق مع متطلباتنا المحددة في ملف .NVMRC لهذا المشروع.

يتضمن هذا المشروع ملف قفل التبعية. يتم استخدام هذا لضمان أن جميع عمليات تثبيت المشروع تستخدم نفس الإصدار من التبعيات من أجل الاتساق.

يمكنك تثبيت تبعيات العقدة بعد ملف القفل هذا عن طريق التشغيل:

npm ci

بمجرد تثبيت التبعيات ، يكون الموقع جاهزًا للتشغيل في وضع التطوير. لبدء nuxt في وضع التطوير (بدون خادم مخصص) ، قم بتشغيل:

npm run dev

التطوير في Windows

قبل تشغيل npm run dev ، أضف حزمة NPM عالمية لحل 'NODE_ENV' is not recognized as an internal or external command :

npm install -g win-node-env

تحليل الحزمة

يتم بناء موقع الويب باستخدام NUXT ويعتمد على WebPack لإنشاء حزمة من جانب العميل المستخدمة لتقديم الموقع وتوفير التفاعل. بسبب هذا ، يمكننا استخدام محلل WebPack لفهم أفضل ما يسهم في حجم الحزمة النهائية.

لتشغيل المحلل ، استخدم نص الحزمة التالي:

npm run dev:analyze

متغيرات البيئة

قاعدة الموقع

عند العمل مع الموقع قيد التطوير ، باستخدام npm run dev أو npm run dev:analyze ، سيتم ضبط متغير بيئة SITE_HOST تلقائيًا على http://localhost:3000/ ، لأن هذا هو المكان الذي يمكن فيه الوصول إلى الموقع بواسطة البرنامج النصي dev.

عند نشر هذا الموقع على الإنتاج باستخدام npm run build و npm run start SCRIPTS ، يجب تعيين متغير بيئة SITE_HOST ويجب أن يكون القاعدة الكنسية للمكان الذي سيتم فيه استضافة الموقع. في الإنتاج بالنسبة لنا ، تم تعيين هذا على https://cdnjs.com/ .

Google Analytics

لتمكين Google Analytics لنشر الموقع ، يجب عليك تعيين متغير البيئة GA_ID . يجب تعيين ذلك على معرف Google Analytics الفريد للخاصية الخاصة بك ، في النموذج UA-xxxxxxxxx-x .

يتم تجميع Google Analytics مع الموقع باستخدام وحدة @nuxtjs/google-analytics . إذا لم يتم تحديد متغير البيئة ، فلن يتم تجميع Google Analytics مع النشر.

تسجيل خطأ الحارس

لتمكين تسجيل خطأ الحارس الأساسي ، يجب تعيين متغير بيئة SENTRY_DSN مع عنوان URL DSN صالح من Sentry.

لتمكين خرائط المصدر وتتبع الإصدار للإبلاغ عن الأخطاء في الإنتاج ، يجب تعيين متغيرات البيئة SENTRY_ORG و SENTRY_PROJECT بمعلومات مشروع Sentry الصحيحة ، بالإضافة إلى تعيين SENTRY_AUTH_TOKEN على رمز مصادقة صالح من Sentry. تُستخدم خرائط المصدر كما في الإنتاج ، فنحن نستخدم JavaScript المصغرة ، وبالتالي تسمح Sourcemaps Sentry بإظهار المكان الذي نشأ عنه خطأ في الكود المصدري.

عدم السماح في robots.txt

افتراضيًا ، أثناء عملية الإنشاء ، سيتم إنشاء ملف robots.txt للموقع الذي يحتوي على User-agent: * والسماح Allow: * . إذا كنت ترغب في الحصول على مثيل أكثر خصوصية للموقع أو ترغب في منع تلوث كبار المسئولين الاقتصاديين المحتمل ، فيمكنك تعيين ROBOTS_DISALLOW Env Var ليكون 1 . هذا سيغير Allow: * القاعدة ليكون Disallow: / .

جيل خريطة sitemap

لتمكين توليد خريطة sitemap للموقع ، يجب ضبط NODE_ENV على production . سيمكن ذلك توليد خريطة Sitemap الأولي أثناء البناء وكذلك مهمة الخلفية لتجديد خريطة Sitemap أثناء npm run start ، كل 30 دقيقة.

علاوة على ذلك ، من خلال وجود NODE_ENV=production ، سيخبر هذا أيضًا البرنامج النصي لتوليد robots.txt ، المشار إليه أعلاه ، لتضمين قاعدة تشير إلى ملف فهرس Sitemap ، استنادًا إلى SITE_HOST env var.

(لاحظ أنه بالنسبة لـ npm run dev:analyze ، npm run build & npm run start ، سيتم تعيين NODE_ENV تلقائيًا على production ).

نشر الإنتاج

لنشر هذا الموقع على الإنتاج ، يجب اتخاذ الخطوات التالية:

• تثبيت التبعيات مع npm ci
• قم ببناء موقع الإنتاج مع npm run build
• ابدأ خادم مخصص Express مع npm run start

بالنسبة لعمليات النشر إلى بعض مضيفات PaaS ، سيتم تلقائيًا تثبيت التبعيات وبناء التطبيق تلقائيًا ، مع npm run start في Procfile .

لتغيير المنفذ الذي يرتبطه التطبيق ، قم بتعيين بيئة PORT Var عند تشغيل البرنامج النصي.

يتم استخدام خادم Express Custom للتعامل مع خرائطنا ، حيث لدينا العديد من الطرق لعرض Sitemap من Nuxt للتعامل مع موثوق. أثناء إنشاء خطوة ( npm run build ) ، سيتم إنشاء خروفات Sitemap الأولية. سيقوم خادم Express بعد ذلك بتجديدها كل 30 دقيقة باستخدام API CDNJS. يتوفر سجل يحتوي على نتيجة الجيل الأخير في Express على /sitemap-log.txt على الموقع الإلكتروني.

linting

يمكن تشغيل مجموعة اختباراتنا الكاملة للخلط في أي وقت مع:

npm test

يتم تضمين ملف تكوين ESLINT في هذا المستودع بالإضافة إلى ملف تكوين SASS-Lint للمساعدة في ضمان نمط ثابت في قاعدة الشفرة الخاصة بـ JS/VUE و SCSS المستخدمة في التطبيق.

للمساعدة في إنفاذ هذا ، نستخدم كل من ESLINT و SASS-LINT في اختبارنا. لتشغيل ESLINT في أي وقت ، والذي يتحقق من نمط الكود من أي ملفات JavaScript و Vue ، يمكنك استخدام:

npm run test:eslint

يوفر ESLINT أيضًا إمكانات التثبيت التلقائي ، ويمكن تشغيلها مقابل قاعدة الكود مع:

npm run test:eslint:fix

وبالمثل ، يمكن تشغيل Sass-Lint في أي وقت للتحقق من جودة جميع ملفات SCSS المستخدمة في التطبيق ، عن طريق التشغيل:

npm run test:scss

تتوفر حزمة ثانوية ، Sass-Lint-Auto-Fix ، للمساعدة في إصلاح بعض الأخطاء التي أثارتها Sass-Lint تلقائيًا ، والتي يمكن تشغيلها مع:

npm run test:scss:fix

كما هو الحال مع npm test ، الذي يدير كل من ESLINT & SASS-LINT ، يتوفر نص حزمة أقصر لمحاولة إصلاح المشكلات تلقائيًا من كلتا الحزمين اللذيذة ، والتي يمكن استخدامها عن طريق التشغيل:

npm run test:fix