ホームページ > ウェブフロントエンド > jsチュートリアル > 環境変数に常にタイプ セーフティを追加する必要があるのはなぜですか?

環境変数に常にタイプ セーフティを追加する必要があるのはなぜですか?

Mary-Kate Olsen
リリース: 2024-09-24 06:25:02
オリジナル
678 人が閲覧しました

ちょっとした背景

しばらくコーディングをしたことがあれば、環境変数の重要性とそれが果たす役割を知っているでしょう。また、プロジェクトに環境変数が設定されていなかったという理由だけで発生したバグを特定する苦労も知っているでしょう。 、笑!

今年の初め、私は製品ベースのスタートアップ企業でフルスタック開発者のインターンとして働いていました。プロジェクトが成長するにつれて、環境変数の数も増加しました。そして、誰もが別々のブランチで別々の機能に取り組んでいたため、誰かがブランチに新しい環境変数を導入し、後でメイン ブランチにマージされたかどうかはわかりませんでした。これにより、ブランチをデプロイしようとしたときに問題が発生しました。新しい環境変数がプロジェクトに追加されたことはわかっていました。

その後、T3 スタックを紹介されましたが、そこには、環境変数に型安全性を追加するための素晴らしいソリューションがありました。そのような解決策が存在することさえ知りませんでした。まったく予期していなかったときに新しいことを学ぶのはいつも良い気分です。 T3 スタックは、zod と @t3-oss/env-nextjs パッケージを使用して、アプリケーションに型安全性を追加します。これは非常に気に入りました。それ以来、私は環境変数を常にタイプセーフにすることを約束しました。

新しいプロジェクトを開始している場合、またはすでにチームで作業している場合は、env にタイプ セーフティを追加することを強くお勧めします。これを追加するだけで、コードベースの問題を解決するための労力を節約できます。

プロジェクトに追加する方法はこちらをご覧ください。とてもシンプルです。

ゾッドとは何ですか?

Zod は、軽量で高速なスキーマ宣言および検証ライブラリです。スキーマは、単純な文字列、数値から複雑なオブジェクト タイプまで何でも可能です。

基本的な使い方

import {z} from 'zod';

const myBoolean = z.boolean();

myBoolean.parse('true'); // throws error
myBoolean.parse(true) // valid

ログイン後にコピー

ネストされたオブジェクトスキーマの作成

import { z } from 'zod';

const userSchema = z.object({
    name: z.string(),
    age: z.number(),
    address: z.object({
        house_no: z.string(),
        locality: z.string(),
        city: z.string(),
        state: z.string(),
    })
});
ログイン後にコピー

単純なオブジェクト スキーマを作成することも、ネストされたオブジェクト スキーマを作成することもできます。

t3-oss/env-nextjs とは何ですか?

これは、環境変数に型安全性を追加するのに役立つ単なるパッケージです

タイプセーフな環境変数を作成しましょう

プロジェクトのルートに env.js ファイルを作成します。

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: {
    DB_URI: z.string().url(),
  },
  /*
   * 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: {
    DB_URI: process.env.DATABASE_URL,
    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:
      process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
  },
});
ログイン後にコピー

使用法

import {env} from '@/env';

const CLERK_PUBLISHABLE_KEY = env.NEXT_PUBLISHABLE_KEY;

ログイン後にコピー

NEXT_PUBLISHABLE_KEY の上にカーソルを置くと、その値が文字列として入力されていることがわかります。これは、環境変数が入力されたことを意味します。

タイプ セーフな環境変数を追加しましたが、これはビルド時に毎回実行されるわけではありません。新しく作成したファイルを next.config.js ファイルにインポートする必要があります。そのためには unjs/jiti パッケージを使用できます。

まず、npm から jiti パッケージをインストールします。

import { fileURLToPath } from "node:url";
import createJiti from "jiti";
const jiti = createJiti(fileURLToPath(import.meta.url));

jiti("./app/env");
ログイン後にコピー

import.meta.url を使用する場合、現在作業しているファイルの URL が提供されます。ただし、これには file:/// プレフィックスが含まれていますが、これは望ましくない可能性があります。そのプレフィックスを削除するには、node:url モジュールの fileURLToPath 関数を使用できます。

例:

import {fileURLToPath} from 'node:url';

// Convert the file URL to a path
const filename = fileURLToPath(import.meta.url);

ログイン後にコピー

必要な環境変数がない場合は、次のようなエラーが表示されます -

Why you should always add type safety to your environment variables?

Node.js プロジェクトの環境変数にタイプ セーフティを追加するにはどうすればよいですか?

import dotenv from "dotenv";
import { z } from "zod";

dotenv.config();

const schema = z.object({
  MONGO_URI: z.string(),
  PORT: z.coerce.number(),
  JWT_SECRET: z.string(),
  NODE_ENV: z
    .enum(["development", "production", "test"])
    .default("development"),
});

const parsed = schema.safeParse(process.env);

if (!parsed.success) {
  console.error(
    "❌ Invalid environment variables:",
    JSON.stringify(parsed.error.format(), null, 4)
  );
  process.exit(1);
}

export default parsed.data;

ログイン後にコピー

Node.js プロジェクトでは、単純に zod スキーマを作成し、それを process.env に対して解析して、すべての環境変数が設定されているかどうかを確認します。

使用法

import express from "express";
import env from "./env";

const app = express();
const PORT = env.PORT || 5000; // PORT is type safe here....

app.listen(PORT, () => {
console.log("Connected to server on PORT ${PORT}");
connectDB();
});

ログイン後にコピー

これが、環境変数にタイプ セーフティを追加する方法です。このチュートリアルで何か新しいことを学んでいただければ幸いです。

コーディングを楽しんでください!! ?

以上が環境変数に常にタイプ セーフティを追加する必要があるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート