نحوه استقرار یک React App با استفاده از میزبانی Firebase

با میزبانی Firebase شروع کنید

میزبانی Firebase راهی سریع، ایمن و قابل اعتماد برای میزبانی از دارایی‌های ثابت برنامه (HTML، CSS، جاوا اسکریپت، فایل‌های رسانه‌ای و غیره) و همچنین ارائه محتوای پویا و میکروسرویس‌های میزبان را در اختیار شما قرار می‌دهد.

میزبانی درجه تولید ما توسط یک شبکه جهانی تحویل محتوا (CDN) پشتیبانی می شود. میزبانی محتوای شما را به صورت پیش‌فرض از طریق SSL ارائه می‌کند و می‌تواند با دامنه سفارشی خود یا در زیر دامنه‌های پروژه شما بدون هیچ هزینه‌ای در web.app و firebaseapp.com استفاده شود.

قبل از اینکه شروع کنی

قبل از اینکه بتوانید میزبانی Firebase را راه اندازی کنید، باید یک پروژه Firebase ایجاد کنید. برای استقرار پروژه بر روی سرورهای firebase، لطفاً مراحل زیر را دنبال کنید.

مرحله 1: Firebase CLI را نصب کنید

برای آشنایی با نحوه نصب Firebase CLI Tools یا به روز رسانی آن به آخرین نسخه، از اسناد Firebase CLI دیدن کنید.

به آخرین نسخه CLI به روز کنید

به طور کلی، شما می خواهید از به روزترین نسخه Firebase CLI استفاده کنید. نحوه به روز رسانی نسخه CLI به سیستم عامل شما و نحوه نصب CLI بستگی دارد.

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

ابتدا بسته Firebase CLI Tools را در پروژه فعلی با استفاده از NPM نصب کنید. می‌توانید راه‌های جایگزینی برای نصب یا به‌روزرسانی آن در Firebase Docs پیدا کنید.

$ npm install -g firebase-tools

هنگامی که این ابزار را با موفقیت نصب کردید، به پلتفرم Firebase وارد شوید:

$ firebase login

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

i  Firebase optionally collects CLI and Emulator Suite usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? Yes
i  To change your data collection preference at any time, run `firebase logout` and log in again.
Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=000000-feejsdfjdfjdfjdsfjdfoef342265225622626.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloudplatformprojects.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ffirebase%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&state=182344245&redirect_uri=http%3A%2F%2Flocalhost%3A9005

Waiting for authentication...

✔  Success! Logged in as johndoe@gyourmailprovider.com

به URL ارائه شده مراجعه کنید، سپس با استفاده از یک حساب Google وارد شوید. پس از اینکه با موفقیت وارد پلتفرم Firebase شدید، لیست فعلی پروژه های مرتبط با این حساب را مرور کنید. برای این کار باید دستور زیر را تایپ کنید:

$ firebase projects:list

لیستی از پروژه های مرتبط با حساب کاربری شما با چیزی شبیه به اطلاعات زیر نمایش داده می شود:

$  ✔ Preparing the list of your Firebase projects...

$  1 project(s) total.

مرحله 2: پروژه خود را راه اندازی کنید

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

$ firebase init hosting

کنسول چیزی شبیه به کد زیر نمایش می دهد:

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/ComputerUserName/Documents/FolderName/local_project_name

Before we get started, keep in mind:

  * You are initializing within an existing Firebase project directory


=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

i  Using project firebase-project-name (firebase-project-name)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
✔  Wrote n/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

در طول اولیه سازی پروژه، از Firebase CLI درخواست می کند:

1. یک پروژه Firebase را برای اتصال به فهرست پروژه محلی خود انتخاب کنید.

پروژه Firebase انتخاب شده پروژه Firebase “پیش فرض” شما برای فهرست پروژه محلی شما است. برای اتصال پروژه های Firebase اضافی به فهرست پروژه محلی خود، نام مستعار پروژه را تنظیم کنید.

1. دایرکتوری را برای استفاده به عنوان دایرکتوری ریشه عمومی خود مشخص کنید.

این فهرست شامل تمام فایل‌های استاتیکی است که به صورت عمومی ارائه می‌شوند، از جمله شما index.html فایل و هر دارایی دیگری که می خواهید در میزبانی Firebase مستقر کنید.

