Τι είναι οι μεταβλητές περιβάλλοντος και πώς μπορώ να τις χρησιμοποιήσω με το Gatsby και το Netlify;

Όταν ξεκινάτε να ενσωματώνετε υπηρεσίες τρίτων στην εφαρμογή ή στον ιστότοπό σας, θα αρχίσετε να βρίσκετε χρήσιμο να έχετε διαφορετικά περιβάλλοντα, όπως περιβάλλον ανάπτυξης και παραγωγής.

Πώς μπορούμε να το διαμορφώσουμε έτσι ώστε να μην χρειάζεται να επεξεργαστούμε άμεσα τον κώδικά μας για να αλλάξουμε το περιβάλλον μας;

  • Τι είναι οι μεταβλητές περιβάλλοντος;
  • Πώς μπορούν να είναι χρήσιμες οι μεταβλητές περιβάλλοντος;
  • Πώς μπορώ να διατηρήσω αυτά τα αρχεία ασφαλή;
  • Μεταβλητές Gatsby και περιβάλλοντος
  • Μεταβλητές Netlify και περιβάλλοντος
  • Βήμα 1: Δημιουργία ιστότοπου "Γεια σας, κόσμος"
  • Βήμα 2: Δημιουργία τοπικής μεταβλητής περιβάλλοντος με το Gatsby
  • Βήμα 3: Ανάπτυξη του ιστότοπου στο Netlify
  • Πού μπορείτε να προσθέσετε ή να ενημερώσετε περισσότερες μεταβλητές στο Netlify;

Τι είναι οι μεταβλητές περιβάλλοντος;

Οι μεταβλητές περιβάλλοντος είναι προκαθορισμένες τιμές που χρησιμοποιούνται συνήθως για να παρέχουν τη δυνατότητα διαμόρφωσης μιας τιμής στον κώδικά σας έξω από την εφαρμογή σας.

Κατά την ανάπτυξη τοπικά, ή μερικές φορές ακόμη και σε έναν αγωγό ανάπτυξης, πολλές φορές θα βρείτε αυτές τις μεταβλητές αποθηκευμένες σε ένα αρχείο με όνομα παραλλαγής   .env.

Πώς μπορούν να είναι χρήσιμες οι μεταβλητές περιβάλλοντος;

Πιθανώς η πιο κοινή περίπτωση χρήσης για μεταβλητές περιβάλλοντος είναι η δυνατότητα ρύθμισης διαφορετικών επιλογών διαμόρφωσης για διαφορετικά περιβάλλοντα. Συχνά κατά την ανάπτυξη έναντι τρίτων υπηρεσιών, θέλετε να έχετε μια έκδοση ανάπτυξης ή ένα sandbox διαθέσιμο για να υποβάλλετε δοκιμαστικά αιτήματα, έτσι ώστε να μην επηρεάζει τα πραγματικά δεδομένα παραγωγής.

Οι μεταβλητές περιβάλλοντος είναι χρήσιμες επειδή σας επιτρέπουν να αλλάξετε ποιο από τα περιβάλλοντά σας χρησιμοποιεί ποιο περιβάλλον υπηρεσίας τρίτου μέρους αλλάζοντας ένα κλειδί API, ένα τελικό σημείο ή οτιδήποτε χρησιμοποιεί η υπηρεσία για να διακρίνει μεταξύ των περιβαλλόντων.

Ο κώδικας που αναπτύσσετε θα πρέπει να είναι προβλέψιμος, οπότε, χωρίς να χρειάζεται να αλλάξετε κανέναν κωδικό, απλώς τη διαμόρφωση εκτός του κώδικα, μπορείτε να διατηρήσετε αυτήν την προβλεψιμότητα.

Πώς μπορώ να διατηρήσω αυτά τα αρχεία ασφαλή;

Αυτό είναι πιθανώς ένα από τα πιο σημαντικά σημεία εδώ - πρέπει να βεβαιωθείτε ότι χειρίζεστε αυτά τα αρχεία με προσοχή και δεν τα ελέγχετε σε ένα αποθετήριο git. Εκθέτοντας αυτά τα κλειδιά ανεβάζοντάς τα κατά λάθος σε μια δημόσια τοποθεσία, το Διαδίκτυο θα μπορούσε εύκολα να βρει αυτά τα κλειδιά και να τα καταχραστεί για τα δικά του κέρδη.

