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

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.

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

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,
 },
});

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),
},

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),
},

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,
},

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…
};

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();

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

Exemple d'utilisation :

import { serverDBEnv } from '@/config/db';
//
let connectionString = serverDBEnv.DATABASE_URL;

À 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.

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!