Gatsbyプロジェクトで環境変数を使う方法

2022-05-12

Gatsby公式のこちらに書いてあるような内容の一部を日本語でメモしたものです。

  • OSに依存するコマンドラインから渡す方式は説明しません。
  • .env.* ファイルを使用する方法のみ説明します。

Gatsbyがサポートする2種類の環境変数

  • Development: gatsby develop で使われるもの。
  • Production: gatsby build 又は gatsby serve でつかわれるもの。

環境変数を使用可能にするには

Gatsbyでは、既にnpmパッケージの dotenv が使えるようになっていますが、gatsby-config.js に次の最初の3行の設定をする必要があります。

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
});

module.exports = {

環境変数の指定

ルートフォルダに、.env.development や .env.production ファイルを置き、次の調子で設定します。

# Airtable API Key (Help > API Documentation)
AIRTABLE_API_KEY="keykMi4rB8NByWOuK"
AIRTABLE_BASE_ID="appJjvnYw54DbKrcT"

環境変数の利用

次の調子で利用します。

const IndexPage = () => {
  const Airtable = require('airtable');
  const base = new Airtable({ apiKey: `${process.env.AIRTABLE_API_KEY}` }).base(
    `${process.env.AIRTABLE_BASE_ID}`
  );

JAMstack, 中級の学習, 学習

Posted by pitang1965