ستكوِّن في هذه الوحدة خدمة Amazon Simple Storage Service ‏(S3) لاستضافة الموارد الثابتة لتطبيق الويب. في الوحدات اللاحقة، ستضيف وظائف ديناميكية إلى هذه الصفحات باستخدام JavaScript لاستدعاء واجهات برمجة التطبيقات RESTful البعيدة التي أُنشئت باستخدام AWS Lambda وAmazon API Gateway.

هذه الوحدة ذات تصميم بسيط للغاية. سيُخزَّن كل محتوى الويب الثابت بما في ذلك HTML وCSS وJavaScript والصور والملفات الأخرى في Amazon S3. ويمكن حينئذٍ للمستخدمين النهائيين الوصول إلى موقعك باستخدام عنوان URL العام لموقع الويب المعروض بواسطة Amazon S3. لا تحتاج إلى تشغيل أي خوادم ويب أو استخدام خدمات أخرى لجعل موقعك متاحًا.

للأغراض المتعلقة بهذه الوحدة، ستستخدم عنوان URL لنقطة نهاية موقع Amazon S3 الذي نوفره. وسيكون بالصيغة التالية: http://{your-bucket-name}.s3-website.{region}.amazonaws.com. ستحتاج إلى استخدام نطاق مخصص لاستضافة موقعك لمعظم التطبيقات الحقيقية. إذا كنت مهتمًا باستخدام نطاقك الخاص، فاتبع تعليمات إعداد موقع ويب ثابت باستخدام نطاق مخصص في وثائق Amazon S3.

الوقت اللازم لاستكمال الوحدة: :30 دقيقة

الخدمات المُستخدمة: Amazon S3

قالب CloudFormation : إذا كنت مرتاحًا بالفعل لاستخدام Amazon S3 أو كنت ترغب في استخدام Lambda وAPI Gateway مباشرةً، فيمكنك تشغيل أحد قوالب AWS CloudFormation هذه في المنطقة التي تختارها لبناء الموارد اللازمة تلقائيًا.

المنطقة قالب CloudFormation
شرق الولايات المتحدة (شمال فيرجينيا) تشغيل الحزمة >
شرق الولايات المتحدة (أوهايو) تشغيل الحزمة >
غرب الولايات المتحدة (أوريجون) تشغيل الحزمة >
الاتحاد الأوروبي (فرانكفورت) تشغيل الحزمة >
الاتحاد الأوروبي (أيرلندا) تشغيل الحزمة >
الاتحاد الأوروبي (لندن) تشغيل الحزمة >
آسيا والمحيط الهادئ (طوكيو) تشغيل الحزمة >
آسيا والمحيط الهادئ (سول) تشغيل الحزمة >
آسيا والمحيط الهادئ (سيدني) تشغيل الحزمة >
آسيا والمحيط الهادئ (مومباي) تشغيل الحزمة >

تعليمات تشغيل CloudFormation

  1. انقر فوق رابط تشغيل الحزمة أعلاه وفقًا للمنطقة التي اخترتها.

  2. انقر فوق التالي في صفحة تحديد القالب.

  3. أدخل اسمًا فريدًا عالميًا لاسم حاوية موقع الويب، مثل wildrydes-yourname وانقر فوق التالي.

  4. في صفحة الخيارات، اترك جميع الإعدادات الافتراضية وانقر فوق التالي.

  5. في صفحة المراجعة، حدد المربع للإقرار بأن CloudFormation ستنشئ موارد IAM وانقر فوق إنشاء.

    يستخدم هذا القالب موردًا مخصصًا لنسخ أصول موقع الويب الثابتة من حاوية S3 المركزية في حاويتك المخصصة. لتمكين المورد المخصص من الكتابة في الحاوية الجديدة في حسابك، يجب عليه إنشاء دورIAM يمكنه مباشرة هذه الأذونات.

  6. انتظر حزمة wildrydes-webapp-1 للوصول إلى حالة CREATE_COMPLETE.

  7. عند تحديد حزمة wildrydes-webapp-1، انقر فوق علامة التبويب المخرجات، ثم انقر فوق رابط عنوان URL الخاص بموقع الويب.

  8. تحقق من تحميل صفحة Wild Rydes الرئيسية بشكل صحيح وانتقل إلى الوحدة التالية، إدارة المستخدمين.


