# Variables de entorno para deployar

Cada instrucción o paso a paso en un despliegue es un **pipeline automatizado (CI/CD)**. Pero ¿qué significa eso? Un **pipeline** es una secuencia de pasos automatizados para pasar tu código en algo desplegado, visible, online, en producción.

#### Este es un ejemplo de flujo típico:

```
1. Trigger (evento)
2. Checkout (clonar repo)
3. Install (dependencias)
4. Build (compilar)
5. Test (opcional)
6. Deploy (publicar)
```

Y sucede por ejemplo cuando hacemos los sgts pasos en nuestro código:

```
git push → webhook → Netlify build → deploy
```

¿Cómo se ve la arquitectura detrás de activar el pipeline?

* [GitHub](https://kelly-hecate-villa.gitbook.io/github-profile-readme-cuc/) emite un **webhook:** \
  Un webhook es un mecanismo que envía datos en tiempo real de una aplicación a otra cuando ocurre un evento específico, utilizando peticiones HTTP POST. Actúa como una "notificación automática" o "API inversa", permitiendo que los sistemas se comuniquen sin tener que preguntar constantemente por actualizaciones. <br>
* Netlify escucha ese evento y se dispara un proceso basados en arquitectura de eventos la llamada: event-driven.

Pero entonces si una lista de instrucción ¿eónde se definen estos paso o el pipeline? Bueno, depende de la herramienta, en Netlify se puede definir en un archivo con extensión .toml:

```bash
netlify.toml
```

Y este sería el ejemplo de lo que lleva dentro, dos instrucciones, correr y publicar:

```toml
[build]
  command = "npm run build"
  publish = "dist"
```

En otros sistemas (ej: GitHub Actions) aquí entra YAML 👇 que es lo que usamos profesionalmente:

> File.[YAML (YAML Ain’t Markup Language) es un formato para definir configuraciones.](#user-content-fn-1)[^1]

Ejemplo de los pasoa que se seguirían en GitHub con GitHub Actions:

```yaml
name: Deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build
```

Lo que traduce esto es básicamente: "Cuando alguien haga push a main → ejecuta estos pasos".

***

## 🔐 Variables de entorno (clave en producción)

Entonces ya entendiendo que debemos seguir un conjunto de pasos para hacer un deploy o despliegue, y entendiendo que para que sea automático debemos meterlo en un archivo que corre él mismo esos pasos de forma ordenada, ¿qué pasaría con los datos que son variables? Tendremos que cambiar siempre los pasos de este archivo?&#x20;

Acá es donde conocemos las variables de entorno, son estos datos que cambian y se pueden manejar de forma externa al código lo que permiten configurar la app sin *hardcodear* data sensible.

Un ejemplo de lo que no se debe hacer o está mal como buenas prácticas es el hardcodeado:

```js
const apiKey = "123456";
```

Un ejemplo de lo que sí se debe hacer dentro de las buenas prácticas ✅ enviroment vars

```js
const apiKey = process.env.API_KEY;
// esto es una ubicación para encontrar un archivo y el dato api_key dentro del archivo.
```

Este archivo, obvio debe tener la correcta extensión para ser leído, esta extensión es .env y allí es donde defines variables de entorno.

Ejemplo:

```env
API_KEY=123456
DB_HOST=localhost
NODE_ENV=development
```

Listo.

Pero profe, ¿cómo se usa en Node.js? En entornos profesionales usamos dotenv:

```bash
npm install dotenv
```

```js
require('dotenv').config();

console.log(process.env.API_KEY);
```

***

{% hint style="info" %}

## ⚠️ Importante (muy importante)

`.env` NO se sube a GitHub
{% endhint %}

Debemos agregarlo como archivo que debe ser ignorado en `.gitignore` ¿recuerdas que sirve para que no se suban archivos sensibles a la nuble? bueno ahí debe ir, porque en los .env hay contraseñas y otras claves importantes.

Pero bueno, volviendo a Netlify:

***

## ¿Cómo se usan las variables de entorno en Netlify?

En Netlify no subes `.env`, sino que defines variables en:

👉 Site settings → Environment variables

Ejemplo:

```
API_URL=https://api.midominio.com
JWT_SECRET=supersecret
```

Netlify las inyecta en el build, el paso de armar el código.

Listo, hemos terminado esta práctica.

[^1]:


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kelly-hecate-villa.gitbook.io/netlify-workshop-cuc/variables-de-entorno-para-deployar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.