👌

dotenv の利用方法

2024/05/15に公開

Node.js

TypeScript

tech

はじめに

この記事では ts-node から環境変数の .env を読み込むために dotenv を利用する方法を記載します。

作業プロジェクトの準備

TypeScript の簡易プロジェクトを作成します。

package.json を　作成

まず、package.json を作成します。

$ mkdir -p next-dotenv
$ cd next-dotenv
$ pnpm init

下記で package.json を上書きします。ポイントは scripts に 3 つのスクリプトを追加しています。typecheck で型をチェックし、dev でローカルで動作確認、build でトランスパイルします。

package.json

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts",
  "scripts": {
    "typecheck": "tsc --noEmit",
    "dev": "ts-node index.ts",
    "build": "tsc"
  },
  "keywords": [],
  "author": ""
}

TypeScript & ts-node をインストール

TypeScript と ts-node をインストールします。

$ pnpm install -D typescript ts-node @types/node

TypeScriptの設定ファイルを作成

tsconfig.json を作成します。

$ npx tsc --init

tsconfig.json を上書きします。

tsconfig.json

{
  "compilerOptions": {
    "target": "es2022",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop":true
  },
  "include": ["**/*.ts","**/*.js"],
  "exclude": ["node_modules", "dist"]
}

git を初期化します。

$ git init

.gitignore を作成します。

$ touch .gitignore

.gitignore

# dependencies
node_modules

動作確認コードを作成

動作を確認するためのコードを作成します。

$ touch index.ts

index.ts

console.log('Hello, World');

型チェック

型チェックします。

$ pnpm run typecheck

動作確認

動作確認を実施します。

$ pnpm run dev

Hello, World

コミットします。

$ git add .
$ git commit -m "feat:初回コミット"

環境変数ファイルを作成

.env ファイルを作成します。

$ touch .env

.env

MESSAGE='Universe'

.gitignore に環境変数ファイルを追加します。

$ vi .gitignore

.gitignore

+# # env files
+.env*.local
+.env

dotenv をインストール

dotenv をインストールします。

$ pnpm install dotenv -D

dotenv を利用

index.ts に dotenv をインポートし環境変数の MESSAGE を読み込みます。