Maison > interface Web > js tutoriel > Voici comment Lobechat applique la sécurité de type à ses variables d'environnement dans l'application Next

Voici comment Lobechat applique la sécurité de type à ses variables d'environnement dans l'application Next

Barbara Streisand
Libérer: 2024-11-06 12:31:02
original
695 Les gens l'ont consulté

Dans cet article, vous découvrirez l'environnement T3 et son utilisation avec un exemple. Nous analysons également l'utilisation de l'environnement T3 dans Lobechat.

Here’s how Lobechat applies typesafety to its environment variables in Next app

T3 env

Lorsque vous visitez le site Web d'environnement T3, il porte ce titre de héros « Validation indépendante du framework pour les variables d'environnement de type sécurisé ». avec cette description - «Ne créez plus jamais vos applications avec des variables d'environnement non valides. Validez et transformez votre environnement avec toute la puissance de Zod. »

Vous pouvez utiliser l'environnement T3 pour appliquer des validations de type sécurisé sur vos variables d'environnement afin de ne pas finir par déployer une application avec des variables d'environnement non valides. mais comment appliquer ces validations ? découvrons-le.

Installation

Utilisez la commande ci-dessous pour installer l'environnement T3 dans votre projet.

# Core package, no framework specific features
pnpm add @t3-oss/env-core zod
# or, with options preconfigured for Next.js
pnpm add @t3-oss/env-nextjs zod
Copier après la connexion

Utilisation

L'utilisation de l'environnement T3 est simple, vous devez d'abord définir votre schéma comme indiqué ci-dessous :

// src/env.mjs
import { createEnv } from "@t3-oss/env-nextjs";
import { z } from "zod";
export const env = createEnv({
 /*
 * Serverside Environment variables, not available on the client.
 * Will throw if you access these variables on the client.
 */
 server: {
 DATABASE_URL: z.string().url(),
 OPEN_AI_API_KEY: z.string().min(1),
 },
 /*
 * Environment variables available on the client (and server).
 *
 * ? You'll get type errors if these are not prefixed with NEXT_PUBLIC_.
 */
 client: {
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().min(1),
 },
 /*
 * Due to how Next.js bundles environment variables on Edge and Client,
 * we need to manually destructure them to make sure all are included in bundle.
 *
 * ? You'll get type errors if not all variables from `server` & `client` are included here.
 */
 runtimeEnv: {
 DATABASE_URL: process.env.DATABASE_URL,
 OPEN_AI_API_KEY: process.env.OPEN_AI_API_KEY,
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:
 process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
 },
});
Copier après la connexion

La documentation Github pour l'environnement T3 fournit un exemple basé sur Next.js. Portez une attention particulière aux commentaires fournis dans l'exemple ci-dessus. Étant donné que Next.js est un framework full-stack, vous disposez de variables d'environnement pour le serveur et le client et vous devez faire attention à ne pas exposer vos variables d'environnement côté serveur à

client.

L'environnement T3 vous oblige à définir les types d'environnement de votre serveur dans l'objet serveur du schéma.

/*
* Serverside Environment variables, not available on the client.
* Will throw if you access these variables on the client.
*/
server: {
 DATABASE_URL: z.string().url(),
 OPEN_AI_API_KEY: z.string().min(1),
},
Copier après la connexion

De même, définissez les types des variables d'environnement côté client

/*
 * Environment variables available on the client (and server).
 *
 * ? You'll get type errors if these are not prefixed with NEXT_PUBLIC_.
*/
client: {
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().min(1),
},
Copier après la connexion

Jusqu'à présent, nous avons uniquement défini les variables et leurs types côté client et côté serveur. L'étape suivante consiste à définir runtimeEnv.

/*
* Due to how Next.js bundles environment variables on Edge and Client,
* we need to manually destructure them to make sure all are included in bundle.
*
* ? You'll get type errors if not all variables from `server` & `client` are included here.
*/
runtimeEnv: {
 DATABASE_URL: process.env.DATABASE_URL,
 OPEN_AI_API_KEY: process.env.OPEN_AI_API_KEY,
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:
 process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
},
Copier après la connexion

Utilisez le schéma dans votre application avec la saisie semi-automatique et l'inférence de type

// src/app/hello/route.ts
import { env } from "../env.mjs";
export const GET = (req: Request) => {
 const DATABASE_URL = env.DATABASE_URL;
 // use it…
};
Copier après la connexion

Vous pouvez importer env dans le fichier qui le nécessite et vous avez maintenant la sécurité de type appliquée à vos variables d'environnement avec

complétion automatique.

Utilisation par Lobechat de l'environnement T3

Lobechat définit le schéma, comme expliqué ci-dessus, dans src/config/db.ts.

import { createEnv } from '@t3-oss/env-nextjs';
import { z } from 'zod';
export const getServerDBConfig = () => {
 return createEnv({
 client: {
 NEXT_PUBLIC_ENABLED_SERVER_SERVICE: z.boolean(),
 },
 runtimeEnv: {
 DATABASE_DRIVER: process.env.DATABASE_DRIVER || 'neon',
 DATABASE_TEST_URL: process.env.DATABASE_TEST_URL,
 DATABASE_URL: process.env.DATABASE_URL,
DISABLE_REMOVE_GLOBAL_FILE: process.env.DISABLE_REMOVE_GLOBAL_FILE === '1',
KEY_VAULTS_SECRET: process.env.KEY_VAULTS_SECRET,
NEXT_PUBLIC_ENABLED_SERVER_SERVICE: process.env.NEXT_PUBLIC_SERVICE_MODE === 'server',
 },
 server: {
 DATABASE_DRIVER: z.enum(['neon', 'node']),
 DATABASE_TEST_URL: z.string().optional(),
 DATABASE_URL: z.string().optional(),
DISABLE_REMOVE_GLOBAL_FILE: z.boolean().optional(),
KEY_VAULTS_SECRET: z.string().optional(),
 },
 });
};
export const serverDBEnv = getServerDBConfig();
Copier après la connexion

Ce serverDBEnv est utilisé dans server/core/db.ts.

Exemple d'utilisation :

import { serverDBEnv } from '@/config/db';
//
let connectionString = serverDBEnv.DATABASE_URL;
Copier après la connexion

À propos de nous :

Chez Thinkthroo, nous étudions les grands projets open source et fournissons des guides architecturaux. Nous avons développé des composants réutilisables, construits avec tailwind, que vous pouvez utiliser dans votre projet. Nous proposons des services de développement Next.js, React et Node.

Prenez rendez-vous avec nous pour discuter de votre projet.

Here’s how Lobechat applies typesafety to its environment variables in Next app

Références

1. https://github.com/t3-oss/t3-env

2. https://github.com/lobehub/lobe-chat/blob/main/src/config/db.ts

3. https://env.t3.gg/

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal