{"id":"l-aws-4-1","courseId":"aws-cloud-foundations","lang":"ar","kind":"lesson","summary":"انشر الواجهة الأمامية لـ Lantern من bucket خاص في S3 عبر Amazon CloudFront مع origin access control، وHTTPS على نطاق مخصّص، وترويسات cache مدروسة، وعمليات إبطال (invalidations).","html":"

أتذكر مهرجان طعام الشارع الذي أسقط Lantern؟ معظم تلك الطلبات كانت لبضعة ملفات هي نفسها: الصفحة الرئيسية، وملف أنماط، وJavaScript، وملصق واحد. الواجهة الأمامية لـ Lantern تطبيق Vite يُبنى إلى ملفات ثابتة، فلا يحتاج إلى خادم أصلًا. إنه يحتاج إلى مكان يحفظ فيه الملفات، Amazon S3، وإلى cache عالمي أمامه، Amazon CloudFront.

\n

الصورة العامة

\n
\n يطلب المتصفّح lantern.example عبر HTTPS من موقع حافة في CloudFront. إذا وُجد الملف في الـ cache يجيب موقع الحافة مباشرة. وإذا لم يوجد، يوقّع CloudFront طلبًا عبر origin access control إلى الـ bucket الخاص في S3، الذي لا يسمح إلا لذلك الـ distribution.\n \n المتصفّح\n \n CloudFront edge\n cache\n \n S3 bucket\n خاص، BPA مفعّل\n \n HTTPS\n \n cache hit\n \n miss: طلب موقَّع\n سياسة الـ bucket: السماح بـ s3:GetObject لهذا الـ distribution فقط\n
يصل الزوّار إلى موقع حافة قريب؛ ولا يبلغ الـ bucket الخاص إلا ما لم يوجد في الـ cache
\n

معظم الطلبات cache hits، يجيب عنها موقع حافة قريب من الزائر دون لمس S3. وعند الـ miss (عدم وجود الملف في الـ cache)، يجلب CloudFront الملف من الـ bucket، موقّعًا الطلب عبر origin access control (OAC). يبقى الـ bucket خاصًّا، مع تفعيل Block Public Access، وتسمح سياسته بالقراءة من ذلك الـ distribution وحده.

\n

خطوة بخطوة

\n

1. ابنِ التطبيق وأنشئ bucket خاصًّا

\n
Terminal
npm run build                      # Vite writes dist/\naws s3 mb s3://lantern-site-prod --region eu-west-1
\n

الـ bucket الجديد خاص افتراضيًا. لا تفعّل استضافة المواقع الثابتة: يحتاج OAC إلى نقطة النهاية العادية للـ bucket، أما نقطة نهاية الموقع فلا تتحدّث إلا HTTP وتتطلّب وصولًا عامًّا.

\n

2. ارفع الملفات بترويسات الـ cache الصحيحة

\n

يضع Vite قيمة hash للمحتوى في أسماء ملفات الأصول (assets/index-4f8a1c.js)، فيحصل الملف المتغيّر دائمًا على اسم جديد. يمكن تخزين هذه الملفات مؤقتًا لمدة سنة. أما index.html فيحتفظ باسمه، لذا يجب أن تتحقّق المتصفّحات وCloudFront دائمًا من وجود نسخة أحدث منه:

\n
Terminal
aws s3 sync dist/ s3://lantern-site-prod/ --delete \\\n  --exclude \"index.html\" \\\n  --cache-control \"public,max-age=31536000,immutable\"\n\naws s3 cp dist/index.html s3://lantern-site-prod/index.html \\\n  --cache-control \"no-cache\"
\n

يزيل --delete من الـ bucket الملفات التي لم تعد موجودة في dist/، كي لا تتراكم الحزم القديمة.

\n

3. احصل على شهادة في us-east-1

\n

لتفعيل HTTPS على lantern.example، اطلب شهادة عامة من AWS Certificate Manager في us-east-1. لا يستخدم CloudFront إلا الشهادات من تلك الـ Region، أيًّا كانت الـ Region التي فيها الـ bucket الخاص بك. تحقّق منها بسجل DNS الذي يعطيك إياه ACM.

\n
Terminal
aws acm request-certificate --region us-east-1 \\\n  --domain-name lantern.example --validation-method DNS
\n

4. أنشئ الـ distribution

\n

في console الـ CloudFront، أنشئ distribution بالإعدادات التالية:

\n\n

إذا كانت الواجهة الأمامية تستخدم مسارات من جهة العميل مثل /events/street-food، فهذه المسارات لا توجد كملفات، فيجيب S3 عبر OAC بالرمز 403. أضف استجابة خطأ مخصّصة تقدّم /index.html بالرمز 200 لأخطاء 403، أو CloudFront Function صغيرة تعيد كتابة تلك المسارات، كي تفتح الروابط العميقة المتداولة على وسائل التواصل الصفحة الصحيحة بدلًا من صفحة خطأ.

\n

5. اسمح لذلك الـ distribution وحده بقراءة الـ bucket

\n
site-bucket-policy.json
{\n  \"Version\": \"2012-10-17\",\n  \"Statement\": [\n    {\n      \"Sid\": \"AllowCloudFrontServicePrincipalReadOnly\",\n      \"Effect\": \"Allow\",\n      \"Principal\": { \"Service\": \"cloudfront.amazonaws.com\" },\n      \"Action\": \"s3:GetObject\",\n      \"Resource\": \"arn:aws:s3:::lantern-site-prod/*\",\n      \"Condition\": {\n        \"StringEquals\": {\n          \"AWS:SourceArn\": \"arn:aws:cloudfront::111122223333:distribution/E2QWRUHEXAMPLE\"\n        }\n      }\n    }\n  ]\n}
\n

الشرط هو ما يجعل هذا آمنًا: من دونه، يستطيع أي distribution في CloudFront في أي حساب قراءة الـ bucket.

\n

6. وجّه DNS واختبر

\n

أنشئ سجلات alias من نوع A وAAAA لـ lantern.example تشير إلى الـ distribution (في Amazon Route 53، أو كسجل CNAME لدى مزوّد DNS آخر إن كان نطاقًا فرعيًا). ثم تحقّق من أن https://lantern.example يُحمَّل، وأن رابط الـ bucket نفسه يعيد 403 Access Denied: هذا الـ 403 يثبت أن الـ bucket خاص.

\n

7. في كل عملية نشر

\n

كرّر الخطوة 2، ثم أبطل الملف الوحيد الذي يحتفظ باسمه:

\n
Terminal
aws cloudfront create-invalidation \\\n  --distribution-id E2QWRUHEXAMPLE --paths \"/index.html\"
\n\n

التكلفة والأمان في لمحة

\n

تدفع لـ S3 مقابل التخزين والطلبات، ومع وجود CloudFront في الأمام، لا يرى S3 إلا حالات الـ miss. النقل من S3 إلى CloudFront لا يُحتسب؛ ويحتسب CloudFront الطلبات والبيانات المقدَّمة للزوّار بنظام الدفع حسب الاستخدام، أو يمكنك اختيار إحدى خططه ذات السعر الثابت التي تجمع الـ CDN مع AWS WAF وDNS وأرصدة S3 بسعر شهري ثابت دون رسوم تجاوز. وفي الحالتين، تهبط ذروة المهرجان الآن على مواقع حافة بُنيت لتحمّلها.

\n

من ناحية الأمان: bucket خاص واحد، وسياسة bucket واحدة بشرط SourceArn، وHTTPS فقط، وترويسات الأمان مفعّلة. في الدرس التالي تضيف الجزء الديناميكي: الـ API الخاص بتأكيد الحضور.

\n","toc":[{"id":"sec-1","text":"الصورة العامة","level":2},{"id":"sec-2","text":"خطوة بخطوة","level":2},{"id":"sec-3","text":"1. ابنِ التطبيق وأنشئ bucket خاصًّا","level":3},{"id":"sec-4","text":"2. ارفع الملفات بترويسات الـ cache الصحيحة","level":3},{"id":"sec-5","text":"3. احصل على شهادة في us-east-1","level":3},{"id":"sec-6","text":"4. أنشئ الـ distribution","level":3},{"id":"sec-7","text":"5. اسمح لذلك الـ distribution وحده بقراءة الـ bucket","level":3},{"id":"sec-8","text":"6. وجّه DNS واختبر","level":3},{"id":"sec-9","text":"7. في كل عملية نشر","level":3},{"id":"sec-10","text":"التكلفة والأمان في لمحة","level":2}],"takeaways":["يبقى الـ bucket خاصًّا؛ يقرؤه CloudFront عبر origin access control، وتسمح سياسة الـ bucket لذلك الـ distribution وحده.","يعمل origin access control مع نقطة النهاية العادية للـ bucket، لا مع نقطة النهاية الخاصة باستضافة المواقع الثابتة في S3.","شهادة النطاق المخصّص في CloudFront يجب أن تكون في AWS Certificate Manager في us-east-1، مطلوبةً هناك أو مستوردةً إليها.","امنح ملفات الأصول ذات الأسماء المحتوية على hash عمر cache طويلًا، وامنح index.html عمرًا قصيرًا، كي تظهر عمليات النشر دون إبطال جماعي.","التقديم من مواقع الحافة يمتصّ ذروات الزيارات ويقلّل نقل البيانات من الـ origin."],"further":[{"title":"Restrict access to an Amazon S3 origin","url":"https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html"},{"title":"Get started with a CloudFront standard distribution","url":"https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/GettingStarted.SimpleDistribution.html"},{"title":"Requirements for using SSL/TLS certificates with CloudFront","url":"https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/cnames-and-https-requirements.html"},{"title":"Invalidate files to remove content","url":"https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html"}],"quiz":[{"q":"

لماذا يُبقي Lantern الـ bucket الخاص بالموقع خاصًّا بدلًا من تفعيل استضافة المواقع الثابتة في S3 وجعله عامًّا؟

","options":[{"text":"الـ buckets العامة لا تستطيع تقديم ملفات HTML.","why":"الـ bucket العام مع استضافة المواقع يقدّم HTML دون مشكلة. الأسباب هي الأمان والتحكّم، لا القدرة."},{"text":"يرفض CloudFront تخزين المحتوى من الـ buckets العامة مؤقتًا.","why":"يستطيع CloudFront استخدام نقطة نهاية موقع عامة كـ origin مخصّص. يتجنّبها Lantern لأنها تترك الـ bucket مفتوحًا للوصول المباشر."},{"text":"استضافة المواقع الثابتة في S3 لم تعد متاحة.","why":"نقاط نهاية المواقع ما زالت موجودة. لكنها لا تقدّم إلا HTTP، وتتطلّب وصول قراءة عامًّا."},{"text":"مع origin access control لا يستطيع الزوّار الوصول إلى الملفات إلا عبر CloudFront، وعبر HTTPS، ولا يحتاج الـ bucket أبدًا إلى وصول عام.","why":"صحيح. سياسة bucket واحدة تمنح القراءة لـ distribution واحد، ويبقى Block Public Access مفعّلًا."}],"answer":3},{"q":"

طلبت شهادة لـ lantern.example من AWS Certificate Manager في eu-west-1، لكن CloudFront لا يعرضها. لماذا؟

","options":[{"text":"لا يستخدم CloudFront إلا الشهادات الصادرة في Region شرق الولايات المتحدة (شمال فيرجينيا)، us-east-1.","why":"صحيح. CloudFront خدمة عامّة يجب أن تُطلب شهاداتها أو تُستورد في us-east-1."},{"text":"تحتاج الشهادة إلى بضع ساعات لتُنسخ إلى كل الـ Regions.","why":"شهادات ACM لا تُنسخ أبدًا بين الـ Regions. الشهادة توجد فقط في الـ Region التي أنشأتها فيها."},{"text":"يتطلّب CloudFront شهادات من جهة إصدار خارجية.","why":"شهادات ACM العامة تعمل مع CloudFront، دون أي رسوم على الشهادة نفسها."}],"answer":0},{"q":"

بعد عملية نشر، ما زال الزوّار يرون النسخة القديمة من الصفحة الرئيسية لساعات، بينما تُحمَّل ملفات JavaScript الجديدة بشكل سليم. ما السبب الأرجح؟

","options":[{"text":"لم يرفع S3 sync ملف index.html الجديد.","why":"هذا ممكن، لكن ملفات JS الجديدة ذات الـ hash وصلت، فعملية الرفع نفسها جرت. العَرَض يشير إلى الـ cache."},{"text":"يقدّم CloudFront نسخة مخزّنة مؤقتًا من index.html لأنه رُفع بعمر cache طويل.","why":"صحيح. امنح index.html ترويسة قصيرة أو no-cache، وأبطل /index.html بعد كل عملية نشر."},{"text":"المتصفّحات لا تخزّن HTML مؤقتًا أبدًا، فلا بد أنها مشكلة في DNS.","why":"المتصفّحات وشبكات CDN كلاهما يخزّن HTML مؤقتًا وفق ترويسة Cache-Control. ولا يحدّد DNS أيّ نسخة من الملف تُقدَّم."}],"answer":1}],"exercise":{"kind":"order","items":["build","bucket","upload","cert","distribution","policy","dns","verify"],"title":"انشر الموقع الثابت","prompt":"

رتّب خطوات أول عملية نشر للواجهة الأمامية لـ Lantern في الإنتاج ترتيبًا يعمل. يبقى الـ bucket خاصًّا، ولا يُقدَّم الموقع إلا عبر CloudFront على https://lantern.example. أنهِ أعمال البناء وS3 أولًا، ثم انتقل إلى الشهادة وCloudFront وDNS.

\n","hints":["لا يمكنك رفع ملفات لم تبنِها، ولا الرفع إلى bucket غير موجود.","يحتاج الـ distribution إلى الشهادة عندما تربط به النطاق المخصّص، وتحتاج سياسة الـ bucket إلى ARN الـ distribution.","يأتي DNS أخيرًا قبل الاختبار، كي لا يصل الزوّار أبدًا إلى distribution نصف مُعَدّ."],"explanation":"

ابنِ أولًا كي يوجد ما ترفعه، ثم أنشئ الـ bucket الخاص وزامن الملفات مع ترويسات الـ cache الخاصة بها. يجب أن توجد الشهادة (وأن يُتحقَّق منها) في us-east-1 قبل أن تستطيع ربط lantern.example بالـ distribution. ويجب أن يوجد الـ distribution قبل سياسة الـ bucket، لأن الشرط AWS:SourceArn في السياسة يسمّي ARN الـ distribution. ولا توجّه DNS إليه إلا حين يستطيع CloudFront قراءة الـ bucket، والفحص الأخير يثبت النصفين: الموقع يُحمَّل عبر CloudFront، والـ bucket يرفض الطلبات المباشرة بالرمز 403.

\n","checkLabels":{},"itemText":{"build":"شغّل npm run build لإنتاج المجلّد dist/.","bucket":"أنشئ الـ bucket الخاص lantern-site-prod في الـ Region الخاصة بـ Lantern، مع إبقاء Block Public Access مفعّلًا.","upload":"ارفع dist/ باستخدام aws s3 sync، مع ترويسات cache طويلة للأصول ذات الـ hash وno-cache لـ index.html.","cert":"اطلب شهادة ACM لـ lantern.example في us-east-1 وتحقّق منها عبر DNS.","distribution":"أنشئ الـ distribution في CloudFront مع origin access control، وindex.html ككائن جذر افتراضي، والشهادة مرفقة.","policy":"أضف سياسة الـ bucket التي تسمح بـ s3:GetObject لـ cloudfront.amazonaws.com مع شرط AWS:SourceArn لهذا الـ distribution.","dns":"أنشئ سجلات alias من نوع A وAAAA لـ lantern.example تشير إلى الـ distribution.","verify":"تحقّق من أن https://lantern.example يُحمَّل وأن الرابط المباشر للـ bucket يعيد 403."}},"words":645,"readMinutes":4}