چگونه پروژه VUEJS خود را با استفاده از SSH  و Gitlab بر روی سرور Deploy کنیم؟

با عرض سلام و خسته نباشیدبعد از یه مدت دوری برگشتم تا براتون تجربه امروز خودمو منتشر کنماول یه خلاصه بگم که قراره چه اتفاقی بیوفته.شما یه سایت دارید که با فریم ورک vuejs نوشته شده و حالا میخاید اونو دیپلوی کنید رو VPS خودتون. چطوری این کارو اتوماتیک کنیم؟ میگم بهتون!(اگه دوست داشتید و وقت پیاده سازی رو خودتون نداشتید میتونید به تلگرام من که تو بیو هست پیام بدید که با توافقاتی اوکی کنم براتون)اول از همه پروژتون رو روی یک ریپوزیتوری gitlab بالا بیارید.حتما میدونید که این روش بعد از تحریم اعمال شده توسط گیت لب به ما ایرانی ها یکم سخته. ینی باید وی پی ان داشته باشید و کلا سرور هم ایران نباشه یا روشی بلد باشید که از آی پی ایران به گیت لب وصل نشید.مرحله دوم ایجاد پروسه GITLAB CI/CD هست.برای این کار باید یک فایل به نام .gitlab-ci.yml تو فولدر روت پروژتون بسازید و موارد زیر رو توش کپی کنید:build site: image: node:6 stage: build only: - master script: - npm install --progress=false - npm run build artifacts: expire_in: 1 week paths: - dist unit test: image: node:6 stage: test only: - master script: - npm install --progress=false - npm run unit deploy: environment: name: production url: http://domain.example/ image: ubuntu stage: deploy variables: PROJECT_ON_SERVER: "/path/to/your/public/folder" only: - master script: - apt-get update -yqq ## ## Install ssh-agent if not already installed, it is required by Docker. ## (change apt-get to yum if you use an RPM-based image) ## - 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client -y )' ## Install resync to create mirror between runner and host. - apt-get install -y rsync ## ## Run ssh-agent (inside the build environment) ## - mkdir -p ~/.ssh - echo "$SSH_PRIVATE_KEY" | tr -d '\r' > ~/.ssh/id_rsa - chmod 700 ~/.ssh/id_rsa - eval "$(ssh-agent -s)" - ssh-add ~/.ssh/id_rsa - ssh-keyscan -H $SERVER >> ~/.ssh/known_hosts - rsync -rav --delete dist/ $USER@$SERVER:$PROJECT_ON_SERVER فایل بالا به محض کامیت شدن رو مستر شروع میکنه به اجرا شدن.حالا چه اتفاقی داره میوفته؟ من شما رو به داکیومنت اصلی خود گیت لب برای کار به CI/CD گیت لب ارجاع میدم چون اون خودش یه بحث جداست که با کلیک رو لینک پایین بهش هدایت میشید: https://docs.gitlab.com/ee/ci/ اما اگه بخواهم یک خلاصه بگم اینه که ما عمل CI و CD خودمون رو به سه قسمت BUILD, TEST, DEPLOY تقسیم کردیم و هر کدوم از این ها یه استیج حساب میشه. شما تو عکس اول این مقاله میبینید در هر سطر سه دایرس که وضعیت اجرای این استیج هامون رو نشون میده.با اجرا شدن به اصطلاح Pipeline گیت لب و انتخاب Task در حال اجرا تو همون عکس اول این مطلب شما میتونید جزئیات اجرای تسک رو ببینید.نمایی از اجرای یک تسکخوب به طور خلاصه ما تو استیج بیلد داریم پروژه خودمون رو بیلد میکنیم و فولدر dist خودمون که خروجی هست رو مشخص میکنیم.در استیج بعدی از خروجیمون به وسیله کدهای تستی که نوشتیم تست میگیریم و اگه هر دو مرحله درست پیش بره میریم برای مرحله آخر.شما میتونید قسمت تست رو صرف نظر کنید اگر تستی ننوشتید. فقط پاکش کنید.خوب مرحله آخر که دیپلوی هست سخت ترین مسله هست که تو قسمت بعد توضیح میدم.دیپلوی روی سروربرای دیپلوی روی سرور قبل این که pipeline اجرا بشه باید همه چیز رو رو سرور محیا کرده باشید. پس بذارید یه مرور کنیم که چیا کردیم؟ یک یوزر برای گیت لب در سرور با دستور زیر بسازید.sudo adduser gitlab // create gitlab user. su gitlab // Switch to gitlab user.۲. برای یوزر ساخته شده یک ssh key بسازید. میتونید ساخت ssh key رو از لینک زیر ادامه بدید https://www.digitalocean.com/community/tutorials/how-to-set-up-ssh-keys--2 ۳. کلید خصوصی رو کپی کنید و در گیت لب وارد کنید:برای کپی کردن کلید خصوصی در صورتی که محل اونو دیفالت انتخاب کرده باشید دستور زیر کمکتون میکنه:cat ~/.ssh/id_rsaاین دستور کلیدتون رو روی ترمینال نشون میده. اونو کپی کنید و به آدرس زیر تو ریپوی گیت لب برید:Your repo -> Settings -> CI/CD -> Variablesبا کلیک روی دکمه expand مطابق عکس زیر مقادیر رو وارد کنید:جای سرور آی پی سرور - جای یوزر همین یوزری که ساختید ینی gitlab و جای ssh_private_key هم همین کلید خصوصی رو بذارید.حالا pipeline شما درست باید کار کنه.گفته بودم بخش آخر فایل گیت لب رو توضیح میدم حالا بریم سر اون:deploy: environment: name: production url: http://erfantahvieh.com/ image: ubuntu stage: deploy variables: PROJECT_ON_SERVER: "/home/erfantahvieh.com/front" only: - master script: - apt-get update -yqq ## ## Install ssh-agent if not already installed, it is required by Docker. ## (change apt-get to yum if you use an RPM-based image) ## - 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client -y )' ## Install resync to create mirror between runner and host. - apt-get install -y rsync ## ## Run ssh-agent (inside the build environment) ## - mkdir -p ~/.ssh - echo "$SSH_PRIVATE_KEY" | tr -d '\r' > ~/.ssh/id_rsa - chmod 700 ~/.ssh/id_rsa - eval "$(ssh-agent -s)" - ssh-add ~/.ssh/id_rsa - ssh-keyscan -H $SERVER >> ~/.ssh/known_hosts - rsync -rav --delete dist/ $USER@$SERVER:$PROJECT_ON_SERVERاگه لینکی که بالا تر براتون گذاشتم رو بخونید کامل متوجه بخش های این قسمت میشید اما اگه یه توضیح کوچیک بخام بدم ما از داکر اوبونتو برای اجرای دستوراتمون استفاده کردیم. یک متغیر به نام PROJECT_ON_SERVER نوشتیم که به جایی اشاره داره که مخواهیم فایل های بیلد شدمون رو بفرستیم روش.بریم سر اصل مطب ینی بخش scriptتو این بخش ابتدا من نرم افزار های مورد نیاز رو نصب کردم:- apt-get update -yqq ## ## Install ssh-agent if not already installed, it is required by Docker. ## (change apt-get to yum if you use an RPM-based image) ## - 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client -y )' ## Install rsync to create mirror between runner and host. - apt-get install -y rsyncتو دستور اول مخزن ریپو های اوبونتو رو آپدیت کردم. تو دستور دم کلاینت ssh رو نصب کردم و در دستور سوم نرم افزار rsync رو برای کپی کردن فایل ها از روی داکر اوبونتوم به روی سرور نصب کردم.در دستورات بعدی من سرور خودم رو به داکر معرفی کردم وکلید خصوصی سرور خودمو بهش دادم تا بتونه با ssh به سرور من وصل بشه:## ## Run ssh-agent (inside the build environment) ## - mkdir -p ~/.ssh - echo "$SSH_PRIVATE_KEY" | tr -d '\r' > ~/.ssh/id_rsa - chmod 700 ~/.ssh/id_rsa - eval "$(ssh-agent -s)" - ssh-add ~/.ssh/id_rsa - ssh-keyscan -H $SERVER >> ~/.ssh/known_hostsو در خط آخر من محتویات رو از پوشه dist که تو استیج بیلدم ساخته شده بود به سرورم منتقل کردم:- rsync -rav --delete dist/ $USER@$SERVER:$PROJECT_ON_SERVERتموم شد.ممکنه یکم این کار براتون سخت و گیج کننده باشه. خوشحال میشم کمکتون کنم.ارور ها رو دنبال کنید تا سرویستون ران بشه. کد هایی که اینجا گذاشتم دقیقا مراحلی هست که من خودم طی کردم.موفق باشیدو ممنون میشم اگر خوشتون اومد رو تویتر و سوشال مدیا هاتون منو شیر کنیدتو پست بعدی میخام داکر رو با gitlab ci/cd دیپلوی کنم پس منتظر باشید ...آموزش دیپلوی روی سرور های ایران با استفاده از GITLABسری پست های GITLAB CI/CD رو حتما دنبال کنید و منو فالو کنید اگه دوست داشتید. https://virgool.io/@aminkt/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-gitlab-cicd-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%B3%D8%B1%D9%88%D8%B1-%D9%87%D8%A7%DB%8C-%D8%A7%DB%8C%D8%B1%D8%A7%D9%86-%D9%82%D8%B3%D9%85%D8%AA-%D8%A7%D9%88%D9%84-xdxkvsfwyshh https://virgool.io/@aminkt/%D8%AF%DB%8C%D9%BE%D9%84%D9%88%DB%8C-%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D9%87%D8%A7%DB%8C-reactjs-%DB%8C%D8%A7-vuejs-%D8%A8%D8%B1-%D8%B1%D9%88%DB%8C-%D8%B3%D8%B1%D9%88%D8%B1-%D8%A7%DB%8C%D8%B1%D8%A7%D9%86-%D8%A8%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-gitlab-cicd-c9qy3dq9exws (اگه دوست داشتید و وقت پیاده سازی رو خودتون نداشتید میتونید به تلگرام من که تو بیو هست پیام بدید که با توافقاتی اوکی کنم براتون)