با GitHub Actions یک React Application را در Firebase اجرا کنید

مشکلات تولید و استقرار خود را با یک خط لوله CI/CD که از جزئیات پرزحمت مراقبت می کند، راحت کنید.

استقرار برنامه های کاربردی وب در میزبانی Firebase می تواند دردسرساز باشد. با این حال، با استفاده از اقدامات GitHub می‌توانید فرآیند استقرار را ساده و ساده کنید و مدیریت گردش‌های کاری استقرار را در کل طول عمر یک پروژه نرم‌افزاری بسیار آسان کنید.

تنها با چند مرحله ساده، می توانید یک گردش کار استقرار را برای خودکارسازی فرآیند تنظیم کنید. این شامل ردیابی تغییرات جدید در شعب و ثبت هر گونه خطا است. برای یادگیری نحوه استقرار یک برنامه React در سرویس میزبانی Firebase به ادامه مطلب مراجعه کنید.

خط لوله CI/CD چیست؟

خط لوله CI/CD (ادغام پیوسته/تحویل مستمر) مجموعه ای از فرآیندهای خودکار است که برای ایجاد، آزمایش و استقرار مداوم برنامه ها امکان پذیر می شود.

به بیان ساده، یک خط لوله CI/CD راه اندازی شده است تا فرآیندهای درگیر در چرخه عمر توسعه نرم افزار را خودکار کند. این شامل توسعه واقعی، آزمایش، انتشار (بتا، آلفا، و نسخه نهایی)، رفع اشکال و حتی به‌روزرسانی ویژگی‌ها می‌شود. اساساً این فرآیند امکان ارسال آسان و سریع نرم افزارهای با کیفیت را فراهم می کند.

خط لوله CI/CD معمولاً چند مرحله را پوشش می دهد که شامل موارد زیر است:

1. مرحله منبع: این مرحله توسعه و نگهداری واقعی کد برنامه را با ابزار کنترل نسخه مانند Git پوشش می دهد.
2. مرحله ساخت: این مرحله کد منبع را با تمام وابستگی های آن در قالبی اجرایی جمع می کند.
3. مرحله تست: این مرحله شامل تست های خودکار برای تایید کیفیت نرم افزار است. هدف نهایی شناسایی و اصلاح هر گونه اشکال است. در این مرحله می توانید انواع مختلفی از تست ها را انجام دهید و زمانی که کد تست ها را پشت سر گذاشت، آماده استقرار است.
4. استقرار: این مرحله فرآیند استقرار در محیط تولید را خودکار می کند.

خط لوله باید هر مرحله را نظارت کند تا اطمینان حاصل کند که هیچ اشکالی وجود ندارد و کل فرآیند را برای نسخه‌های آینده بهبود بخشد.

GitHub Actions چیست؟

GitHub Actions یک ویژگی است که توسط GitHub برای خودکارسازی فرآیندهای گردش کار استقرار نرم افزار در خطوط لوله CI/CD ارائه شده است. این امکان تعریف و خودکارسازی جریان های کاری استقرار را مستقیماً از مخزن GitHub پروژه شما فراهم می کند.

GitHub Actions چندین مزیت دارد:

1. استفاده آسان: GitHub Actions یک رابط کاربر پسند و یک نحو ساده برای تنظیم گردش کار استقرار فراهم می کند. با استفاده از ویرایشگر داخلی در GitHub می توانید به راحتی و به سرعت گردش کار پروژه خود را تعریف کنید.
2. ادغام بومی: GitHub Actions بخشی از GitHub است که راه‌اندازی، مدیریت و همکاری در گردش‌های کاری را در کنار کد پروژه‌تان آسان می‌کند.
3. انعطاف پذیر و قابل تنظیم: GitHub Actions یک پلت فرم منعطف و قابل تنظیم را ارائه می دهد که تضمین می کند که می توانید گردش کار متناسب با نیازهای خاص خود ایجاد کنید. علاوه بر این، از چندین زبان برنامه نویسی پشتیبانی می کند. به این معنی که می توانید با هر فناوری که ترجیح می دهید از آن استفاده کنید.

یک پروژه Firebase و React Client راه اندازی کنید

برای شروع، به Firebase بروید و با حساب Google خود وارد شوید. در صفحه نمای کلی کنسول، روی Create Project کلیک کنید تا یک پروژه جدید راه اندازی شود و نام پروژه ارائه شود.

سپس یک برنامه React ایجاد کنید و ابزارهای خط فرمان Firebase را نصب کنید:

npm install -g firebase-tools

می توانید کد این پروژه را در مخزن GitHub آن پیدا کنید.

با استفاده از اعتبار حساب Firebase از ترمینال خود وارد Firebase شوید.

firebase login:ci

