متغيرات البيئة: دليل شامل لاستخدامها مع Gatsby و Netlify

مقدمة إلى متغيرات البيئة: لماذا هي ضرورية؟

عند البدء في دمج خدمات الطرف الثالث في تطبيقك أو موقعك الإلكتروني، ستجد أنه من المفيد للغاية وجود بيئات مختلفة، مثل بيئة التطوير (development) وبيئة الإنتاج (production). كيف يمكننا تهيئة هذا الأمر بحيث لا نضطر إلى تعديل الكود البرمجي مباشرة لتغيير بيئتنا؟ هذا هو المكان الذي تبرز فيه أهمية متغيرات البيئة.

ما هي متغيرات البيئة؟

متغيرات البيئة هي قيم محددة مسبقًا تُستخدم عادةً لتوفير القدرة على تهيئة قيمة في الكود الخاص بك من خارج التطبيق نفسه. تخيلها كمفاتيح سرية أو إعدادات يمكن لتطبيقك قراءتها دون أن تكون جزءًا ثابتًا من الكود المصدر.

عند التطوير محليًا، أو حتى في مسار النشر (deployment pipeline)، ستجد غالبًا هذه المتغيرات مخزنة في ملف يحمل اسمًا مشابهًا لـ .env.

كيف يمكن أن تكون متغيرات البيئة مفيدة؟

ربما يكون الاستخدام الأكثر شيوعًا لمتغيرات البيئة هو القدرة على إعداد خيارات تهيئة مختلفة لبيئات مختلفة. غالبًا عند التطوير باستخدام خدمات طرف ثالث، ترغب في الحصول على نسخة تطوير أو بيئة اختبار (sandbox) لإجراء طلبات الاختبار عليها، وبهذه الطريقة لا يؤثر ذلك على بيانات الإنتاج الحقيقية.

تُعد متغيرات البيئة مفيدة لأنها تسمح لك بتغيير أي من بيئاتك تستخدم أي بيئة خدمة طرف ثالث عن طريق تغيير مفتاح API، أو نقطة النهاية (endpoint)، أو أي شيء تستخدمه الخدمة للتمييز بين البيئات. يجب أن يكون الكود الذي تنشره قابلاً للتنبؤ به، لذا من خلال عدم الاضطرار إلى تغيير أي كود، بل مجرد التهيئة خارج الكود، يمكنك الحفاظ على هذه القدرة على التنبؤ.

كيف أحافظ على أمان هذه الملفات؟

هذه ربما تكون إحدى النقاط الأكثر أهمية هنا – يجب عليك التأكد من التعامل مع هذه الملفات بعناية وعدم إدراجها في مستودع Git. من خلال كشف هذه المفاتيح عن طريق تحميلها عن غير قصد إلى موقع عام، يمكن للإنترنت بسهولة العثور على هذه المفاتيح وإساءة استخدامها لتحقيق مكاسب خاصة بهم.

على سبيل المثال، مفاتيح AWS هي مصدر قيم. يقوم الأشخاص بتشغيل برامج آلية (bots) بهدف وحيد هو محاولة فحص Github بحثًا عن المفاتيح. إذا عثر شخص ما على مفتاح AWS، فيمكنه استخدام هذا المفتاح للوصول إلى الموارد مثل تشغيل عملية تعدين للبيتكوين على نفقتك الخاصة. ليس الهدف من هذا تخويفك، بل جعلك على دراية لتجنب اختراق مفاتيحك.

إذًا، كيف نحافظ على أمانها؟ أسهل طريقة هي إضافة ملف البيئة الذي تحتفظ فيه بهذه المفاتيح إلى ملف .gitignore الخاص بك. للقيام بذلك، ما عليك سوى فتح ملف .gitignore الحالي أو إنشاء ملف جديد في جذر المستودع الخاص بك وإضافة اسم الملف كسطر جديد:

# Inside .gitignore
.env

إذا كنت ترغب في الحصول على حلول أكثر تقدمًا والتأكد من عدم حدوث ذلك أبدًا لمستودع، يمكنك الاطلاع على بعض الأدوات مثل git-secrets من AWS Labs أو GitLeaks الذي يحتوي حتى على Github Action لتسهيل التكامل مع Github.

