تحية للجميع. إلى جانب الربيع ، جاءت دورات جديدة إلى OTUS ، والتي بدأنا تقديمها اليوم. التوظيف مفتوح بالفعل للدورة "React.js developer" . يمكنك معرفة المزيد عن الدورة في الندوة المجانية عبر الإنترنت ، والتي ستعقد في 11 مارس. كجزء من نفس البرنامج التعليمي على الويب ، سيتم تطوير تطبيق ويب صغير على ReactJS.
ونقترح عليك الآن قراءة المقالة حول نشر تطبيقك الأول ، والذي كتبه مؤلفنا المستقل.
يعد قالب بدء التشغيل Create-response-app و Heroku أدوات رائعة لإنشاء التطبيقات المستندة إلى السحابة بسرعة ، لكن وثائق React و Heroku تتضمن القليل من المعلومات المدهشة حول كيفية طرح تطبيق React على Heroku. ستعمل الخطوات الموضحة في هذه المقالة على أي مشروع تم إنشاؤه باستخدام create-response-app . في مقالتنا ، سنقوم بتثبيت تطبيق Heroku البسيط على Heroku مع الحد الأدنى من الخلفية ، فقط لإلقاء نظرة على العملية نفسها. ولكن أول الأشياء أولاً:ما هو Heroku بشكل عام؟ لماذا احتاجه؟
Heroku هي منصة تعتمد على السحابة كخدمة (PaaS) تدعم العديد من لغات البرمجة (وهي تفتخر وتبرز حقًا). بدأ تاريخ Heroku في عام 2007 ، ثم كانت روبي لغة البرمجة الأولى. الآن يدعم جافا و Node.js و Scala و Clojure و Python و PHP و Go.لماذا أحتاج هذه السحابة؟ يمكنني شراء استضافة رخيصة
نعم ، يمكنك شراء أي استضافة لنفسك وتثبيت خادم Node.js هناك ، إذا كانت هذه الخدمة مدعومة على الاستضافة. ومع ذلك ، تتمتع المنصات السحابية بصفات مثل المرونة وقياس الاستهلاك - على سبيل المثال ، إذا قام الكثير من المستخدمين بزيارة الخدمة الخاصة بك ، فمن المرجح أن يقوم النظام الأساسي تلقائيًا (أو تقوم أنت بنفسك باستخدام الأدوات التي توفرها المنصة) بقياس أو تضييق التدفق. يعني احتساب الاستهلاك أنك ستدفع فقط مقابل الموارد المطلوبة. تتميز المنصات السحابية بالعديد من المزايا ، ويمكن العثور على قائمة كاملة هنا . حسنًا ، سننتقل مباشرةً إلى عملية النشر.إنشاء تطبيق React الخاص بك
ما نوع قالب إنشاء-رد فعل-تطبيق هذا ؟ من المحتمل أنه من المستحيل حتى المشاركة قليلاً في تطوير تطبيقات التفاعل وعدم معرفة ذلك. يوفر هذا القالب React-React-dom و Webpack و ESLint "تحت الغطاء". بالطبع ، يمكنك إنشاء تطبيق React الخاص بك بنفسك ، ولكن لماذا إنشاء تطبيق معقد مع مجموعة من التبعيات عندما يمكنك استخدام دراجة جاهزة بالفعل؟للبدء، تأكد لديك نود.جي إس تثبيت .لإنشاء تطبيق جديد ، أدخل الأوامر التالية في وحدة التحكم: npx create-react-app test-app
cd test-app
ملاحظة مفيدة, , create-react-app . npm install -g create-react-app. , ( , ), - , react-scripts 3.4.0. , npm uninstall -g create-react-app.
حسنًا ، لقد قمت بتسليم الحزمة والآن تريد نشرها. لكي لا ننشر حزمة بسيطة تحتوي على مكون واحد يخلق رد فعل التطبيق الذي يتم تسليمه خارج الصندوق ، قررت كتابة تطبيق تودو صغير ، يمكن العثور على شفرة المصدر الخاصة به ، إذا كنت تريد أيضًا محاولة ملء طلبك ، هنا . باختصار ، يتم حفظ الحالة هناك في شكل إدخالات جديدة وعصرية ، حيث يتم حفظ نص الحالات ومعرفها ، والتي يتم إنشاؤها مباشرة من Date.now(). أخذت جزءًا من تصميم المكونات من تفاعل Material-UI .يمكنك وضع هذا التطبيق على نفسك ونشره مع: npm i -D
npm start
ثم لدينا فرصة رائعة للتلاعب وإنشاء شؤوننا الخاصة. ومع ذلك ، فإن جميع الميزات الموجودة في هذا التطبيق هي حفظ الأشياء في الحالة . لم أجعل أي خادوم إلى الخادم أو على الأقل إلى localStorage ، والغرض من هذه المقالة ليس هذا. لنفترض أنني مصاب بجنون العظمة وسأقوم بتسجيل شؤوني في تضمين واحد فقط لعلامة تبويب المتصفح.أنشئ رمزك المفضل
لماذا نحتاج حتى إلى خادم Node.js إذا لم يكن هناك عمل مع قاعدة البيانات؟ باستخدام الخادم ، سنقدم favicon وكل ما تبقى من التعليمات البرمجية. في تطبيق React الخاص بنا ، انتقل إلى المجلد العام واحذف النموذج favicon.ico من هناك. سآخذ الرمز من هنا وسأنقله إلى المجلد العام.إنشاء خادم Express الخاص بك
بعد ذلك ، نقوم بإنشاء خادم Express لخدمة البناء. مباشرة في مجلد التطبيق ، قم بإنشاء ملف server.jsتتكشف فيه أعمال الواجهة الخلفية.نكتب ما يلي فيه: const express = require('express');
const favicon = require('express-favicon');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(favicon(__dirname + '/build/favicon.png'));
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/ping', function (req, res) {
return res.send('pong');
});
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port);
منذ نستخدم تعبير ، فافيكون التعبير، و مسار الحزم ، ونحن بحاجة لتثبيتها: yarn add express express-favicon path -D
في package.jsonتغيير الأمر البداية لما يلي: "start": "node server.js",
تشغيل البناء
بعد ذلك ، نحتاج إلى إنشاء التطبيق باستخدام الأمر التالي: yarn build
سيكون من الجيد اختبار أن تطبيقنا يعمل بشكل صحيح. للقيام بذلك ، نقوم بتوظيف yarn startوتقييم كيفية عملها بشكل صحيح.إخفاء خريطة المصدر
ربما لا تريد أن يتمكن أي شخص من الوصول إلى شفرة المصدر الخاصة بك. في هذه الحالة ، تحتاج إلى إزالة الوصول لك sourcemap. للقيام بذلك ، قم بإنشاء ملف في المستودع .envوحظر إنشاء الخريطة فيه: GENERATE_SOURCEMAP=false
ملاحظة مفيدةSource map ( , , , , - ). — source map, , .
نشر مباشرة
إذا لم يكن لديك بالفعل حساب على heroku ، يجب عليك التسجيل هنا . للنشر ، ستحتاج أيضًا إلى تثبيت Heroku CLI من هنا . اختبر عملها عن طريق كتابة تسجيل الدخول heroku في سطر الأوامر. بعد ذلك ستجد إعادة توجيه إلى موقع heroku ، حيث تحتاج إلى تسجيل الدخول.ثم أدخل اسم التطبيق الخاص بك. في حالتي ، سيكون todoisakura313 ، لأنه لا يمكنك استخدام أحرف خاصة وشرطات سفلية في اسم التطبيق: heroku create todoisakura313
ثم سنرسل بناء لدينا باستخدام الأوامر التالية: npm install
git add --all
git commit -m "first commit"
git push heroku master
ستتيح لك هذه الأوامر إضافة تبعيات وتهيئة gitوتنزيل التطبيق نفسه.غرامة! بشكل عام ، كل شيء جاهز ، الآن يجب أن يظهر التطبيق بالفعل على العنوان https://< >.herokuapp.com/. يمكنك فتح التطبيق بكتابة الأوامر التالية في وحدة التحكم:heroku open
إذا حدث خطأ ما ، اكتشف ما هو الخطأ في الفريق heroku logs --tail. ومع ذلك ، بشكل عام ، إذا لم تنحرف عن التعليمات الواردة في هذه المقالة ، فيجب أن تنجح.هذا كل شئ! شكرا للانتباه. يمكن العثور على تطبيق يعمل هنا ، ومع رمزه النهائي - هنا .وأولئك الذين قرأوا حتى النهاية ، ندعوك إلى ندوة إلكترونية مجانية أخرى ، حيث ستتعلم نقاط القوة والضعف في أطر عمل JS الأكثر شيوعًا لتطوير الواجهة الأمامية ، وسوف تفهم المهام الأكثر ملاءمة لإطار العمل ويمكنك أن تقرر أيهما أفضل ليدرس.