Firebase هي خدمة Google Cloud ، منتج مفصلي ، يستهدف بشكل أساسي تطبيقات الهاتف المحمول. تعد استضافة Firebase جزءًا صغيرًا منها.
- مقدمة عن Firebase
- ميزات استضافة Firebase
- لماذا يجب عليك استخدام استضافة Firebase؟
- ثبّت أداة Firebase CLI
- أنشئ مشروعًا على Firebase
- تكوين الموقع
- انشر الموقع
- مجال مخصص
مقدمة عن Firebase
Firebase عبارة عن نظام أساسي لتطوير تطبيقات الأجهزة المحمولة والويب طورته شركة Firebase، Inc. في عام 2011 ، واستحوذت عليه Google في عام 2014.
لذا فإن Firebase الآن هو خدمة Google Cloud ، وليس هذا فقط - إنه منتج رئيسي من عروض السحابة الخاصة بهم.
يعد Firebase منتجًا معقدًا ومفصلاً ، ويستهدف بشكل أساسي تطبيقات الهاتف المحمول.
ومع ذلك ، فإن إحدى ميزاته هي خدمة استضافة ويب متقدمة.
ميزات استضافة Firebase
يوفر Firebase Hosting استضافة لمواقع الويب الثابتة ، مثل تلك التي يمكنك إنشاؤها باستخدام مولدات المواقع الثابتة أو حتى المواقع التي تم إنشاؤها باستخدام أنظمة CMS من جانب الخادم ، والتي يمكنك من خلالها إنشاء نسخة ثابتة من موقع الويب.
يمكنك استضافة أي شيء طالما أنه ليس ديناميكيًا. تعتبر مدونة WordPress على سبيل المثال دائمًا مرشحًا جيدًا لتكون موقعًا ثابتًا ، إذا كنت تستخدم تعليقات Disqus أو Facebook.
يسلم Firebase Hosting الملفات من خلال FastlyCDN، باستخدام HTTPS ويوفر شهادة SSL تلقائية ، مع دعم المجال المخصص.
إنهالطبقة المجانية سخية، مع خطط رخيصة إذا تجاوزتها ، وهي صديقة للغاية للمطورين: يوفر Firebase أداة واجهة CLI ، وعملية نشر سهلة ، والتراجع بنقرة واحدة
لماذا يجب عليك استخدام استضافة Firebase؟
يمكن أن يكون Firebase خيارًا جيدًا لنشر مواقع الويب الثابتة وتطبيقات الصفحة الواحدة.
أحب استخدام Firebase Hosting بشكل أساسي لأنني اختبرت العديد من المزودين المختلفين ويقدم Firebase ملفسرعة مذهلةعبر القارات دون الحاجة إلى CDN منفصل في الأعلى ، منذ ذلك الحينCDN مدمجمجانا.
أيضًا أثناء امتلاك VPS الخاص بك يعد خيارًا جيدًا أيضًالا أريد إدارة الخادم الخاص بيفقط بالنسبة لموقع ويب بسيط ، أفضل التركيز على المحتوى بدلاً من العمليات ، تمامًا كما لو كنت أقوم بنشر تطبيق على Heroku.
يعد إعداد Firebase أسهل من إعداد Heroku.
ثبّت أداة Firebase CLI
قم بتثبيت Firebase CLI معnpm:
npm install -g firebase-toolsor
yarn global add firebase-toolsand authenticate with the Google account (I assume you already have a Google account) by running
firebase loginCreate a project on Firebase
Go to https://console.firebase.google.com/ and create a new project.

Now back to the console, from the site you’re working on, in the root folder, run
firebase init
Choose “Hosting” by pressing space, then enter to go on.
Now you need to choose the project you want to deploy the site to.

Choose “create a new project”.
Now you choose which folder contains the static version of your site. For example, public
.
Reply “No” to the Configure as a single-page app (rewrite all urls to /index.html)? question, and also reply “No” to File public/index.html already exists. Overwrite? to avoid Firebase to add its own default index.html file.
You’re good to go:

Configure the site
The Firebase CLI app created the firebase.json
file in the root site folder.
In this article I tell how to configure a simple feature in Firebase Hosting, by adding a small bit of configuration in the firebase.json
file.
I want to set the Cache-Control header directive on all the site assets: images as well as CSS and JS files.
A clean firebase.json
file contains the following:
{
"hosting": {
"public": "public",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
}
}
It tells Firebase where is the site content, and which files it should ignore. Feel free to add all the folders you have, except public
.
We’re going to add a new property in there, called headers
:
{
"hosting": {
"public": "public",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"headers": [
{
"source": "**/*[email protected](jpg|jpeg|gif|png|css|js)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=1000000" //1 week+
}
]
}
]
}
}
As you can see we tell that for all files ending with jpg|jpeg|gif|png|css|js
Firebase should apply the Cache-Control:max-age=1000000` directive, which means all assets are cached for more than 1 week.
Publish the site
When you are ready to publish the site, you just run
firebase deployand Firebase takes care of everything.
You can now open https://yourproject.firebaseapp.com
and you should see the website running.
Custom Domain
The next logical step is to make your site use a custom domain.
Go to https://console.firebase.google.com/project/_/hosting/main and click the “Connect Domain” button:

The wizard will ask you for the domain name, then it will provide a TXT record you need to add to your hosting DNS panel to verify the domain.
If the domain is brand new, it might take some time before you can pass this step.
Once this is done, the interface will give you two A records to add as well to your hosting DNS panel.
If you set up yourdomain.com
, don’t forget to also set up www.yourdomain.com
, by making it a redirect.

Now you just have to wait for your hosting to update the DNS records and for DNS caches to flush.
Also, keep in mind that your SSL certificate is automatically provisioned but requires a bit of time to be valid.
More services tutorials:
- How to start with Firebase Hosting
- A tutorial to host your Static Site on Netlify
- Code Linters and Formatters for Web Developers
- Auto trigger deploys on Netlify
- Glitch, a great Platform for Developers
- Airtable API for Developers
- How to authenticate to any Google API
- Zeit Now Tutorial
- Netlify Lambda Functions Tutorial
- How to use Firebase Firestore as your database
- How I fixed the trailing slash in Netlify rewrites
- How to access query parameters in Netlify functions
- How to use environment variables in Netlify functions
- How to use npm packages in Netlify Functions
- How to create your first VPS on DigitalOcean