Al comenzar a integrar servicios de terceros en su aplicación o sitio web, comenzará a encontrar útil tener diferentes entornos, como un entorno de desarrollo y producción.
¿Cómo podemos configurar esto para que no tengamos que editar directamente nuestro código para cambiar nuestro entorno?
- ¿Qué son las variables de entorno?
- ¿Cómo pueden ser útiles las variables de entorno?
- ¿Cómo puedo mantener estos archivos seguros?
- Gatsby y variables de entorno
- Netlify y variables de entorno
- Paso 1: creación de un sitio web "Hola, mundo"
- Paso 2: crear una variable de entorno local con Gatsby
- Paso 3: implementar el sitio web en Netlify
- ¿Dónde puede agregar o actualizar más variables en Netlify?
¿Qué son las variables de entorno?
Las variables de entorno son valores predeterminados que se utilizan normalmente para proporcionar la capacidad de configurar un valor en su código desde fuera de su aplicación.
Al desarrollar localmente, o incluso a veces en una canalización de implementación, a menudo encontrará estas variables almacenadas en un archivo con algún tipo de variación de .env.
¿Cómo pueden ser útiles las variables de entorno?
Probablemente, el caso de uso más común para las variables de entorno es poder configurar diferentes opciones de configuración para diferentes entornos. A menudo, cuando se desarrolla contra servicios de terceros, desea tener una versión de desarrollo o un espacio aislado disponible para realizar solicitudes de prueba, de esa manera no afecta los datos de producción reales.
Las variables de entorno son útiles porque le permiten cambiar cuál de sus entornos usa qué entorno de servicio de terceros al cambiar una clave de API, un punto final o lo que sea que utilice el servicio para distinguir entre entornos.
El código que implemente debe ser predecible, por lo que al no tener que cambiar ningún código, solo la configuración fuera del código, puede mantener esa predictibilidad.
¿Cómo puedo mantener estos archivos seguros?
Este es probablemente uno de los puntos más importantes aquí: debe asegurarse de manejar estos archivos con cuidado y no registrarlos en un repositorio de git. Al exponer estas claves cargándolas inadvertidamente en un lugar público, Internet podría encontrarlas fácilmente y abusar de ellas para su propio beneficio.
Por ejemplo, las claves de AWS son una fuente valiosa. La gente ejecuta bots con el único propósito de intentar escanear Github en busca de claves. Si alguien encuentra una clave de AWS, podría usar esta clave para acceder a recursos como ejecutar una operación de bitcoin a su cargo. Esto no es para asustarlo, es para advertirlo y evitar que sus claves se vean comprometidas.
Entonces, ¿cómo podemos mantenerlos seguros? La forma más fácil es agregar el archivo de entorno donde guarda estas claves a su .gitignorearchivo.
Para hacer esto, simplemente abra su .gitignorearchivo existente o cree uno nuevo en la raíz de su repositorio y agregue el nombre del archivo como una nueva línea:
# Inside .gitignore .env Si desea avanzar más y asegurarse de que esto nunca le suceda a un repositorio, puede consultar algunas herramientas como git-secrets de AWS Labs o GitLeaks que incluso tiene una acción de Github para facilitar la integración con Github.
Gatsby y variables de entorno
Gatsby, por defecto, hace que dos archivos estén disponibles como parte de su flujo de trabajo de variable de entorno que hace que estos valores estén disponibles en el cliente: .env.developmenty .env.production. Estos se correlacionan con los scripts gatsby developy gatsby buildpara desarrollar o construir su sitio.
Para hacer uso de estos archivos dentro del proceso de desarrollo y construcción de Gatsby, Gatsby requiere que coloque el prefijo de estas variables con GATSBY_. Esto también funciona si desea tenerlos disponibles desde un nivel de proceso del sistema operativo.
Aunque podría integrar dotenv si tiene necesidades más avanzadas o no desea usar el GATSBY_prefijo, su camino de menor resistencia probablemente sea seguir el camino de Gatsby cuando trabaje en Gatsby.
Netlify y variables de entorno
Netlify brinda la capacidad de agregar variables de entorno como parte de su configuración de compilación e implementación, que se recoge como parte de los procesos de compilación.
Afortunadamente, Netlify facilita agregar cualquier variable de entorno que desee al proceso de compilación. Para agregar uno, simplemente puede navegar a la sección Entorno de la página de configuración de Construir e implementar de su proyecto y agregar una variable en Variables de entorno.
Lo guiaremos a través de este proceso un poco más tarde.
Paso 1: creación de un sitio web "Hola, mundo"
Para nuestro recorrido, vamos a configurar un ejemplo realmente básico de un sitio web de Gatsby solo con el propósito de probarlo.
Aunque este no es realmente un caso de uso común de variables de entorno, donde normalmente las usaría para cosas como claves de API y configuraciones de servicio, esto le dará una gran idea de cómo funciona fundamentalmente.
Vamos a usar este iniciador de Gatsby Sass que creé, que nos dará un punto de partida y agregará "Hola, [Entorno]" dependiendo de dónde se ejecute.
Para comenzar, creemos nuestro proyecto local usando la CLI de Gatsby. Navegue hasta donde le gustaría almacenar este proyecto y ejecute:
gatsby new my-env-project //github.com/colbyfayock/gatsby-starter-sass Puede cambiar my-env-projecta cualquier directorio en el que desee que se cree este proyecto, pero una vez que ejecute este comando, ahora tendrá un proyecto en ese nuevo directorio.
Para comenzar, una vez dentro de ese directorio, ejecute yarn developpara realizar cambios localmente o yarn buildpara compilar su nuevo sitio.
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.
If you'd ever like to change that variable or add more, you can navigate to the Environment section of the Build & deploy settings, where you can edit and add any other variables in the Environment variables section.
Looking to learn more?
Here are a few other things to help you get started with development fundamentals!
- What is Gatsby and why it's time to get on the hype train?
- What is the JAMstack and how do I get started?
- How to Become a Full Stack Web Developer in 2020
- Put Down the Javascript - Learn HTML & CSS
- Set Future You Up for Success with Good Coding Habits
- ? Follow Me On Twitter
- ?️ Subscribe To My Youtube
- ✉️ Sign Up For My Newsletter