Για παράδειγμα, τα κλειδιά AWS είναι μια πολύτιμη πηγή. Οι άνθρωποι τρέχουν ρομπότ με μοναδικό σκοπό την προσπάθεια σάρωσης του Github για κλειδιά. Εάν κάποιος βρει ένα κλειδί AWS, θα μπορούσε να χρησιμοποιήσει αυτό το κλειδί για να αποκτήσει πρόσβαση σε πόρους όπως η εκτέλεση μιας λειτουργίας bitcoin με δικά σας έξοδα. Αυτό δεν είναι για να σας τρομάξει, είναι για να σας ενημερώσει, ώστε να αποφύγετε την παραβίαση των κλειδιών σας.

Πώς μπορούμε λοιπόν να τα διατηρήσουμε ασφαλή; Ο ευκολότερος τρόπος είναι να προσθέσετε το αρχείο περιβάλλοντος όπου διατηρείτε αυτά τα κλειδιά στο .gitignoreαρχείο σας .

Για να το κάνετε αυτό, απλώς ανοίξτε το υπάρχον .gitignoreαρχείο σας ή δημιουργήστε ένα νέο στη ρίζα του αποθετηρίου σας και προσθέστε το όνομα αρχείου ως νέα γραμμή:

# Inside .gitignore .env 

Αν θέλετε να γίνετε πιο προηγμένοι και να βεβαιωθείτε ότι αυτό δεν συμβαίνει ποτέ σε ένα αποθετήριο, μπορείτε να δείτε μερικά εργαλεία όπως git-μυστικά από τα AWS Labs ή το GitLeaks που έχουν ακόμη και μια ενέργεια Github για να διευκολύνουν την ενσωμάτωση με το Github.

Μεταβλητές Gatsby και περιβάλλοντος

Το Gatsby από προεπιλογή κάνει δύο αρχεία διαθέσιμα ως μέρος της ροής εργασίας μεταβλητής περιβάλλοντος που καθιστά αυτές τις τιμές διαθέσιμες στον πελάτη: .env.developmentκαι .env.production. Αυτά σχετίζονται με τα σενάρια gatsby developκαι gatsby buildγια την ανάπτυξη ή την κατασκευή του ιστότοπού σας.

Για να χρησιμοποιήσετε αυτά τα αρχεία κατά τη διαδικασία ανάπτυξης και δημιουργίας του Gatsby, το Gatsby απαιτεί να προθέσετε αυτές τις μεταβλητές με GATSBY_. Αυτό λειτουργεί επίσης αν θέλετε να τα έχετε διαθέσιμα από επίπεδο διαδικασίας λειτουργικού συστήματος.

Αν και θα μπορούσατε να ενσωματώσετε το dotenv εάν έχετε πιο προχωρημένες ανάγκες ή δεν θέλετε να χρησιμοποιήσετε το GATSBY_πρόθεμα, το μονοπάτι σας με την ελάχιστη αντίσταση είναι πιθανώς να ακολουθήσετε τον τρόπο Gatsby όταν εργάζεστε στο Gatsby.

Μεταβλητές Netlify και περιβάλλοντος

Το Netlify παρέχει τη δυνατότητα προσθήκης μεταβλητών περιβάλλοντος ως μέρος των ρυθμίσεων Build & deploy που λαμβάνεται ως μέρος των διαδικασιών build.

Ευτυχώς, το Netlify καθιστά εύκολο να προσθέσετε όποια μεταβλητή περιβάλλοντος θέλετε στη διαδικασία κατασκευής! Για να προσθέσετε ένα, μπορείτε απλώς να μεταβείτε στην ενότητα Περιβάλλον της σελίδας Ρυθμίσεις κατασκευής & ανάπτυξης του έργου σας και να προσθέσετε μια μεταβλητή στην περιοχή Περιβάλλον μεταβλητές.

Θα σας καθοδηγήσουμε σε αυτήν τη διαδικασία λίγο αργότερα.

Βήμα 1: Δημιουργία ιστότοπου "Γεια σας, κόσμος"

Για την καθοδήγησή μας, πρόκειται να δημιουργήσουμε ένα πραγματικά βασικό παράδειγμα ενός ιστότοπου Gatsby μόνο για τους σκοπούς της δοκιμής αυτής.

Αν και αυτό δεν είναι πραγματικά μια συνηθισμένη περίπτωση μεταβλητών περιβάλλοντος, όπου συνήθως θα τις χρησιμοποιούσατε για πράγματα όπως κλειδιά API και διαμορφώσεις υπηρεσιών, αυτό θα σας δώσει μια υπέροχη ιδέα για το πώς λειτουργεί ουσιαστικά.

