Skip to main content

git に登録したくないキー項目を .env ファイルに追いやる

できること​

設定系の項目を 環境設定ファイルとして分離する。

git (特に GitHub などで 公開する場合) にうっかり情報漏洩してしまわないための仕組み。という理解。

  • ライブラリのライセンスキー
  • AWS や GitHub の API キー

等々

dotenv というライブラリを使用して実現可。

概要​

  1. /.env ファイルに 設定のキーと具体的な値を登録
  2. docusaurus.config.ts には キーのみ設定
  3. カスタムコンポーネントからは useDocusaurusContext 経由で参照

事前作業​

1. dotenv をインストール​

bash
npm install dotenv

2. docusaurus.config.ts で dotenv の有効化​

docusaurus.config.ts
import * as dotenv from 'dotenv';
dotenv.config();

設定例1. docusaurus.config.ts で完結するケース​

ここでは Google Analytics を例とした。

1. プロジェクト直下に .env ファイル用意​

.env
GOOGLE_ANALYTICS_TRACKING_ID=G-XXXXXXXXXX

2. docusaurus.config.ts 側では process.env.<変数名> のように参照​

docusaurus.config.ts
  plugins: [
    [
      '@docusaurus/plugin-google-gtag',
      {
        trackingID: process.env.GOOGLE_ANALYTICS_TRACKING_ID || '',
        anonymizeIP: true,
      },
    ],
  ]

設定例2. カスタムコンポーネントで参照の場合​

ここでは Amazon Associate を例とした。

1. プロジェクト直下に .env ファイル用意​

.env
AMAZON_ASSOCIATE_TRACKING_ID=XXXXXX-22

2. docusaurus.config.ts 側では process.env.<変数名> のように参照​

docusaurus.config.ts
  themeConfig: {
  // ...
  } satisfies Preset.ThemeConfig,

  customFields: {
    externalServices: {
      amazonAssociate: {
        trackingId: process.env.AMAZON_ASSOCIATE_TRACKING_ID,
      },
    },
  }
},

themeConfig 内に定義しても参照は出来るのだが、
あとで自前コンポーネント用だと分かりやすいように、推奨されている customFields に定義した。

3. カスタムコンポーネント側では docusaurus.config.ts 経由で取得​

src/components/XX.tsx
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

const AmazonLink: React.FC<AmazonLinkProps> = ({ product, title, alias, author, type = 'book' }) => {
  const { siteConfig } = useDocusaurusContext();
  const amazonAssociate = (siteConfig.themeConfig as any).amazonAssociate ?? {};
  const trackingId = amazonAssociate.trackingId as string | undefined;

  const url = `https://www.amazon.co.jp/dp/${product}?tag=${trackingId}`;
  
  ...
};

その他の注意点​

1. .gitignore に .env を追加​

せっかく追いやったのに、これを コミットしてしまったら意味がないので。

.gitignore
.env

2. チーム開発で使用するなら​

自分は1人用プロジェクトとしてしか使用してないので関係ないが、
チーム開発を考えるなら、以下のような対応もしとくと良さそう。

  • キーだけれておいた サンプル設定ファイルを用意しておく
  • ビルド前に .env の内容が存在するかを確認するチェックを prebuild や prestart に入れておくと、設定漏れに気づきやすい (はず)
.env.example
# Google Analytics トラッキングID (例: G-XXXXXX)
GOOGLE_ANALYTICS_TRACKING_ID=
...
Last updated on
以下広告