چگونه پروژه 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/ [email protected]$SERVER:$PROJECT_ON_SERVER

فایل بالا به محض کامیت شدن رو مستر شروع میکنه به اجرا شدن.

حالا چه اتفاقی داره میوفته؟ من شما رو به داکیومنت اصلی خود گیت لب برای کار به CI/CD گیت لب ارجاع میدم چون اون خودش یه بحث جداست که با کلیک رو لینک پایین بهش هدایت میشید:

https://docs.gitlab.com/ee/ci/


اما اگه بخواهم یک خلاصه بگم اینه که ما عمل CI و CD خودمون رو به سه قسمت BUILD, TEST, DEPLOY تقسیم کردیم و هر کدوم از این ها یه استیج حساب میشه. شما تو عکس اول این مقاله میبینید در هر سطر سه دایرس که وضعیت اجرای این استیج هامون رو نشون میده.

با اجرا شدن به اصطلاح Pipeline گیت لب و انتخاب Task در حال اجرا تو همون عکس اول این مطلب شما میتونید جزئیات اجرای تسک رو ببینید.

نمایی از اجرای یک تسک
نمایی از اجرای یک تسک

خوب به طور خلاصه ما تو استیج بیلد داریم پروژه خودمون رو بیلد میکنیم و فولدر dist خودمون که خروجی هست رو مشخص میکنیم.

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

شما میتونید قسمت تست رو صرف نظر کنید اگر تستی ننوشتید. فقط پاکش کنید.

خوب مرحله آخر که دیپلوی هست سخت ترین مسله هست که تو قسمت بعد توضیح میدم.

دیپلوی روی سرور

برای دیپلوی روی سرور قبل این که pipeline اجرا بشه باید همه چیز رو رو سرور محیا کرده باشید. پس بذارید یه مرور کنیم که چیا کردیم؟

  1. یک یوزر برای گیت لب در سرور با دستور زیر بسازید.
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/ [email protected]$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/ [email protected]$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


(اگه دوست داشتید و وقت پیاده سازی رو خودتون نداشتید میتونید به تلگرام من که تو بیو هست پیام بدید که با توافقاتی اوکی کنم براتون)