بخش دوم (فرانت اند)- Continuous Deployment ساده برای خود راه اندازی کنید!!

قبلا، توی پست (Continuous Deployment ساده برای خود راه اندازی کنید!!) در مورد چگونگی راه اندازی یک CD سبک و جمع و جور و شخصی مطلبی منتشر کردم، که خلاصش این میشه که میشه با استفاده از قابلیت هوک گیت (Git hooks) و Build Tool هایی مثل Apache Maven کاری کرد، که وقتی توی مرحله دولوپ توی IDE خواستید نسخه جدید روی سرور قرار بدید، لازم نباشه، هربار پروژه رو کامپایل کنید و بصورت دستی فایل کامپایل شده رو به سرور منتقل کنید و اپلیکیشن قبلی رو قطع کنید و اپلیکشن جدید رو ران کنید...

توی پست قبلی فقط چگونگی اتوماتیک کردن این ماجرا برای بک اند رو گفتم، هرچند اگه Front-end هم با پروژه ی Back-end یکی باشه و بصورت static فایل داخل jar بک اند قرار بگیره، میتونیم با تنظیمات و پلاگین های خاصی موقع بیلد کردن پروژه روی سرور (بعد از push) کاری کنیم که قسمت front هم بیلد شه و نیازی مطالب این پست نباشه.

هرچند علت اصلی نوشتن این پست ها و راه اندازی این CD ساده و سبک، این هستش که ما سرورمون ریسورس های کمی داره و نمیتونیم از ابزار های قدرتمند CI/CD استفاده کنیم و به همین دلیل معمولا امکان build پروژه های جاوااسکریپتی روی سرور با ریسورس (RAM) پایین وجود نداره.

به همین خاطر، ترجیح بر اینه که بیلد کردن Front پروژه توی سیستم خود دولوپر انجام بشه و با کمترین عملیات و زمان و ترافیک مصرفی نسخه Front روی سرور آپدیت بشه.

خب بریم سر اصل ماجرا...

در قدم اول بهتره که deployment فرانت و بک از هم جدا باشه، من از nginx برای deploy کردن فرانت استفاده کردم.

پس بروی سرور nginx رو نصب و راه اندازی می کنیم:

sudo apt update

sudo apt install nginx

بعد از نصب nginx باید تنظیمات site در صورت نیاز انجام بشه و اگه نیازه reverse-proxy ها ست بشن که رکوئست های مربوط به Back-end به ip/port بک اندمون منتقل بشن.

ما فرضمون بر اینکه که محل قرار گیری فایل های سرور nginx توی مسیر /var/www/html/ هستش

فرض دوم این هستش که از ویندوز و power-shell استفاده می کنیم. اگه از لینوکس یا سیستم دیگه ای استفاده می کنید باید تغییرات لازم رو انجام بدید.

فرض سوم این هستش که نرم افزار PUTTY رو روی ویندوز نصب کردید. که همراهش tools های دیگه هم مثل plink و pscp و puttygen نصب شده.

برای اتصال ssh به سرور با private-key و public-key و اینکه مجبور نباشیم هرسری password وارد کنیم لازمه که با نرم افزار puttygen که همراه PUTTY نصب شده، جفت کلید مخصوص خودمون رو تولید کنیم. توضیحات انجام این کار اینجا گفته شده:

Use SSH Keys With PuTTY On Windows

بصورت خلاصه اینطور میشه که اول باید جفت کلید رو با این نرم افزار تولید کنید، و بعد private-key رو توی سیستم خودتون ذخیره کنید و public-key رو روی سرور ست کنید. و بعد توی درخواست هایی که بعدا با putty به سرور ارسال می کنیم لازمه مسیر private-key رو به دستورات اضافه کنیم تا درخواست هامون sign بشن و توسط سرور شناسایی بشن. (اینجا هم فرض کردیم که کلید خصوصی رو با اسم privateKey.ppk ذخیره کردید)

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

1- دستور بیلد فرانت با webpack یا هرچیز مشابه دیگه انجام بشه و کد فرانت بیلد بشه

2- فایل های بیلد شده رو zip کنیم تا حجمش کمتر بشه و زمان انتقالش هم کاهش پیدا کنه

3- فایل zip رو با ssh به سرور منتقل کنیم و بروی سرور extract کنیم.

cd [PATH_TO_PROEJCT]
npm run webpack:prod
cd [PATH_TO_PROEJCT]\target\classes\static
jar -cMf static.zip ./
Start-Process 'C:\PUTTY_PATH\pscp.exe' -ArgumentList (&quot-scp -i [PATH_TO_KEY]\privateKey.ppk [PATH_TO_PROEJCT]\target\classes\static\static.zip [USER_NAME]@[SERVER_IP]:/var/www/html/&quot)
plink -batch -ssh -i &quot[PATH_TO_KEY]\privateKey.ppk&quot [USER_NAME]@[SERVER_IP] &quotcd /var/www/html; jar xvf static.zip&quot

با اجرای این اسکرپیت بصورت اتوماتیک پروژه فرانت بیلد میشه، زیپ میشه، به سرور انتقال پیدا میکنه، و توی مسیر مورد نظر توی سرور nginx قرار داده می شه و nginx هم بصورت اتوماتیک سرور رو آپدیت میکنه.