Azure Static Web Apps یک پلت فرم قدرتمند است که به شما کمک می کند تا وب سایت های ثابت را میزبانی کنید و این با مقیاس پذیری، امنیت و مزایای قابلیت اطمینان همراه است. من شما را از طریق فرآیند ساخت یک برنامه وب استاتیک در Azure، از ایجاد یک برنامه جدید و اتصال آن به مخزن کد، تا پیکربندی تنظیمات ساخت و استقرار خود، راهنمایی خواهم کرد.
چه یک توسعه‌دهنده باتجربه باشید و چه تازه شروع به کار کرده‌اید، این راهنمای گام به گام همه آنچه را که برای راه‌اندازی و اجرای برنامه‌های وب استاتیک Azure نیاز دارید در اختیار شما قرار می‌دهد.
فهرست مطالب
معرفی.
چرا برنامه وب استاتیک Azure؟
Azure Static Web Apps یک سرویس ابری از Microsoft Azure است که به شما امکان می دهد به راحتی برنامه های وب استاتیک را مستقر کرده و میزبانی کنید. از انواع مولدهای سایت استاتیک، فریمورک ها و کتابخانه های فرانت اند مانند Angular، React، Vue.js و غیره پشتیبانی می کند.
مزایای برنامه وب استاتیک Azure
-
استقرار و میزبانی ساده برنامه های وب استاتیک. شما باید به جای نگرانی در مورد زیرساخت، سرورها یا مقیاس پذیری، روی توسعه برنامه وب خود تمرکز کنید. این مقیاس خودکار را برای مدیریت ترافیک بالا فراهم می کند، بنابراین لازم نیست نگران افزایش یا کاهش دستی برنامه خود باشید.
-
امنیت بالا. ویژگی‌های امنیتی داخلی مانند گواهی‌های SSL و پشتیبانی از دامنه‌های سفارشی و همچنین گزینه‌های احراز هویت و مجوز یکپارچه را ارائه می‌کند. این بدان معنی است که برنامه وب شما در برابر حملات و دسترسی های غیرمجاز محافظت می شود.
-
مقرون به صرفه. این سرویس بر اساس مدل قیمت‌گذاری مبتنی بر مصرف در دسترس است، به این معنی که شما فقط برای منابعی که استفاده می‌کنید هزینه پرداخت می‌کنید. این آن را برای برنامه های تحت وب با اندازه کوچک تا متوسط ایده آل می کند، زیرا می توانید هزینه ها را پایین نگه دارید و در عین حال از مقیاس پذیری و ویژگی های امنیتی Azure بهره مند شوید.
ایجاد برنامه وب استاتیک
-
به پورتال Azure وارد شوید و یک منبع جدید ایجاد کنید (در صورت داشتن می توانید از یک منبع موجود استفاده کنید). می توانید از نوار جستجو در بالای پورتال استفاده کنید یا به گروه منابعی بروید که می خواهید برنامه وب را در آن ایجاد کنید.
-
گزینه “Static Web App” را از لیست منابع موجود انتخاب کنید.
-
برای ادامه روی دکمه Create کلیک کنید
از تصویر برای مرجع استفاده کنید
پیکربندی.
پس از کلیک بر روی دکمه ایجاد:
من). اشتراک مورد نظر خود و گروه منبع مورد استفاده را انتخاب کنید.
II). به برنامه وب استاتیک خود یک نام منحصر به فرد بدهید و طرح میزبانی مورد نظر خود را انتخاب کنید.
III). مخزن کد منبع را برای برنامه وب خود انتخاب کنید. برنامه‌های وب استاتیک Azure از مخازن مختلفی از جمله GitHub، Azure DevOps و Bitbucket پشتیبانی می‌کنند.
از تصویر برای مرجع استفاده کنید
- با استفاده از دکمه روشن وارد حساب GitHub خود شوید مرحله 3 بالا (این شما را به صفحه دیگری می برد)
IV). نام سازمان خود را انتخاب کنید که همان حسابی است که در مرحله قبل پیوند داده اید.
- مخزنی را انتخاب کنید که می خواهید برنامه از آن باشد.
- یک شاخه را از مخزن انتخاب کنید.
v). در قسمت Build Details زبانی را انتخاب کنید که وب سایت استاتیک شما ساخته شده است (من با HTML کار می کنم)
قسمت App location به محل خروجی ساخت برنامه وب شما اشاره دارد، که دایرکتوری حاوی فایل هایی است که باید توسط وب سرور شما ارائه شوند.
به‌طور پیش‌فرض، برنامه‌های وب استاتیک Azure به دنبال یک فهرست خروجی ساخت به نام dist می‌گردند، اما این ممکن است بسته به پیکربندی پروژه شما متفاوت باشد.
در اینجا نحوه یافتن دایرکتوری خروجی ساخت پروژه خود آورده شده است:
-
مخزن GitHub خود را در دستگاه محلی خود کلون کنید.
-
به دایرکتوری پروژه خود بروید و به دنبال دایرکتوری حاوی فایل های ساخته شده بگردید. این ممکن است نامگذاری شود
dist،build،public، یا چیز دیگری بسته به پیکربندی پروژه شما. -
پس از یافتن دایرکتوری، مسیر را به دایرکتوری کپی کنید. این مسیری است که در قسمت App location وارد خواهید کرد.
اگر پروژه شما مانند پروژه من یک پروژه HTML خالص است، قسمت “App location” را روی دایرکتوری ریشه پروژه خود تنظیم کنید، جایی که فایل index.html شما در آن قرار دارد. برای این کار به سادگی می توانید وارد شوید.(یک نقطه) به عنوان مقدار فیلد “مکان برنامه”.
- اگر با آن کار می کنید، مکان API را مشخص کنید.
- محل خروجی مشخص می کند که فایل های ساخته شده پس از تکمیل فرآیند ساخت کجا ذخیره شوند. محل خروجی باید دایرکتوری باشد که در مخزن شما وجود دارد. مکان خروجی می‌تواند مانند فیلد «مکان برنامه» یا دایرکتوری دیگری در مخزن شما باشد.
vi). پیش نمایش گردش کار:
-
این به شما امکان می دهد فایل YAML تولید شده را برای گردش کار GitHub Actions که برای ساخت و استقرار برنامه وب استاتیک شما استفاده می شود، مشاهده کنید.
-
اگر می‌خواهید جزئیات گردش کار GitHub Actions را قبل از ایجاد آن ببینید، یا اگر می‌خواهید فایل گردش کار را برای رفع نیازهای خاص خود سفارشی کنید، می‌تواند مفید باشد.
-
پس از پیش نمایش فایل گردش کار، می توانید تنظیمات ساخت خود را ذخیره کنید و برنامه وب استاتیک Azure خود را ایجاد کنید، یا می توانید قبل از ایجاد برنامه تغییراتی در فایل گردش کار ایجاد کنید. اگر تصمیم به ایجاد تغییرات دارید، باید فایل YAML را در مخزن GitHub خود به روز کنید و تغییرات را قبل از ایجاد Azure Static Web App خود انجام دهید.
از تصویر برای مرجع استفاده کنید
استقرار به Azure.
از تصویر برای مرجع استفاده کنید
- می توانید URL ارائه شده را باز کنید، اگر صفحه شما مانند تصویر زیر است، نگران نباشید زیرا اولین باری که برنامه خود را اجرا می کنید، ممکن است چند لحظه طول بکشد تا فرآیند استقرار کامل شود و برنامه از طریق URL قابل دسترسی باشد. .
- پس از تکمیل استقرار، باید بتوانید وب سایت خود را که به تازگی مستقر کرده اید مشاهده کنید.
نتیجه
- تبریک می‌گوییم، شما با موفقیت اولین برنامه وب استاتیک خود را در Azure ساخته و اجرا کردید! با دنبال کردن مراحل ذکر شده در این مقاله، یاد گرفتید که چگونه از قدرت Azure Static Web Apps برای میزبانی و مدیریت وب سایت های ثابت خود استفاده کنید. از اتصال مخزن کد و پیکربندی تنظیمات ساخت تا استقرار و نظارت بر برنامه خود، اکنون درک کاملی از کل فرآیند دارید. مزایای بسیاری را که Azure ارائه می دهد را در نظر داشته باشید، با برنامه های وب استاتیک Azure، می توانید بر توسعه و ارائه محتوای عالی به کاربران خود تمرکز کنید، در حالی که Azure مراقب بقیه است.
از اینکه این مقاله را خواندید متشکرم و امیدوارم برایتان مفید بوده باشد. کد نویسی مبارک!
