Premiers pas avec le branchement Neon —

Se diviser pour apporter des modifications au code est une approche éprouvée du développement de logiciels, mais pourquoi le développement de bases de données devrait-il être différent ? Bien, branchement avec Neon vous permet d’apporter des modifications à votre base de données sans affecter l’environnement de production. Si vous connaissez Gitvous vous sentirez comme chez vous.

À des fins de démonstration et pour expliquer le fonctionnement du branchement, j’utiliserai un formulaire typique de « contactez-nous » et j’effectuerai une modification « fictive ».

Le formulaire soumet actuellement les champs suivants.

• name
• email_address
• company_website
• company_size
• message

Le formulaire fonctionne en envoyant les données du formulaire à l’aide d’une requête côté client à un Fonction Vercel Edgequi à son tour se connecte en toute sécurité à un Base de données Postgres sans serveur Neon.

Voici un extrait de la demande de récupération côté client.

const handleSubmit = async (event) => {
  event.preventDefault();

  const data = Object.fromEntries(
    new FormData(event.currentTarget).entries()
  );

  try {
    await fetch('/api/submit', {
      method: 'POST',
      body: JSON.stringify({ data }),
    });
  } catch (error) {
    console.error(error);
  }
};

Et voici un extrait de code de la fonction Edge qui déstructure les valeurs du formulaire du corps de la requête et INSERTplacez-les dans une table nommée contact_us.

import { neon } from '@neondatabase/serverless';

export default async function handler(req) {
  const {
    data: { name, email_address, company_website, company_size, message },
  } = await new Response(req.body).json();

  const sql = neon(process.env.DATABASE_URL);

  try {
    await sql`INSERT INTO contact_us 
        (name, email_address, company_website, company_size, message)
            VALUES(
      ${name},
      ${email_address},
      ${company_website},
      ${company_size},
      ${message}
        );`;

    return Response.json({
      message: 'A Ok!',
    });
  } catch (error) {
    return Response.json({
      message: 'Error',
    });
  }
}

export const config = {
  runtime: 'edge',
};

Le changement que je souhaite apporter se produira « en coulisses » et, en plus des informations saisies par l’utilisateur, je souhaite également capturer et stocker l’emplacement géographique de l’endroit dans le monde où le formulaire a été soumis.

Pour ce faire, je vais utiliser celui de Vercel fonction d’aide à la géolocalisation du @vercel/bord emballer. Les modifications que je vais apporter affecteront à la fois la fonction Edge et le schéma de la table de base de données.

Je ne souhaite pas modifier le schéma de table sur la base de données de production en direct tant que je n’ai pas testé que tout fonctionne correctement, et grâce au branchement, je n’ai pas à le faire.

Voici comment je procéderais pour effectuer un changement de cette nature.

Créer une branche avec Neon

Neon a une console de navigateur super cool (il suffit de la regarder ! 😍), et toutes les modifications de la base de données peuvent être apportées et testées dans le navigateur, sans s’embêter avec une fenêtre de terminal au look idiot !

1. Le projet s’appelle branching-sample.
2. Le nom de la branche principale est main.
3. Pour créer une branche, cliquez sur ce bouton.

En cliquant sur « Créer une branche », vous accéderez à l’écran suivant où je configurerai la nouvelle branche.

1. Ce sera le nom de la nouvelle succursale. En règle générale, je nommerai la branche de la même manière que la branche Git. (Je vais vous montrer ça sous peu).
2. Il s’agit de la branche mère à partir de laquelle je souhaite « me séparer ». Normalement, ce sera toujours la branche principale, mais dans certains cas, je pourrais partir d’une autre branche.

3. Ce sont les options de configuration des branches. Pour cette démonstration, je vais créer une branche en utilisant le Tête option. Il existe un certain nombre de raisons pour lesquelles partir d’un point spécifique Tempsou LSN sont plus adaptés. Par exemple, dans les cas où vous effectuez une sauvegarde ou déboguer un problème et souhaitez voir « quand les choses ont mal tourné ».

   1. Tête: Crée une branche avec les données jusqu’au moment actuel.
   2. Temps: Crée une branche avec des données jusqu’à la date et l’heure spécifiées.
   3. LSN: Crée une branche avec des données jusqu’au numéro de séquence de journal (LSN) spécifié

4. Afin de tester les modifications que je vais apporter à la fonction Edge (que j’expliquerai dans un instant), je veux m’assurer que j’insère correctement les données. En créant un point de terminaison de calcul avec la branche, je peux le faire sans craindre de gâcher la base de données de production !

5. Un bouton qui créera la nouvelle branche

En cliquant sur « Créer la branche », vous passerez à l’écran suivant.

C’est là que les choses deviennent vraiment très cool !

1. Il s’agit d’une nouvelle chaîne de connexion pour une toute nouvelle base de données, et elle a été configurée presque instantanément et contient des données « réelles » ! Un point clé à communiquer est que toutes les données transmises à cette branche ne le fera pas apparaîtra dans l’environnement de production, mais cette « copie » de la base de données sera identique à la base de données de production, conformément à l’endroit d’où vous avez dérivé, dans mon cas, Head.
2. Le bouton Copier vous permet de copier rapidement la chaîne de connexion.

Ajoutez la chaîne de connexion de branche à votre environnement de développement local.

En utilisant le petit bouton pratique « copier », je peux copier la nouvelle chaîne de connexion et l’ajouter à mon .env déposer.

1. C’est juste mon approche préférée bien sûr mais, à mon avis .env fichier, je commente la chaîne de connexion à la base de données de production et j’ajoute une nouvelle variable utilisant le même nom de DATABASE_URL. J’ajoute ensuite un commentaire au dessus avec le nom de la branche que j’ai utilisée dans la console Neon. Et pour ce que ça vaut, ma branche Git porte également le même nom.