اتبع التعليمات المفصلة خطوة بخطوة أدناه لاستضافة موقع ويب ثابت. انقر فوق رقم كل خطوة لإظهار القسم.

  • الخطوة 1. تحديد منطقة


    يمكن نشر تطبيق الويب هذا في أي منطقة AWS تدعم جميع الخدمات المستخدمة في هذا التطبيق، والتي تشمل Amazon Cognito وAWS Lambda وAmazon API Gateway وAmazon S3 وAmazon DynamoDB.

    يمكنك الرجوع إلى جدول المنطقة لمعرفة أي المناطق لديها الخدمات المدعومة. المناطق المدعومة التي يمكنك الاختيار منها:

    • شرق الولايات المتحدة (شمال فيرجينيا)
    • شرق الولايات المتحدة (أوهايو)
    • غرب الولايات المتحدة (أوريجون)
    • الاتحاد الأوروبي (فرانكفورت)
    • الاتحاد الأوروبي (أيرلندا)
    • الاتحاد الأوروبي (لندن)
    • آسيا والمحيط الهادئ (طوكيو)
    • آسيا والمحيط الهادئ (سول)
    • آسيا والمحيط الهادئ (سيدني)
    • آسيا والمحيط الهادئ (مومباي)

     

    حدد منطقتك من القائمة المنسدلة في الزاوية اليمنى العليا من وحدة الإدارة في AWS.

    (انقر للتكبير)

  • الخطوة 2. إنشاء حاوية S3

    يمكن استخدام Amazon S3 لاستضافة مواقع ويب ثابتة دون الحاجة إلى تكوين أي خوادم ويب أو إدارتها. ستنشئ في هذه الخطوة حاوية S3 جديدة لاستخدامها لاستضافة جميع الأصول الثابتة (مثل HTML وCSS وJavaScript وملفات الصور) لتطبيق الويب. 

    في هذه الخطوة، ستستخدم وحدة التحكم أو واجهة سطر أوامر AWS لإنشاء حاوية Amazon S3. ضع في اعتبارك أن اسم الحاوية يجب أن يكون فريدًا عالميًا. نوصي باستخدام اسم مثل wildrydes-firstname-lastname. إذا ظهر لك خطأ بأن اسم الحاوية موجود بالفعل، فحاول إضافة أرقام أو أحرف إضافية حتى تجد اسمًا غير مستخدم.


    1. في وحدة الإدارة في AWS، اختر خدمات، ثم حدد S3 ضمن قسم التخزين.
    2. اختر +إنشاء حاوية
    3. اكتب اسمًا فريدًا عالميًا لحاويتك مثل wildrydes-firstname-lastname. إذا ظهر لك خطأ بأن اسم الحاوية موجود بالفعل، فحاول إضافة أرقام أو أحرف إضافية حتى تجد اسمًا غير مستخدم.
    4. حدد المنطقة التي اخترتها لاستخدامها في ورشة العمل تلك من القائمة المنسدلة.
    5. اختر إنشاءفي الجزء السفلي الأيسر من مربع الحوار دون تحديد حاوية لنسخ الإعدادات منها.
  • الخطوة 3. تحميل المحتوى

    في هذه الخطوة، ستحمِّل أصول موقع الويب لهذه الوحدة إلى حاوية S3. يمكنك استخدام وحدة الإدارة في AWS (تتطلب متصفح Google Chrome) أو واجهة سطر أوامر AWS أو قالب CloudFormation المقدم لإكمال هذه الخطوة. إذا كانت واجهة سطر أوامر AWS مثبتة بالفعل ومكونة على جهازك المحلي، فإننا نوصي باستخدام هذه الطريقة. وبخلاف ذلك، استخدم وحدة التحكم إذا كان أحدث إصدار من Google Chrome مثبتًا لديك. 

    التعليمات التفصيلية الخاصة بوحدة التحكم

    لتحميل جميع الملفات والأدلة الفرعية في دليل محلي عبر وحدة الإدارة في AWS، يجب عليك استخدام أحدث إصدار من متصفح الويب Chrome. إذا لم تتمكن من استخدام Chrome، فيُرجى اتباع الإرشادات الخاصة باستخدام إما واجهة سطر أوامر AWS أو قالب CloudFormation المقدم.

    1. نزِّل أرشيفًا لهذا المستودع باستخدام هذا الرابط.

    2. فِك ضغط الأرشيف الذي أنزلته على جهازك المحلي.

    3. افتح وحدة الإدارة في AWS في Chrome. اختر الخدمات، ثم حدد S3 ضمن قسم التخزين.

    4. حدد الحاوية التي أنشأتها في الخطوة السابقة وتأكد من عرض علامة تبويب نظرة عامة.

    5. افتح Windows File Explorer أو macOS Finder واستعرض المحتويات الموسعة للملف المضغوط الذي قمت بتنزيله في الخطوة الأولى.

    6. استعرض للوصول إلى دليل WebApplication/1_StaticWebHosting/website على جهازك المحلي.

    7. حدد جميع الملفات والأدلة الفرعية تحت دليل موقع الويب. تأكد من عدم تحديد دليل موقع الويب نفسه.

    8. قم بسحب الملفات المحددة وإفلاتها من نظام الملفات المحلي إلى المحتوى تحت علامة تبويب نظرة عامة في وحدة التحكم S3.

    9. اختر تحميل في أسفل يسار مربع الحوار الذي يظهر.

    10. انتظر حتى يكتمل التحميل، وتأكد من رؤية محتويات دليل موقع الويب المُدرجة في وحدة تحكم S3. إذا كنت ترى دليل موقع ويب واحدًا فقط، فيجب حذفه من الحاوية واتباع هذه التعليمات مرة أخرى للتأكد من تحديد محتويات الدليل فقط قبل السحب والإسقاط في وحدة التحكم S3.

    تعليمات واجهة سطر الأوامر المفصلة خطوة بخطوة

    إذا كانت واجهة سطر الأوامر مثبتة ومكونة بالفعل، فيمكنك استخدامها لنسخ أصول الويب الضرورية من s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website إلى حاويتك.

    1. نفذ الأمر التالي مع التأكد من استبدال YOUR_BUCKET_NAME بالاسم الذي استخدمته في القسم السابق وYOUR_BUCKET_REGION برمز المنطقة (على سبيل المثال us-east-2) حيث قمت بإنشاء حاويتك.

      aws s3 sync s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website s3://YOUR_BUCKET_NAME --region YOUR_BUCKET_REGION
    2. إذا تم تنفيذ الأمر بنجاح، فيجب أن ترى قائمة بالكائنات التي تم نسخها إلى حاويتك.

     

    التعليمات التفصيلية الخاصة بـ CloudFormation

    إذا كنت غير قادر على استخدام أي من الطريقتين السابقتين، فيمكنك تشغيل قالب CloudFormation المقدم لنسخ الأصول الضرورية في حاوية S3. شغِّل قالب CloudFormation عن طريق تحديد منطقة والنقر فوق رابط إطلاق الحزمة في قسم قالب CloudFormation في هذه الوحدة.

  • الخطوة 4. إضافة سياسة حاوية للسماح بعمليات قراءة عامة

    يمكنك تحديد من يمكنه الوصول إلى المحتوى في حاويات S3 باستخدام سياسة الحاوية. سياسات الحاوية هي وثائق بتنسيق JSON تحدد المبادئ الرئيسية المسموح بها لتنفيذ إجراءات مختلفة فيما يتعلق بالكائنات الموجودة في حاويتك.

    في هذه الخطوة، ستضيف سياسة حاوية إلى حاوية Amazon S3 الجديدة للسماح للمستخدمين المجهولين بعرض موقعك. افتراضيًا، لن يتمكن سوى المستخدمين المصدَّق عليهم والذين يمكنهم الوصول إلى حسابك على AWS من الوصول إلى حاويتك.

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


    1. في وحدة التحكم S3، حدد اسم الحاوية التي أنشأتها في القسم 1.
    2. اختر علامة تبويب الأذونات، ثم اختر سياسة الحاوية.
      1. في وحدة التحكم S3، حدد اسم الحاوية التي أنشأتها في القسم 1.
      2. اختر علامة تبويب الأذونات، ثم تأكد من تحديد إعدادات الوصول العامة.
      3. انقر فوق تحرير وقم بإلغاء تحديد:
        • "حظر سياسات الحاويات العامة الجديدة"
        • "حظر الوصول العام والوصول عبر الحسابات إذا كانت الحاوية ذات سياسات عامة"
      4. انقر فوق حفظ.
      5. في نموذج التأكيد الذي يظهر، اكتب "confirm" ثم انقر فوق تأكيد
      6. بينما لا تزال في علامة التبويب الأذونات، اختر سياسة الحاوية.  
    3. أدخل وثيقة السياسة التالية في محرر سياسة الحاوية لاستبدال [YOUR_BUCKET_NAME]باسم الحاوية التي أنشأتها في القسم 1:
    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Effect": "Allow", 
                "Principal": "*", 
                "Action": "s3:GetObject", 
                "Resource": "arn:aws:s3:::[YOUR_BUCKET_NAME]/*" 
            } 
        ] 
    }
    
    1. اختر حفظ لتطبيق السياسة الجديدة.
  • الخطوة 5. تمكين استضافة مواقع الويب

    تتوفر الكائنات في حاوية S3 افتراضيًا عبر عناوين URL ذات البنية http://.amazonaws.com//. لعرض الأصول من عنوان URL الرئيسي (مثل /index.html)، ستحتاج إلى تمكين استضافة موقع الويب على الحاوية. سيؤدي ذلك إلى إتاحة العناصر في نقطة نهاية موقع الويب الخاص بمنطقة AWS من الحاوية: s3-website-.amazonaws.com.

    يمكنك أيضًا استخدام نطاق مخصص لموقعك على الويب. على سبيل المثال http://www.wildrydes.com تمت استضافته على S3. لا تغطي ورشة العمل هذه إعداد نطاق مخصص، ولكن يمكنك العثور على تعليمات تفصيلية في الوثائق.

    في هذه الخطوة، ستستخدم وحدة التحكم لتمكين استضافة مواقع الويب الثابتة. يمكنك القيام بذلك في علامة تبويب الخصائص بعد تحديد الحاوية. قم بتعيين index.htmlكوثيقة الفهرس، واترك مستند الخطأ فارغًا. راجع وثائق تكوين حاوية لاستضافة موقع ثابت لمزيد من التفاصيل.


    1. من صفحة تفاصيل الحاوية في وحدة التحكم S3، اختر علامة تبويب الخصائص.
    2. اختر بطاقة استضافة مواقع الويب الثابتة.
    3. حدد استخدام هذه الحاوية لاستضافة موقع ويب وأدخل index.html لوثيقة الفهرس. اترك الحقول الأخرى فارغة.
    4. لاحظ عنوان URL لنقطة النهايةأعلى مربع الحوار قبل اختيار حفظ. ستستخدم عنوان URL هذا خلال بقية ورشة العمل لعرض تطبيق الويب. من هنا سيشار إلى عنوان URL هذا بعنوان URL الأساسي لموقعك على الويب.
    5. انقر فوق حفظ لحفظ التغييرات.
  • الخطوة 6. التحقق من صحة التنفيذ

    بعد إكمال خطوات التنفيذ تلك، يجب أن تكون قادرًا على الوصول إلى موقع الويب الثابت عن طريق زيارة عنوان URL الخاص بنقطة نهاية موقع الويب لحاوية S3.

    تفضل بزيارة عنوان URL الأساسي لموقعك على الويب (هذا هو عنوان URL الذي ذكرته في القسم السابق) في المتصفح الذي تختاره. سترى الصفحة الرئيسية لخدمة Wild Rydes معروضة. إذا كنت بحاجة إلى البحث عن عنوان URL الأساسي، فتفضل بزيارة وحدة التحكم S3، وحدد حاويتك، ثم انقر فوق استضافة موقع ويب ثابت في علامة تبويب الخصائص.

    إذا تم عرض الصفحة بشكل صحيح (انظر أدناه للحصول على لقطة شاشة كمثال)، فيمكنك الانتقال إلى الوحدة التالية لإدارة المستخدمين.