كيفية توصيل تطبيق React بخلفية على نفس الأصل

كيفية خدمة React وتطبيق الواجهة الخلفية من جانب الخادم من نفس الأصل ، دون الحاجة إلى استخدام CORS على الخادم والقلق بشأن المنافذ

أعتقد أن الطريقة الوحيدة الأكثر استخدامًا لبدء تطبيق React هي استخدامcreate-react-app. إنها مريحة للغاية.

تتمثل إحدى المشكلات التي قد تتعثر فيها في كيفية توصيله بخلفية لديك بالفعل ، أو مشكلة قد ترغب في إنشائها.

في التنمية

عند تطوير التطبيق ، فإنك تريد الاستفادة من إعادة التحميل السريع وجميع الميزات الملائمة الأخرى لتطبيق create-response-app. كيف يمكنك دمج ذلك مع الواجهة الخلفية دون الحاجة إلى استخدام CORS على الخادم والقلق بشأن المنافذ؟

سأقدم مثالاً باستخدام Express في المنشور ، لكن هذا ينطبق على أي إطار عمل آخر.

بافتراض أنك تختبر هذا ، فلنقم بإنشاء تطبيق React:

npx create-react-app testing

من ثم

cd testing

الآن قم بإنشاء خادم Express بسيط في ملف server.js ، والذي يمكنك إضافته في أي مكان تريده. يمكن أن يكون في مجلد منفصل تمامًا.

إذا اخترت إضافة هذا الملف داخل ملفcreate-react-appكود التطبيق ، تشغيل:

npm install express

ونحن على استعداد للذهاب. أضف هذا الإعداد السريع البسيط:

const express = require('express');
const app = express();

app.get(’/hey’, (req, res) => res.send(‘ho!’))

app.listen(8080)

النقطة الحاسمة هنا: افتح ملفpackage.jsonملف وإضافة هذا السطر في مكان ما:

"proxy": "http://localhost:8080"

هذا يخبر React لطلبات proxy API إلى خادم Node.js الذي تم إنشاؤه باستخدام Express.

الآن قم بتشغيل عملية العقدة هذه باستخدامnode server.js. في نافذة أخرى ، تبدأ تشغيل تطبيق CRA باستخدامnpm start.

عندما يفتح المتصفح على المنفذ 3000 (افتراضيًا) ، افتح DevTools وقم بتشغيل:

fetch('/hey')

إذا قمت بفحص لوحة الشبكة ، فيجب أن يكون لديك استجابة ناجحة معho!رسالة.

في الانتاج

في الإنتاج ، ستقوم بتشغيلnpm run buildعندما تكون جاهزًا للنشر وسنستخدم خادم Express لخدمة تلك الملفات الثابتة.

أصبح كل شيء الوكيل الآن عديم الفائدة (ولن يعمل في الإنتاج أيضًا - إنه يهدف إلى تسهيل التطوير). مما يعني أنه يمكنك تركه في ملفpackage.jsonملف إذا وجدت أنه مناسب.

في الكود أدناه ، نطلبpathوحدة Node المدمجة ونطلب من التطبيق خدمة الإنشاء الثابت لتطبيق React:

const express = require('express')
const path = require('path')
const app = express()

app.use(express.static(path.join(__dirname, ‘build’)))

app.get(’/ping’, (req, res) => { return res.send(‘pong’) })

app.get(’/’, (req, res) => { res.sendFile(path.join(__dirname, ‘build’, ‘index.html’)) })

app.listen(8080)

تحميل مجانيكتيب رد الفعل


المزيد من البرامج التعليمية للتفاعل: