به عنوان توسعه دهندگان ، همه ما اصطلاح DevOps را شنیده ایم – ترکیبی از شیوه هایی که هدف آن ایجاد شکاف بین توسعه و عملیات است. هدف؟ نرم افزار را سریعتر ، با اطمینان تر و با همکاری بهتر بین تیم ها ارائه دهید. یکی از بخش های اصلی این CI/CD است.
CI/CD مخفف ادغام مداوم و تحویل/استقرار مداوم است. همه چیز در مورد خودکار سازی مراحل انجام شده هنگام فشار دادن به مخزن کد خود است. با CI/CD ، می توانید برنامه خود را در یک فرآیند یکپارچه و خودکار ساخت ، تست و مستقر کنید.
در این مقاله ، ما با تنظیم خط لوله CI/CD با استفاده از اقدامات GitHub قدم می زنیم. و در مرحله آخر ، ما برنامه را به Vercel مستقر خواهیم کرد ، بنابراین زنده و در دسترس همه است.
بیایید وارد کد شویم و شروع کنیم!
پروژه زاویه ای بسازید
ابتدا اطمینان حاصل کنید که Angular CLI در سطح جهان با این دستور نصب شده است:
npm install -g @angular/cli
سپس ، یک پروژه زاویه ای جدید ایجاد کنید:
ng new github-actions
می توانید تنظیمات مورد نظر خود را انتخاب کنید. در مورد من ، من برای یک ظاهر طراحی شده با CSS رفتم و Rendering سمت سرور (SSR) و تولید سایت استاتیک (SSG/Prerendering) را خاموش کردم. ساختار پروژه چیزی شبیه به این خواهد بود:
اکنون ، به فهرست پروژه بروید و پروژه را اجرا کنید:
ng serve
BOOM – باید شاهد پروژه خود در مرورگر باشید.
ایجاد پرونده .yaml
در داخل پروژه زاویه ای خود ، یک پوشه جدید به نام .github ایجاد کنید و در داخل آن پوشه ای به نام گردش کار اضافه کنید. اکنون ، دو پرونده را در پوشه گردش کار ایجاد کنید: Development.YAML و Production.yAML.
توسعه
name: Production
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
push:
branches:
- main
jobs:
Deploy-Production:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Installation Vercel
run: npm i -g vercel
- name: Pull vercel environment
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
- name: Build project
run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy project
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
تولید
name: Production
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
push:
branches:
- main
jobs:
Test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 18
- run: npm ci
- run: npm run test:production
Deploy-Production:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Installation Vercel
run: npm i -g vercel
- name: Pull vercel environment
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
- name: Build project
run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy project
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
repo github را ایجاد کنید و پروژه خود را فشار دهید
پس از تنظیم پرونده های .yAML خود ، پیش بروید و یک مخزن جدید GitHub ایجاد کنید و پروژه خود را به سمت آن سوق دهید.
پروژه Vercel را تنظیم کنید
وارد Vercel شوید ، به تنظیمات حساب بروید ، سپس به برگه Tokens بروید. یک نشانه جدید ایجاد کنید – برای ادغام GitHub به آن احتیاج دارید.
اسرار Vercel را به GitHub اضافه کنید
در repo github خود ، به تنظیمات> اسرار و متغیرها> اقدامات بروید. یک راز جدید به نام vercel_token اضافه کنید و نشانه ای را که در Vercel ایجاد کرده اید ، بچسبانید.
Vercel CLI را به صورت محلی نصب کنید
برای دریافت vercel_org_id و vercel_project_id به vercel cli نیاز دارید. با نصب آن در سطح جهانی شروع کنید:
npm i -g vercel
سپس به Vercel وارد شوید:
vercel login
روش ورود به سیستم مورد نظر خود را انتخاب کنید و پس از ورود به سیستم ، اجرا کنید:
vercel link
این یک پوشه .vercel حاوی Project.Json ایجاد می کند. در داخل آن پرونده ، هر دو vercel_org_id و vercel_project_id را پیدا خواهید کرد.
آن دو را به عنوان اسرار در GitHub درست مانند شما با Vercel_Token اضافه کنید.
در کل ، اکنون باید این سه راز را داشته باشید:
یک شاخه dev ایجاد کنید و آزمایش کنید
یک شاخه جدید (به عنوان مثال ، dev) ایجاد کنید ، تغییراتی ایجاد کنید و آن را فشار دهید. گردش کار Development.yAML به طور خودکار اجرا می شود. اگر همه چیز درست تنظیم شده باشد ، ساختاری موفق مانند این را مشاهده خواهید کرد:
ادغام اصلی برای تولید
بعد از اینکه تغییرات خود را آزمایش کردید و همه چیز خوب به نظر می رسد ، شاخه خود را در اصلی ادغام کنید و فشار دهید. این کار باعث ایجاد گردش کار تولید شده و به طور خودکار تغییرات شما را در Vercel مستقر می کند.
اگر به خطاهای آزمایشی رسیدید ، پرونده های مشخصات خود را دوبار بررسی کنید تا اطمینان حاصل شود که تست های شما مطابق انتظار انجام می شود.
پروژه Vercel خود را بررسی کنید
پروژه شما اکنون باید در داشبورد Vercel شما ظاهر شود:
و در داخل پروژه Vercel شما:
پایان
استفاده از اقدامات GitHub برای ساخت خطوط لوله CI/CD باعث می شود DevOps شما تمیزتر و کارآمدتر شود. با اتوماسیون در محل ، می توانید برنامه خود را بدون دردسر بسازید ، تست و مستقر کنید.
امیدوارم این آموزش به شما کمک کند تا از آن آویزان شوید. با تشکر از شما برای چسبیدن به اطراف – اکنون می توانید چیزی عالی بسازید!
