photo sharing website

موقع مشاركة الصور

موقع ثابت لتبادل الصور المُعاد مسبقًا لمشاركة صورك علنًا دون الحاجة إلى تشغيل الخوادم أو الحفاظ عليها.

مفهوم

• موقع ويب ثابت - تطبيق ويب يمكن الوصول إليه للجمهور ،
• تطبيق Web Admin - تطبيق الويب المحمي على كلمة المرور (React.js Web Application) المستخدم لإنشاء موقع الويب الثابت عند الطلب.

يوضح فيديو YouTube أدناه كيف يعمل كل شيء:

بنيان

1. توزيع السحابة مع / المسار في دلو S3 كأصل
2. توزيع CloudFront مع /website في S3 Ducket كأصل (رمز المصدر الثابت للمواقع الثابتة)
3. دلو S3 الذي يحمل جميع الموارد الثابتة (HTML و CSS و JavaScript والصور)
4. دلو S3 مع الصور الأولية التي تم تحميلها
5. تستخدم AWS Lambda لإنشاء رمز مصدر HTML الخاص بالموقع الثابت
6. تستخدم AWS Lambda لإنشاء الصور المصغرة واكتشاف الملصقات ذات الصلة للصور التي تم تحميلها باستخدام Amazon Rekognition
7. Amazon Cognito لتوفير مصادقة لمستخدم المسؤول

النشر

المتطلبات الأساسية

• إنشاء حساب AWS
• تثبيت Amplify CLI
• تثبيت NPM

تعليمات

1. استنساخ المستودع

 git clone https://github.com/cornelcroi/photo-sharing-website.git

2. العمليات الأولية

• البريد الإلكتروني للمستخدم المسؤول

  • استبدل [email protected] بعنوان بريدك الإلكتروني الخاص بك في amplify/backend/boostrap/adminuser/parameters.json

• تغيير حجم الصورة

  • يقيم التطبيق الصور باستخدام المكتبة sharp المعبأة كطبقة لامدا ،
  • إنشاء طبقة حادة. اتبع هذا البرنامج التعليمي لإنشاء طبقة حادة في منطقتك المطلوبة ، ثم قم بتحديث الطبقة ARN في amplify/backend/function/S3TriggeraXXXX/S3TriggeraXXXX-cloudformation-template.json .

3. يثبت التبعيات

 npm install

4. نشر المكدس على حساب AWS الخاص بك

• تهيئة تطبيق سحابة مدعوم من Amplify

   amplify init
  

• أحكام الموارد السحابية مع تشغيل التطورات المحلية

   amplify push
  

• نشر الأصول الثابتة إلى Amazon S3

   amplify publish
  

يتمتع !

️ قد تحتاج إلى الانتظار بعد ساعتين من النشر الأول حتى يتم نشر اسم DNS لدلو S3! (إذا لم تتمكن من تسجيل الدخول بعد الاستنزاف باستخدام كلمة المرور المؤقتة التي تم استلامها عن طريق البريد الإلكتروني ، فيجب أن يكون ذلك ، فقط انتظر قبل المحاولة مرة أخرى ، فلا حرج في الرمز)

النقاط الرئيسية

• تقوم AWS Lambda بإنشاء الملفات الثابتة باستخدام قوالب HTML والبيانات المخزنة في DynamoDB ،
• تطبيق React.js مصمم باستخدام AWS Amplify ،
• يوجد مستخدم مسؤول واحد تم إنشاؤه عند النشر الأول ،
• يتم إنشاء موقع الويب الثابت (مع ملفات قالب HTML) عند الطلب بواسطة AWS Lambda ،
• يتم استخدام ملفات HTML 4 لإنشاء موقع الويب الثابت ،

  /albums-gallery-template.html                                       <-- template for an album gallery page
  /albums-template.html                                               <-- template for list of albums page
  /album-item-template.html                                           <-- template for one album used in list of albums page
  /photo-item-template.html                                           <-- template for one photo used on album gallery page

• يحتوي كل قالب HTML على متغيرات ليتم استبدالها بـ lambda مثل قطعة الرمز

  < div >
    < h2 > {ALBUM_NAME} </ h2 >
    < div > {ALBUM_PHOTOS} photos · {ALBUM_DATE} </ div >
  </ div > 

مزايا موقع ثابت مسبقًا

• يتم تحميل HTML ثابتة من المواقع الثابتة مسبقًا بشكل أسرع بكثير من الصفحات الموجودة على موقع ديناميكي. تعد مواقع الويب السريعة مهمة حقًا لتجربة مستخدم جيدة ، وأيضًا لتعزيز موقعك في تصنيفات محرك البحث ،
• مولدات الموقع الثابتة تقلل من تعقيد الموقع. هذا بدوره يحسن السرعة والموثوقية ، ويخفف من تجربة المطور ،
• لا داعي للقلق بشأن مسامير حركة مرور قاعدة البيانات ،
• يمكنك استضافة موقعك مع شبكة توصيل المحتوى التي تتوافق مع حركة مرور موقعك ،
• انخفاض التكاليف ،
• تحسين محركات البحث ،
• التخزين المؤقت الجيد.

لقد استخدمت هذا المستودع لإنشاء موقع الويب الخاص بي manbehindlens.com.

أدوات

• AWS تضخيم مكتبة JavaScript لتوصيل الواجهة الأمامية لدينا بالموارد السحابية

• Amazon Cognito للتعامل مع ترخيص التسجيل

• Amazon Simple Storage Service (S3) لتخزين وتقديم العديد من الصور كما أرغب في تحميل ، لاستضافة أصول تطبيق React.js لتطبيقنا واستضافة موقع الويب الذي تم إنشاؤه ثابتًا

• Amazon Cloudfront لتخزين وتقديم العديد من الصور التي يهتم المستخدمون لدينا بتحميلها ، واستضافة الأصول الثابتة لتطبيقنا

• Amazon DynamoDB لتوفير أوقات استجابة مللي ثانية لاستفسارات API للألبوم والبيانات الصور

• AWS Appsync لاستضافة واجهة برمجة تطبيقات GraphQL للواجهة الأمامية لدينا

• AWS Lambda لإنشاء صور مصغرة صور بشكل غير متزامن في السحابة وإنشاء موقع ثابت عند الطلب

• Amazon Rekognition للكشف عن 5 علامات لكل صورة تم تحميلها

التكاليف

أقل من فنجان قهوة شهريًا

الاعتمادات

• قالب HTML متعدد الكون
• قالب العدسة HTML
• قم بإنشاء تطبيق ويب لمشاركة الصور مع ورشة عمل AWS Amplify
• قم بإنشاء طبقة حادة لـ AWS Lambda
• طبقة AWS لـ Sharp