بررسی اجمالی:
برای این پروژه می خواهیم وب سایتی ایجاد کنیم که تغییر چندانی نداشته باشد و آن را در سرویسی به نام S3 ذخیره کنیم. به‌جای به‌روزرسانی دستی وب‌سایت هر زمان که تغییراتی ایجاد می‌کنیم، از ابزاری به نام CodePipeline برای خودکار کردن آن استفاده می‌کنیم. CodePipeline کدهای ذخیره شده ما در GitHub را مشاهده می کند، جایی که ما فایل اصلی وب سایت خود را به نام index.html نگه می داریم. هر زمان که در آن فایل تغییراتی ایجاد کنیم، CodePipeline به طور خودکار وب سایت را برای ما به روز می کند.
برای اینکه وب سایت سریعتر و ایمن تر شود، از ابزار دیگری به نام CloudFront استفاده خواهیم کرد. این مانند یک سرور خاص عمل می کند که کپی های وب سایت ما را در مکان های مختلف ذخیره می کند. هنگامی که شخصی سعی می کند با استفاده از پروتکل HTTP ناامن به وب سایت ما دسترسی پیدا کند، CloudFront به سرعت او را به پروتکل امن HTTPS هدایت می کند که ایمن تر است. به این ترتیب وب سایت ما برای بازدیدکنندگان سریعتر و امن تر خواهد بود.
الزامات پروژه:
تیم شما از شما خواسته است تا بدون کار دستی، راه ساده‌تری برای استقرار یک وب‌سایت ایجاد کنید. در حال حاضر، توسعه‌دهندگان باید هر به‌روزرسانی جدیدی را که برای کد ایجاد می‌کنند، به‌صورت دستی آزمایش کنند. وظیفه شما این است که با دادن یک آدرس وب سایت به توسعه دهندگان که می توانند فوراً تغییرات خود را مشاهده کنند، کار را ساده تر کنید. همچنین باید یک تغییر کوچک در کد ذخیره شده در GitHub ایجاد کنید تا بررسی کنید که آیا همه چیز به درستی کار می کند یا خیر. این امر باعث صرفه جویی در زمان و به روز رسانی وب سایت برای توسعه دهندگان می شود.
مراحل
- یک مخزن جدید در GitHub ایجاد کنید و محتوای ثابت وب سایت را بارگیری کنید.
- یک سطل S3 برای میزبانی وب سایت استاتیک خود ایجاد و پیکربندی کنید.
- یک توزیع CloudFront ایجاد کنید و دسترسی به محتوای سطل S3 را با OAI محدود کنید
- ایجاد یک خط لوله CI/CD با استفاده از *سرویس AWS Codepipeline *.
- مخزن خود را به عنوان مرحله منبع Codepipeline تنظیم کنید که هنگام به‌روزرسانی یک مخزن GitHub فعال می‌شود.
- برای مرحله استقرار سطل S3 خود را انتخاب کنید.
- خط لوله را مستقر کنید و بررسی کنید که می توانید به وب سایت استاتیک برسید.
- کد موجود در github خود را به‌روزرسانی کنید تا تأیید کنید که خط لوله راه‌اندازی شده است. این می تواند به سادگی تغییر در فایل Readme باشد زیرا هر تغییری در فایل ها باید گردش کار را آغاز کند.
مرحله 1:
یک مخزن جدید در GitHub ایجاد کنید و محتوای وب سایت ثابت را بارگیری کنید.
https://github.com/ProsperAgada/deploy-static-website-using-AWS-Code-Pipeline-S3-and-GitHub-new.git می توانید این مخزن را شبیه سازی کنید.
گام 2:
سطل S3 ایجاد کنید
آ. به S3 -> بروید ایجاد سطل.
ب علامت را بردارید
همه دسترسی های عمومی را مسدود کنید
و تصدیق -> ايجاد كردن
ج. محتوای وب سایت استاتیک را در سطل ایجاد شده آپلود کنید.
د به سطل خود -> خواص -> ویرایش میزبانی وب سایت استاتیک بروید
ه. میزبانی وب سایت Static را فعال کنید و سند فهرست خود را اضافه کنید
مرحله 3:
یک توزیع CloudFront ایجاد کنید و دسترسی به محتوای سطل S3 را با OAI محدود کنید
آ. به Cloudfront -> بروید ايجاد كردن
ب جزئیات Origin را در منبع توزیع اضافه کنید، بنابراین مسیر S3 را در آنجا اضافه کنید.
ج. index.html را به عنوان شی ریشه پیش فرض خود وارد کنید
CloudFront Distribution شما با این انجمن پیکربندی سریع آماده است.
د برای دسترسی به وب سایت، نام دامنه توزیع Cloudfront را در یک مرورگر کپی و جایگذاری کنید
مرحله 4:
** پیاده سازی CI/CD از طریق AWS CodePipeline**
مرحله 5:
حساب GitHub را به CodePipeline متصل کنید
مرحله 6:
CodePipeline را پیکربندی کنید و خط لوله CI/CD را مستقر کنید
آ. می توانید از مرحله ساخت رد شوید -> create
مرحله 7:
حیرت آور!!.. خط لوله ایجاد شده است، در مرحله بعد باید آن را تأیید کنیم.
مرحله 8:
بررسی عملکرد خط لوله CI/CD
به مخزن github بروید و هر فایلی را ویرایش کنید، در مورد من فایل Readme را ویرایش خواهم کرد
پس از انجام این کار، متوجه خواهید شد که خط لوله راه اندازی شده است،
در نهایت، برای دسترسی به وب سایت، نام دامنه توزیع cloudfront را در یک مرورگر جایگذاری کنید
بله هنوز هم می‌توان به وب‌سایت دسترسی پیدا کرد، برای مشاهده موارد بیشتر، روی دکمه “بیشتر بگویید” کلیک کنید.
نتیجه
در پایان، اگر تمام مراحل ذکر شده در بالا را دنبال کنید، در استقرار یک وب سایت ثابت با AWS Codepipeline با استفاده از Github و سطل S3 موفق خواهید شد.