J’ai trouvé cela très utile lorsque j’ai plusieurs succursales en déplacement en même temps. Ce petit commentaire au-dessus de la chaîne de connexion m’aide à identifier à quelle branche il se rapporte dans la console Neon.

Changer de branche dans la console Neon

Avant d’aller trop loin, j’aime vérifier que je visualise la bonne branche dans la console Neon. Si vous avez suivi les étapes ci-dessus, vous devriez pouvoir voir votre nouvelle branche en sélectionnant « Branches » dans la navigation.

1. Oui, c’est la nouvelle branche que j’ai créée.

En cliquant sur le nom de la branche, vous accéderez à l’écran suivant.

1. À partir de l’éditeur SQL, vous pouvez également basculer entre les branches, ce qui facilite l’exécution de requêtes sur différentes branches.

Modifier le schéma de la table de base de données

Avant d’apporter des modifications au code, je prépare la base de données et teste tout son fonctionnement en exécutant des commandes SQL directement dans l’éditeur SQL de Neon.

Afficher le schéma de table actuel

Pour déterminer quel est le schéma actuel du contact_us à quoi ressemble la table, je peux accéder à « Tables » dans la navigation et voir le schéma de la table.

1. Affichage de la branche sur laquelle vous vous trouvez actuellement.
2. Le schéma pour le contact_us tableau.

Je sais que le changement que je souhaite apporter nécessitera l’ajout de deux nouvelles colonnes qui stockeront les données de géolocalisation. Les deux nouveaux noms de colonnes seront les suivants.

1. code postal
2. ville

MODIFIER le tableau

Pour ajouter les nouvelles colonnes, j’utilise la commande SQL suivante.

ALTER TABLE contact_us 
ADD COLUMN country_code VARCHAR,
ADD COLUMN city VARCHAR;

1. En utilisant le ALTER TABLE commande J’ajoute les deux colonnes nommées ci-dessus et leur donne un type de données de VARCHAR.

Pour vérifier que les modifications ont été apportées correctement, je peux retourner à « Tables » et jeter à nouveau un œil au schéma de la table.

1. Affichage de la branche sur laquelle vous vous trouvez actuellement.
2. Le city et country_code des colonnes ont été ajoutées au schéma pour le contact_us tableau.

Maintenant que je sais que la table est correctement configurée, je vais retourner à « l’éditeur SQL » et exécuter un rapide INSERT pour vérifier qu’il n’y a pas d’erreurs.

1. INSERT instruction pour ajouter une ligne qui inclut les valeurs du nouveau country_code et city colonne.
2. Confirmation que la demande a abouti.

Si je SELECT * FROM contact_usje verrai que la ligne que j’ai ajoutée contiendra le country_code et city Colonnes.

1. Une nouvelle ligne a été ajoutée avec les valeurs correctes pour country_code et city.

Ces données de test seront uniquement ajoutées à la branche, pas à l’environnement de production, afin que vous puissiez exécuter en toute sécurité autant de tests que vous le souhaitez sans polluer les « vraies » données.

Une fois le changement confirmé, je peux maintenant revenir au main branche et exécutez le ALTER commande précédente.

Cela appliquera les modifications à la base de données de production !

ALTER TABLE contact_us 
ADD COLUMN country_code VARCHAR,
ADD COLUMN city VARCHAR;

Je peux revérifier, revérifier que cela a fonctionné en accédant à nouveau à « Tables » dans la console. Si tout va bien, je peux supprimer en toute sécurité la branche de développement : feat/geolocation-data et passez à apporter les modifications requises à ma fonction Edge 🎉

Installer @vercel/edge

Les valeurs que j’ajouterai au INSERT L’instruction peut être extraite des requêtes entrantes adressées à une fonction Edge. Pour accéder à ces valeurs, j’utiliserai le géolocalisation fonction d’assistance du @vercel/edge package.

Pour utiliser ce package, je dois d’abord l’installer.

npm install @vercel/edge

Je peux ensuite l’utiliser dans ma fonction Edge. Voici une différence du changement. Tu peux voir la différence complète pour le PR sur mon GitHub ici.

import { neon } from '@neondatabase/serverless';
+ import { geolocation } from '@vercel/edge';

export default async function handler(req) {
  const {
    data: { name, email_address, company_website, company_size, message },
  } = await new Response(req.body).json();

+  const { country, city } = geolocation(req);

  const sql = neon(process.env.DATABASE_URL);

  try {
    await sql`INSERT INTO contact_us (
        name,
        email_address,
        company_website,
        company_size,
        message,
+       country_code,
+       city
       )
     VALUES(
       ${name},
       ${email_address},
       ${company_website},
       ${company_size},
       ${message},
+      ${country},
+      ${city}
      );
     `;

    return Response.json({
      message: 'A Ok!',
    });
  } catch (error) {
    return Response.json({
      message: 'Error',
    });
  }
}

export const config = {
  runtime: 'edge',
};

Un problème avec ce paquet lors des tests locaux est à la fois le country et city sera null. Le geolocation La fonction ne renverra les valeurs réelles que lorsque la fonction Edge aura été déployée. ☝️

Et voilà, brrrrranches !

Les branches sont un moyen vraiment agréable (et sûr) de configurer ou de reconfigurer votre base de données sans craindre de gâcher la base de données de production, et d’après mon expérience, les branches peuvent vraiment aider à accélérer le temps de développement, et peu importe le nombre de tests. INSERTLorsque j’exécute, les données de test resteront toujours sur la branche et n’affecteront jamais l’environnement de production.

Si vous souhaitez essayer Neon aujourd’hui, venez ici et inscrivez-vous : néon.techvous voudrez peut-être également jeter un coup d’œil à nos guides de démarrage :

(je)