Θα χρησιμοποιήσουμε αυτό το Gatsby Sass Starter που δημιούργησα, το οποίο θα μας δώσει ένα σημείο εκκίνησης και θα προσθέσουμε το "Hello, [Environment]" ανάλογα με το πού λειτουργεί.

Για να ξεκινήσετε, ας δημιουργήσουμε το τοπικό μας έργο χρησιμοποιώντας το Gatsby CLI. Μεταβείτε στο σημείο όπου θέλετε να αποθηκεύσετε αυτό το έργο και εκτελέστε:

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

Μπορείτε να αλλάξετε my-env-projectσε οποιονδήποτε κατάλογο θέλετε να δημιουργήσει αυτό το έργο, αλλά μόλις εκτελέσετε αυτήν την εντολή, θα έχετε τώρα ένα έργο σε αυτόν τον νέο κατάλογο.

Για να ξεκινήσετε, όταν βρίσκεστε σε αυτόν τον κατάλογο, εκτελέστε yarn developγια να κάνετε αλλαγές τοπικά ή yarn buildγια να μεταγλωττίσετε τον νέο σας ιστότοπο.

Once you're ready to go, you'll want to add this project to Github. If you're not familiar with how to do this, you can learn how to add an existing project to Github here.

Step 2: Creating a local environment variable with Gatsby

Our next step is to create a local environment and add a change that will let us see that it works.

To get started, let's first create a new file at the root of our project called .env.development. It might ask you if you really want to use the . prefix, make sure you say yes!

Inside that file, let's add:

# Inside .env.development GATSBY_MY_ENVIRONMENT="Development" 

Next, to make sure we don't forget to do this, let's also add this .env.development file to our .gitignore so we don't accidentally commit this to our git history. If you don't already have a .gitignore file, make sure you create it at the root of your project.

Finally, to check that this works, let's open pages/index.js and let's replace our

tag's content with a "Hello, world!" variation:

Hello, {process.env.GATSBY_MY_ENVIRONMENT}

And if we save that change and open it in our browser, we should see "Hello, Development"!

Follow along with the commit!

Step 3: Deploying the website to Netlify

So we have our website created using a simple environment variable. Next we'll want to actually deploy that site to Netlify. If you haven't already, we'll need to add our website to Github or another Git provider. Make sure to have that set up before continuing on.

After creating an account and logging in to Netlify, let's click the New site from Git button the main dashboard, follow the instructions for connecting your Github or other Git provider to Netlify, and then find your new repository.

Once you select your repository, you'll be asked to configure your build process. Luckily, Netlify can detect that we're using a Gatsby site and has it pre-filled for us. Unless you've added something special, keep the basic configuration to use gatsby build to build your project and public/ for the output.

Now before we hit Deploy, there's one thing we want to add, and that's our environment variable!

Right above the Deploy site button there's an Advanced button. Click that and you'll see a new dropdown with an additional New variable button.

Click that New variable button, add our GATSBY_MY_ENVIRONMENT as a new variable and add Production as the value. And finally, hit Deploy site!

From here, you should be able to watch your website deploy and once finished, you'll see your new site with "Hello, Production"!

Where can you add or update more variables in Netlify?

With our example, we only added one variable during the setup. But Netlify lets you add or update any other variables you'd like.

Εάν θέλετε να αλλάξετε αυτήν τη μεταβλητή ή να προσθέσετε περισσότερες, μπορείτε να μεταβείτε στην ενότητα Περιβάλλον των ρυθμίσεων Δημιουργίας & ανάπτυξης , όπου μπορείτε να επεξεργαστείτε και να προσθέσετε άλλες μεταβλητές στην ενότητα Μεταβλητές περιβάλλοντος .

Θέλετε να μάθετε περισσότερα;

Εδώ είναι μερικά άλλα πράγματα που θα σας βοηθήσουν να ξεκινήσετε με τις βασικές αρχές ανάπτυξης!

  • Τι είναι το Gatsby και γιατί είναι ώρα να φτάσετε στο τρένο hype;
  • Τι είναι το JAMstack και πώς μπορώ να ξεκινήσω;
  • Πώς να γίνετε προγραμματιστής Web πλήρους στοίβας το 2020
  • Βάλτε το Javascript - Μάθετε HTML & CSS
  • Ρυθμίστε το μέλλον σας για επιτυχία με καλές συνήθειες κωδικοποίησης

Ακολουθήστε με για περισσότερα Javascript, UX και άλλα ενδιαφέροντα πράγματα!

  • ; Ακολούθησέ με στο τουίτερ
  • ; ️ Εγγραφείτε στο Youtube μου
  • ✉️ Εγγραφείτε στο Newsletter μου