• پیش فرض دایرکتوری روت عمومی عمومی نامیده می شود.

  • اکنون می توانید دایرکتوری ریشه عمومی خود را مشخص کنید یا می توانید آن را بعداً در خود مشخص کنید firebase.json فایل پیکربندی.
  • اگر پیش فرض را انتخاب کنید و از قبل دایرکتوری فراخوانی ندارید public، Firebase آن را برای شما ایجاد می کند.

• اگر قبلاً معتبر ندارید index.html فایل یا 404.html Firebase آنها را برای شما ایجاد می کند.

1. یک پیکربندی برای سایت خود انتخاب کنید.

اگر انتخاب کنید که یک برنامه یک صفحه ای بسازید، Firebase به طور خودکار تنظیمات بازنویسی را برای شما اضافه می کند.

در پایان مقداردهی اولیه، Firebase به طور خودکار دو فایل را به ریشه دایرکتوری برنامه محلی شما ایجاد و اضافه می کند:

• آ firebase.json فایل پیکربندی که پیکربندی پروژه شما را فهرست می کند. درباره این فایل در صفحه پیکربندی رفتار میزبانی اطلاعات بیشتری کسب کنید.

• آ .firebaserc فایلی که نام مستعار پروژه شما را ذخیره می کند.

آماده شدن فایل پیکربندی برای استقرار

فایل firebase.json

دستور init firebase یک فایل پیکربندی firebase.json در ریشه دایرکتوری پروژه شما ایجاد می کند. فایل firebase.json برای استقرار دارایی‌ها با Firebase CLI مورد نیاز است، زیرا مشخص می‌کند که کدام فایل‌ها و تنظیمات از فهرست پروژه شما در پروژه Firebase شما مستقر شوند.

با تولید شده firebase.json فایل در پروژه محلی ما، یک ویژگی جدید به نام “public” باید با مقدار نام پوشه ساخت شما اضافه یا به روز شود. این ممکن است بسته به نامی که در پیکربندی ساخت خود مشخص کرده اید متفاوت باشد. نمونه زیر نمونه ای از این فایل کانفیگ و ویژگی های پیش فرض آن است:

{
  "hosting": {
    "public": "/build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

مرحله 3: در سایت خود مستقر شوید

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

$  firebase deploy --only hosting

توجه داشته باشید: با اجرای این دستور با پرچم میزبانی –only، شما فقط محتوای میزبانی و پیکربندی خود را مستقر می کنید. اگر می‌خواهید منابع یا پیکربندی‌های دیگر پروژه را نیز مستقر کنید (مانند توابع یا قوانین پایگاه داده)، این دستور را با یک لیست جدا شده با کاما در پرچم اجرا کنید (به عنوان مثال، فقط میزبانی، توابع).

این دستور محتوای میزبانی و پیکربندی شما را در زیر دامنه های ارائه شده توسط Firebase زیر مستقر می کند:

• PROJECT_ID.web.app
• PROJECT_ID.firebaseapp.com

اگر همه چیز با این دستور به خوبی پیش برود، ترمینال چیزی شبیه به نتیجه کنسول زیر نمایش می دهد:

=== Deploying to 'firebase-project-name'...

i  deploying hosting
i  hosting[firebase-project-name]: beginning deploy...
i  hosting[firebase-project-name]: found 16 files in /build
✔  hosting[firebase-project-name]: file upload complete
i  hosting[firebase-project-name]: finalizing version...
✔  hosting[firebase-project-name]: version finalized
i  hosting[firebase-project-name]: releasing new version...
✔  hosting[firebase-project-name]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/firebase-project-name/overview
Hosting URL: https://firebase-project-name.web.app

اکنون سایت شما آماده اشتراک گذاری با جهان است! اگر مایلید در مورد مراحل بعدی در این مورد بیشتر بدانید، لطفاً به مستندات کامل Firebase CLI نگاهی بیندازید.

اعزام مبارک، مردمی!

❤️ اگر از این مقاله لذت برده اید، این انگیزه برای نوشتن بیشتر است!
🦄 اگر واقعاً فکر می کنید این مقاله کاملاً به شما کمک کرده است!
🔖 اگر نیاز دارید که بعداً دوباره این مقاله را بررسی کنید.
🤔 لطفا نظرتون رو کامنت کنید، نظرتون خیلی مهمه.