متغيرات البيئة في عالم Gatsby و Netlify

Gatsby ومتغيرات البيئة

يوفر Gatsby افتراضيًا ملفين كجزء من سير عمل متغيرات البيئة الخاصة به، مما يجعل هذه القيم متاحة في جانب العميل (client-side): .env.development و .env.production. هذه الملفات تتوافق مع سكربتات gatsby develop و gatsby build لتطوير أو بناء موقعك على التوالي.

لاستخدام هذه الملفات ضمن عملية تطوير وبناء Gatsby، يتطلب Gatsby منك إضافة بادئة GATSBY_ لهذه المتغيرات. يعمل هذا أيضًا إذا كنت ترغب في أن تكون متاحة من مستوى عملية نظام التشغيل (OS process level). على الرغم من أنه يمكنك دمج مكتبة dotenv إذا كانت لديك احتياجات أكثر تقدمًا أو لا ترغب في استخدام بادئة GATSBY_، إلا أن المسار الأقل مقاومة هو على الأرجح اتباع طريقة Gatsby عند العمل في بيئته.

Netlify ومتغيرات البيئة

يوفر Netlify القدرة على إضافة متغيرات البيئة كجزء من إعدادات البناء والنشر (Build & deploy settings) الخاصة به، والتي يتم التقاطها كجزء من عمليات البناء.

لحسن الحظ، يجعل Netlify من السهل إضافة أي متغير بيئة ترغب فيه إلى عملية البناء! لإضافة واحد، يمكنك ببساطة الانتقال إلى قسم البيئة (Environment) في صفحة إعدادات البناء والنشر لمشروعك وإضافة متغير ضمن متغيرات البيئة (Environment variables). سنرشدك خلال هذه العملية لاحقًا.

تطبيق عملي: استخدام متغيرات البيئة مع Gatsby و Netlify

الخطوة 1: إنشاء موقع “Hello, world” بسيط

لتطبيقنا العملي، سنقوم بإعداد مثال أساسي جدًا لموقع Gatsby لأغراض الاختبار فقط.

على الرغم من أن هذا ليس استخدامًا شائعًا لمتغيرات البيئة، حيث تُستخدم عادةً لأشياء مثل مفاتيح API وتهيئة الخدمات، إلا أن هذا سيعطيك فكرة رائعة عن كيفية عملها بشكل أساسي. سنستخدم قالب Gatsby Sass Starter الذي أنشأته، والذي سيوفر لنا نقطة بداية ويضيف “Hello, [Environment]” اعتمادًا على مكان تشغيله.

للبدء، دعنا ننشئ مشروعنا المحلي باستخدام واجهة سطر الأوامر (CLI) الخاصة بـ Gatsby. انتقل إلى المكان الذي ترغب في تخزين هذا المشروع فيه وقم بتشغيل الأمر التالي:

gatsby new my-env-project https://github.com/colbyfayock/gatsby-starter-sass

يمكنك تغيير my-env-project إلى أي دليل ترغب في إنشاء هذا المشروع فيه، ولكن بمجرد تشغيل هذا الأمر، سيكون لديك الآن مشروع في هذا الدليل الجديد.

للبدء، بمجرد الدخول إلى هذا الدليل، قم بتشغيل yarn develop لإجراء تغييرات محليًا أو yarn build لتجميع موقعك الجديد. بمجرد أن تصبح جاهزًا، ستحتاج إلى إضافة هذا المشروع إلى Github. إذا لم تكن على دراية بكيفية القيام بذلك، يمكنك تعلم كيفية إضافة مشروع موجود إلى Github هنا.

الخطوة 2: إنشاء متغير بيئة محلي باستخدام Gatsby

خطوتنا التالية هي إنشاء بيئة محلية وإضافة تغيير يتيح لنا رؤية أنها تعمل. للبدء، دعنا أولاً ننشئ ملفًا جديدًا في جذر مشروعنا يسمى .env.development. قد يسألك عما إذا كنت تريد حقًا استخدام البادئة .، تأكد من قول نعم!

داخل هذا الملف، دعنا نضيف:

# Inside .env.development
GATSBY_MY_ENVIRONMENT= "Development"

