دیپلوی آسان تر از همیشه

سلام

اگه نوشته های قبلی من رو دیده باشین میبینین که شروع کردم تا چیزایی که باهاشون سر وکار دارم رو به هم چسبوندن ... اکسیر سایتیه که دوسش دارم ولی محیطش نیاز های من رو رفع نمیکنه قرار بود یه فرانت برای استفاده از api سایت اکسیر بزنم . دایکیومنت api رو میتونین از apidocs.exir.io ببینین .. که خب تا اینجا ی کار همه کاری کردم به جز زدن اون فرانت ...ابزار های که دوست داشتم رو در کنار هم کانفیگ کردم و رسیدم به یه ترکیب فعلا خوب که برای پروژه های بعدیم ازشون استفاده میکنم. البته ناگفته نماند که یه کمی جلو هم رفتیما .خب بریم سر اصل مطلب

کارایی که تا اینجا کردم رو میتونین داخل ریپوی زیر ببینین

من برای توسعه نیاز داشتم که بعد از هر بار پوش کردن یه نسخه از استوری بوک و یه نسخه از وبسایت ساخته بشه. توو قسمت های قبل شروع کردم این کار رو با github action پیش بردن و حالا میشه گفت که تا حدودی اتفاق های خوبی افتاده که گفتم شاید دونستنش به درد بقیه هم بخوره.

پدیده ای به نام NOW

قطعا همه now رو میشناسن ...یکی ازمحصولات شرکت zeit که توسعه دهنده ی nextjs هم هست . فعال کردن now تقریبا 20 ثانیه طول میکشه و بعد از اون هر بار که شما تغییری رو کامیت و پوش میکنی now یه نسخه پروداکشن از سایت شما بالا میاره و لینکش رو به صورت کامنت به انتهای کامیت تون اضافه میکنه ...لعنتی خیلی معتاد کننده ست

برای فعال کردنش کافیه از ستینگ وارد تب اینتگریت بشید و now رو به پروژه تون وصل کنید

بعد از اون هر وقت که کد هاتون رو پوش کنین اگه مشکلی نداشته باشه در انتهاش همچین کامنتی اضافه میشه.به همین اسانی به همین خوشمزگی

خب اینجوری خیالمون از بابت خود وبسایت راحته ولی استوری بوک رو چجوری نگه داریم؟

اولین راهی که به ذهنمون میرسه صفحات استاتیک گیت هابه پس

استفاده از Github Pages

میخوایم استوری بوکمون رو روی گیت هاب پیج بالا بیاریم پس اول نیازه که گیت هاب پیج رو فعال کنیم.برای این کار از ستینگ قسمت گیت هاب پیچ رو پیدا کنین و فعالش کنین

من حال ندارم هر وقت که تغییری میدم بیام و استوری بوک رو بیلد بگیرم و فایل هاش رو روی این برنچ پوش کنم پس میریم برای خودکار سازی. برای شروع کتابخونه ی زیر رو نصب میکنیم و این قسمت هارو به فایل package.json اضافه میکنیم

npm install @storybook/storybook-deployerpackage.json

&quotscript&quot:{
&quotbuild-storybook&quot: &quotbuild-storybook -c .storybook -o .out -s ./public&quot, 
&quotdeploy-storybook&quot: &quotstorybook-to-ghpages&quot,
}

&quotstorybook-deployer&quot: {
 &quotgitUsername&quot: &quotGH Pages Bot&quot,
 &quotgitEmail&quot: &quothello@ghbot.com&quot,
 &quotcommitMessage&quot: &quotDeploy Storybook to GitHub Pages&quot 
    },

حالا با زدن دستور npm run deploy-storybook اول استوری بوک بیلد میشه و بعد نسخه بیلد شده خودکار پوش میشه به ریپوزیتوری...این روش خیلی خوبه و جلو تر میبینین که میشه حتی اسن دستور رو هم سپرد به github action تا خودش اون رو جرا کنه و نیاز نباشه ما کاری کنیم . ولی مشکلی که داره اینه که همیشه فقط آخرین نسخه رو داریم و نمیتونیم تغییرات رو نگه داری کنیم . من دلم میخواد وقتی فایلی رو تغییر میدم یه نسخه از استوری بوک فعلی همراه اون کامیت ذخیره بشه . کمی گشتم و رسیدم به سرویس surge.sh . واقعا سرویس لذت بخشیه . حتما بهش سر بزنین

استفاده از surge

فرق surge با now اینه که surge فقط وبسایت های استاتیک رو ساپورت میکنه که خب ما هم میخوایم استوری بوک رو که استاتیکه هندل کنیم .. پس بریم ببینیم چطوریه!

اول نصبش میکنیم

npm install --global surge

وقتی که داخل پوشه ی پروژه بودین مثل مثال زیر میتونین ازش استفاده کنین

ولی خب من دنبال خودکار کردنم.پس با کمی سرچ به یه اکشن خوب توی گیت هاب رسیدم

اگه وقتی داخل surge لاگین هستین دستور surge token رو بزنین بهتون توکن میده که میتونین ازش توی گیت هاب اکشن استفاده کنین .البته یه راه دیگه ه مبا استفاده از github hook داره که هنوز تستش نکردم ولی میتونین از اینجا دنبالش کنین.. کلا هدف از این نوشته ها اینه که روندی که طی کردم یادم بمونه

کاری که الان میخوام بکنم اینه که فایل کانفیگ اکشنم رو تغییر بدم تا هر وقت تغییری رو پوش کردم اول پروژه رو بیلد و تست کنه . بعد استوری بوک رو بسازه و دیپلوی کنه روی github page و بعد یه نسخه از استوری بوک رو هم دیپلوی کنه روی surge و اسم دامنه ای که برای این کار استفاده میشه رو به صورت تابعی از شماره کامیت میسازم تا نسخه های متفاوت رو همزمان داشته باشم.و در انتها میخوام که اون آدرس url به صورت کامنت به آخر کامیت اضافه بشه که خب این قسمت آخرش رو بلد نبودم برای همین توی استک فلو پرسیدم و خیلی زود یکی پیدا شد که جواب رو بدونه. لینکش اینجاست .بعدش هم که ساخت ایمیج از روی داکر فایل و اضافه کردنش به ریجستریه.

شت گویی رو کم میکنم و میزارم باقی حرف هارو خود کد بزنه... البته این هنوزم جای کار داره ها ولی تا اینجا داره کار میکنه .بعدا باید برای برنچ های مختلف رول های مجزا بنویسم یا بین پوش و پول رکوئست تفاوت قائل شم و ...

{بازم مثل همیشه نمیشه اینجا مثل آدم کد نوشت...درستش کنین دیگه}

https://github.com/straxico/react-strix/blob/master/.github/workflows/config.yml

نتیجه بعد از هر بار پوش کردن همچین صحنه ای هستش