این جریان احراز هویت Firebase را راه‌اندازی می‌کند که از شما می‌خواهد اگر قبلاً وارد سیستم نشده‌اید، جزئیات ورود خود را وارد کنید. هنگامی که Firebase شما را احراز هویت کرد، یک نشانه چاپ می‌کند. این نشانه را کپی کنید. از آن برای اجرای دستورات Firebase در تنظیمات GitHub Actions خود استفاده خواهید کرد.

در نهایت، یک نسخه آماده برای تولید برنامه خود ایجاد کنید:

npm run build

این دستور فایل‌ها و دارایی‌های لازم را در داخل یک پوشه «build» جدید در دایرکتوری ریشه تولید می‌کند که برای استقرار برنامه مورد نیاز است.

Firebase را در برنامه React خود راه اندازی کنید

این دستور را برای مقداردهی اولیه Firebase در پوشه پروژه خود اجرا کنید:

firebase init

سپس، تأیید کنید که می‌خواهید Firebase را در پروژه خود مقداردهی کنید و ادامه دهید و Hosting را انتخاب کنید: فایل‌ها را برای Firebase Hosting پیکربندی کنید و (به صورت اختیاری) GitHub Action Deploys را از لیست گزینه‌ها تنظیم کنید.

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

در مرحله بعد، پوشه “build” را به عنوان دایرکتوری عمومی مشخص کنید، گزینه No را برای بازنویسی همه URL ها در /index.html انتخاب کنید، گزینه “نه” را برای تنظیم ساخت و توسعه خودکار از GitHub انتخاب کنید، و در نهایت، Yes را برای بازنویسی بیلد انتخاب کنید. گزینه فایل /index.html.

پس از انجام تغییرات بالا، CLI یک فایل firebase.json در دایرکتوری ریشه ایجاد می کند. این فایل حاوی تمام تنظیمات میزبانی است که گردش کار GitHub Actions به آن نیاز دارد.

در نهایت، قبل از تنظیم گردش کار GitHub Actions، یک مخزن در GitHub ایجاد کنید و فایل های پروژه را به آن فشار دهید.

راه اندازی GitHub Actions

در مخزن پروژه خود در GitHub، Settings > Secrets and Variables > Actions را انتخاب کنید. در صفحه مخفی مخزن، FIREBASE_TOKEN را به عنوان نام راز وارد کنید و توکن Firebase را که کپی کرده‌اید در فیلدهای Secrets قرار دهید.

Deploy Workflow را تنظیم کنید

روی تب Actions در مخزن پروژه خود کلیک کنید و در قسمت Continuous Integration گزینه Configure Nodejs workflow را انتخاب کنید.

سپس نام فایل را به firebase.yml تغییر نام دهید، کد boilerplate را در ویرایشگر حذف کنید و کد زیر را اضافه کنید:

# This workflow will carry out a clean installation of node dependencies,
# cache/restore them, build the source code and run tests across different
# versions of node
# For more information see:
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejs

name: Firebase CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x]
  
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - run: npm install -g npm
    - name: npm install, build and test
      run: |
        npm install
        npm run build
    - name: Archive Build
      uses: actions/upload-artifact@v2
      with:
        name: build
        path: build
        
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - name: Download Build
        uses: actions/download-artifact@v2
        with:
          name: build
          path: build
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

در اینجا برخی از خواص کلیدی توضیح داده شده است:

1. روشن: رویدادهایی که اقدامات را در این گردش کار فعال می کنند.
2. Jobs: کارهایی را که یک Action خاص باید اجرا کند را مشخص می کند. در این مورد، دو کار وجود دارد: ساخت و استقرار.
3. Runs-on: ماشینی که این عمل باید روی آن اجرا شود.
4. Steps: دنباله ای از مراحل را برای Action برای انجام یک کار خاص تعریف می کند.
5. With: هر آرگومان مورد نیاز Actions برای اجرا را مشخص می کند.
6. نام: نام یک مرحله خاص برای یک شغل.

در نهایت تغییرات ایجاد شده در این فایل را انجام دهید. GitHub به طور خودکار این گردش کار را راه اندازی می کند و برنامه React را در سرویس میزبانی Firebase ایجاد و اجرا می کند. می‌توانید URL زنده برنامه را در گزارش‌های استقرار بررسی کنید.

استقرار برنامه ها با استفاده از GitHub Actions

GitHub Actions یک رویکرد استقرار ساده ارائه می دهد. این تضمین می‌کند که می‌توانید برنامه‌ها را بدون در نظر گرفتن فناوری‌هایی که آنها را در آن می‌سازید، به طور مداوم و قابل اعتماد اجرا کنید.

علاوه بر این، می توانید به راحتی گردش کار استقرار را با استفاده از ابزارهای استقرار داخلی برای برآوردن نیازهای خط لوله CI/CD خاص خود سفارشی کنید.

منبع مقاله