web app tutorial
1.0.0
يمكن الوصول إلى تطبيق Node.js التعليمي هنا.
تطبيق الويب العقدة هذا عبارة عن تطبيق Web React الذي يقدمه Express. تم قياسه ثم نشره على AWS مرنة Beanstalk.
أولاً ، قم بإنشاء تطبيق React يسمى "My-App" وانتقل إلى المجلد:
npx create-react-app my-app
cd my-app
ثم ، قم بتثبيت وحفظ Express:
npm install express --save
بمجرد الانتهاء من الخطوات المذكورة أعلاه ، يمكنك تشغيل تطبيق React في وضع التطوير: npm run start
قم بإنشاء ملف "server.js" على النحو التالي وحفظه في مجلد جذر المشروع:
const express = require('express');
const bodyParser = require('body-parser')
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
const PORT = process.env.PORT || 8080;
const HOST = '0.0.0.0';
app.get('/hello', (req, res) => {
return res.send('Hello World!')
});
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(PORT);
console.log(`Running on http://${HOST}:${PORT}`);
في ملف package.json ، أضف:
"proxy": "http://localhost:8080"
بعد الانتهاء من الخطوات المذكورة أعلاه ، يمكنك تشغيل البناء على تطبيق React الخاص بك:
npm run build
وتشغيل Express لخدمة تطبيق React:
node server.js
لاستخدام Docker ، قم بالتسجيل على Docker وتثبيت Docker و/أو Docker Desktop حسب الحاجة. بمجرد اكتمال تثبيت Docker ، قم بإنشاء ملف يسمى "Dockerfile" عن طريق التشغيل:
touch Dockerfile
في Dockerfile ، حدد الصورة التي تريد أن تبنيها منها. يتوفر أحدث رقم صورة لتطبيق Node.js على مركز Docker.
FROM node:14
بعد ذلك ، قم بإنشاء دليل العمل في تطبيقك:
WORKDIR /usr/src/app
ثم ، انسخ package.json وقم بتثبيت التبعيات بإضافة الأسطر التالية:
COPY package*.json ./
RUN npm install
لتجميع الرمز المصدر في تطبيقك ، أضف:
COPY . .
يعمل تطبيقك على المنفذ 8080 ، لذا أضف هذا السطر:
EXPOSE 8080
تنتهي عن طريق تحديد الأمر لبدء تطبيقك:
CMD [ "node", "server.js" ]
يجب أن يبدو Dockerfile الكامل هكذا:
FROM node:14
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 8080
CMD [ "node", "server.js" ]
إنشاء ملف .dockerignore وأضف الخطوط على النحو التالي: node_modules npm-debug.log سيمنع هذا وحدات العقدة المحلية وسجلات الأخطاء من نسخها إلى صورة Docker. لقطة شاشة .Dockerignore: 
لبناء صورة Docker ، قم بتشغيل الأمر التالي:
docker build -t <your username>/<your app name> .
لتشغيل الصورة المبنية على المنفذ 49160 ، تشغيل:
docker run -p 49160:8080 -d <your username>/<your app name>
يعيد علامة -P توجيه منفذ عام إلى منفذ خاص داخل الحاوية.
لتأكيد أن الصورة تعمل ، قم بتشغيل:
docker ps
من أجل نشر صورة Docker عن بُعد إلى AWS المرن ، ادفع الصورة إلى Docker Hub:
docker push <your username>/<your app name>:latest
يتعلم أكثر
للرجوع إليها ، نشرت Node.js دليلًا حول كيفية قيام بتنسيق تطبيق Node.js هنا.
إذا لم تكن قد استخدمت AWS مرنة Beanstalk من قبل ، فيمكنك البدء من خلال قراءة الوثائق.
إنشاء ملف dockerrun.aws.json على النحو التالي:
{
"AWSEBDockerrunVersion": "1",
"Image": {
"Name": "your-docker-username/repo-name",
"Update": "true"
},
"Ports": [
{
"ContainerPort": "8080"
}
]
}
يتضمن ذلك معلومات حول صورة Docker عن بُعد التي يجب أن تسحبها Beanstalk المرنة. سنقوم بعد ذلك بإنشاء تطبيق Beanstalk مرن وتحميل هذا الملف.
لإعداد تطبيقك على Ontastic BeanStalk ، أولاً ، انتقل إلى وحدة التحكم في Beanstalk المرنة -> التطبيقات ، وانقر على "إنشاء تطبيق جديد".
أدخل اسم التطبيق الخاص بك: 
انقر على "إنشاء بيئة جديدة" للتطبيق الذي أنشأته للتو: 
حدد "بيئة خادم الويب" لهذا التطبيق: 
بالنسبة إلى "النظام الأساسي" ، اختر "Docker" ، وفرع النظام الأساسي والنسخة كما تريد.
من أجل "رمز التطبيق" ، اختر "تحميل الكود الخاص بك" ، وقم بتحميل dockerrun.aws.json قمت بإنشائها للتو: 
انتقل إلى "تكوين المزيد من الخيارات" ، واختر تكوين مسبق أو إنشاء تكوين يحتوي على موازن تحميل. 
سيتم إنشاء التطبيق في لحظة وسيتم نشره على عنوان OctionBeanstalk: 
يتعلم أكثر
للرجوع إليها ، لدى AWS وثائق حول نشر حاوية Docker على AWS مرنة Beanstalk.
يمكنك شراء عنوان مجال على أي منصة كما تريد. سيوضح هذا المثال كيفية توصيل تطبيقك المنشور بعنوان تم شراؤه من مجالات Google.
أولاً ، اختر اسم مجال تريده وشرائه.
سيظهر عنوان المجال في حساب مجالات Google بعد الشراء. انتقل إلى "DNS" في القائمة اليسرى ، وانتقل إلى "سجلات الموارد المخصصة"
إضافة سجل CNAME ، وضعت في عنوان تطبيق Beanstalk المرن كـ "بيانات" و "www" كـ "اسم": 
نحتاج أيضًا إلى إضافة خوادم أسماء مخصصة على صفحة "DNS". سنفعل هذا في قسم "خوادم الاسم". 
وفقًا لـ AWS ، "منطقة مستضافة تخبر الطريق 53 كيفية الرد على استعلامات DNS للمجال". دعنا أولاً ننشئ منطقة مستضافة على طريق AWS 53.
انتقل إلى الطريق 53 في وحدة التحكم AWS ، ثم إلى "المناطق المستضافة".
انقر فوق "إنشاء منطقة مستضافة" ، وأدخل عنوان المجال الذي اشتريته للتو: 
سيتم إنشاء منطقة مستضافة: 
انسخ "القيم" المدرجة للنوع "NS" واحد تلو الآخر إلى "خوادم الأسماء المخصصة" في مجالات Google: 
لاحظ أن التغييرات التي تم إجراؤها على مجالات Google قد تستغرق ما يصل إلى 48 ساعة لتسري.
لإعداد HTTPS ، يجب أن نحصل على شهادة SSL على AWS وربطها بعنوان المجال.