بعد ذلك، للتأكد من أننا لن ننسى القيام بذلك، دعنا نضيف ملف .env.development هذا إلى ملف .gitignore الخاص بنا حتى لا نرتكب خطأ في إدراجه في سجل Git الخاص بنا. إذا لم يكن لديك بالفعل ملف .gitignore، فتأكد من إنشائه في جذر مشروعك.

أخيرًا، للتحقق من أن هذا يعمل، دعنا نفتح ملف pages/index.js ونستبدل محتوى وسم <h1> الخاص بنا بتغيير “Hello, world!”:

<h1>Hello, {process.env.GATSBY_MY_ENVIRONMENT}</h1>

وإذا حفظنا هذا التغيير وفتحناه في متصفحنا، يجب أن نرى “Hello, Development”!

تابع التغيير (commit)!

الخطوة 3: نشر الموقع على Netlify

لقد أنشأنا موقعنا باستخدام متغير بيئة بسيط. بعد ذلك، سنرغب في نشر هذا الموقع فعليًا على Netlify. إذا لم تكن قد فعلت ذلك بالفعل، فسنحتاج إلى إضافة موقعنا إلى Github أو أي مزود Git آخر. تأكد من إعداد ذلك قبل المتابعة.

بعد إنشاء حساب وتسجيل الدخول إلى Netlify، دعنا ننقر على زر New site from Git في لوحة التحكم الرئيسية، اتبع التعليمات لربط حساب Github الخاص بك أو أي مزود Git آخر بـ Netlify، ثم ابحث عن مستودعك الجديد.

بمجرد تحديد مستودعك، سيُطلب منك تهيئة عملية البناء. لحسن الحظ، يمكن لـ Netlify اكتشاف أننا نستخدم موقع Gatsby وقد قام بملء الإعدادات مسبقًا لنا. ما لم تكن قد أضفت شيئًا خاصًا، احتفظ بالتهيئة الأساسية لاستخدام gatsby build لبناء مشروعك و public/ للمخرجات.

الآن قبل أن نضغط على زر Deploy، هناك شيء واحد نريد إضافته، وهو متغير البيئة الخاص بنا! فوق زر Deploy site مباشرة يوجد زر Advanced. انقر عليه وسترى قائمة منسدلة جديدة مع زر إضافي New variable.

انقر على زر New variable، أضف GATSBY_MY_ENVIRONMENT كمتغير جديد وأضف Production كقيمة له. وأخيرًا، اضغط على Deploy site! من هنا، يجب أن تكون قادرًا على مشاهدة موقعك وهو ينشر وبمجرد الانتهاء، سترى موقعك الجديد مع “Hello, Production”!

إدارة متغيرات البيئة في Netlify بعد النشر

أين يمكنك إضافة أو تحديث المزيد من المتغيرات في Netlify؟

في مثالنا، أضفنا متغيرًا واحدًا فقط أثناء الإعداد. لكن Netlify يتيح لك إضافة أو تحديث أي متغيرات أخرى ترغب فيها. إذا كنت ترغب في أي وقت في تغيير هذا المتغير أو إضافة المزيد، يمكنك الانتقال إلى قسم البيئة (Environment) في إعدادات البناء والنشر (Build & deploy settings)، حيث يمكنك تعديل وإضافة أي متغيرات أخرى في قسم متغيرات البيئة (Environment variables).

الخلاصة التقنية

تُعد متغيرات البيئة أداة لا غنى عنها في تطوير الويب الحديث، حيث توفر مرونة وأمانًا لا مثيل لهما لإدارة التهيئة الحساسة عبر بيئات مختلفة. من خلال فصل الإعدادات عن الكود البرمجي، نضمن قابلية التنبؤ بالنشر ونحمي المعلومات الحيوية من الكشف غير المقصود. لقد أظهرنا كيف يمكن لـ Gatsby و Netlify تبسيط هذه العملية بشكل كبير، مما يتيح للمطورين التركيز على بناء الميزات بدلاً من القلق بشأن تفاصيل التهيئة الخاصة بالبيئة. إن تبني هذه الممارسة لا يعزز فقط أمان تطبيقاتك، بل يحسن أيضًا كفاءة سير عمل التطوير والنشر.