كيفية نشر واستضافة مشروع 2 أو 4 السنوي على خادم

في تلك اللحظة التي ترى فيها شيئًا ما أبهرك ، حصلت على العنصر ولكنك علقت في العملية على وشك استخدام / تنفيذ ما حصلت عليه.

كان هذا بالضبط ما واجهته. سمعت عن Angular 2 ، لقد غطت فيه ، وتعلم وتنفيذ الميزات الرائعة. لقد كانت تجربة رائعة حقًا ، فقط لإكمال مشروع معها وتعثرت في استضافة المشروع. همم!

في هذه المقالة ، سأشارك تجربتي في كيفية نشر واستضافة مشروع Angular 2.

المتطلب السابق: يجب أن تكون قد أكملت مشروع Angular 2 أو 4 وحول النشر على الخادم.

  1. تمكين وضع الإنتاج

تعمل التطبيقات الزاوية في وضع التطوير افتراضيًا.

يمكن أن يؤدي التبديل إلى وضع الإنتاج إلى تشغيله بشكل أسرع من خلال تعطيل الاختبارات المحددة للتطوير مثل دورات اكتشاف التغيير المزدوج.

لتمكين وضع الإنتاج عند التشغيل عن بُعد ، قم بتحرير الكود في src / main.ts. إلى الكود أدناه:

// تمكين وضع الإنتاج ما لم يعمل محليا
 إذا (! /localhost/.test (document.location.host)) {enableProdMode ()؛ }

2. تحرير وتكوين التطبيق الخاص بك لاستضافة

تأكد من قيامك بتحرير / تعديل المسار إلى خادمك البعيد.

قم بتحرير index.html (أنصحك بأن تكون مكررًا) لتحميل جميع وحدات node_modules من الخادم ، ولكن إذا قمت بإنشاء تطبيقك باستخدام ng @ angular / cli ، فأضف الأكواد التالية ضمن علامة الرأس.


استبدل البرنامج النصي systemjs.config.js ببرنامج نصي يحمّل systemjs.config.server.js ولكن إذا كنت قد أنشأت تطبيقك باستخدام ng @ angular / cli ، فقم بإنشاء ملف جديد باسم src / systemjs.config.server.js و الرجوع إليها داخل علامة رأسك أيضا

 

أضف الكود التالي إلى systemjs.config.server.js

/ **
* تكوين النظام للنشر دون تثبيت node_modules
* تحميل حزم umd من الويب بدلاً من ذلك
* ضبط حسب الضرورة لاحتياجات التطبيق الخاص بك.
* /

(وظيفة (عالمية) {
System.config ({
مسارات: {
 ‘npm:’: ‘https://unpkg.com/ '// path بمثابة اسم مستعار

تخبر // map محمل النظام عن المكان الذي تبحث فيه عن الأشياء

خريطة: {
التطبيق: "التطبيق" ، / / موقع ملفات التطبيق المنقولة
// الزاوي حزم umd المصغرة
‘@ angular / core ': p npm: @ angular / core / bundles / core.umd.min.js' ،
"@ الزاوي / مشترك ':
"الآلية الوقائية الوطنية: @ الزاوي / مشترك / حزم / common.umd.min.js،
‘@ angular / compiler ':‘ npm: @ angular / compiler / bundles / compiler.umd.min.js ’،
‘@ angular / platform-browser ':‘ npm: @ angular / platform-browser / bundles / platform-browser.umd.min.js ’،
‘@ angular / platform-browser-dynamic ': p npm: @ angular / platform-browser-dynamic / bundles / platform-browser-dynamic.umd.min.js’،
‘@ angular / http ':‘ npm: @ angular / http / bundles / http.umd.min.js ’،
"الزاوي / جهاز التوجيه": ‘npm: @ الزاوي / جهاز التوجيه / حزم / router.umd.min.js '،
"الزاوي / الموجه / الترقية": p npm: @ الزاوي / الموجه / حزم / router-upgrade.umd.min.js '،
‘@ angular / forms ':‘ npm: @ angular / forms / bundles / forms.umd.min.js ’،
"@ الزاوي / ترقية ':
"الآلية الوقائية الوطنية: @ الزاوي / ترقية / حزم / upgrade.umd.min.js،
"الزاوي / الترقية / ثابت": p npm: @ الزاوي / الترقية / حزم / الترقية-static.umd.min.js '،

// مكتبات أخرى
‘rxjs’: ‘npm: rxjs@5.0.1 '،
"angular-in-memory-web-api": ‘npm: angular-in-memory-web-api / bundles / in-memory-web-api.umd.js’

تخبِر حزم / / مُحمل النظام كيفية التحميل عند عدم وجود اسم ملف و / أو عدم وجود ملحق

الحزم: {
التطبيق: {
الرئيسية: / ./main.js ،
defaultExtension: ‘js’

rxjs: {
defaultExtension: ‘js’
}
}
})؛
})(هذه)؛

3. بناء التطبيق الخاص بك

بعد ذلك ، قم بتشغيل الأمر build في مشروعك باستخدام ng build

بعد البناء بنجاح ، سيتم إنشاء مجلد dist في الدليل الخاص بك والذي يحتوي على جميع الملفات اللازمة التي بنيت من مشروعك.

4. تحميل التطبيق الخاص بك

يمكنك الآن تحميل جميع الملفات في المجلد / dist إلى الخادم الخاص بك.

بعد أن تقوم بتحميل التطبيق ، يرجى ملاحظة أنه إذا قمت بتحميل الملفات في مجلد غير متعلق بالمجال ، فسوف تحتاج إلى تعديل العلامة في index.html. انظر المثال أدناه:

نطاقي هو http://test.abc.com والذي يشير إلى / public / test / وقمت بتحميل التطبيق إلى مجلد يسمى angular ، ثم يمكنني الوصول إلى التطبيق عبر http://test.abc.com/angular ، سيتعين عليك تحرير العلامة الأساسية في index.html الخاص بي حتى يكون قادراً على التشغيل.

ها أنت ذا! اختبار التطبيق الذي تم تحميله. لا تتردد في التعليق على أي خطوة لا تنجح أو تتحدى.

الائتمان: RAD5 تك المحور
المصدر: الوثائق الرسمية الزاوي