【Next.js】nowコマンドでAPIキーなどの環境変数を設定する

Next.js

Next.jsでデプロイ前に環境変数を設定する際には以下のコマンドを用いることができます。

now secret add で環境変数を追加

$ now secrets add <secret-name> <secret-value>

以下は一例です。

$ now secret add FIREBASE_API_KEY xxxxxxxxxxxx
> Success! Secret firebase_api_key added

ルートディレクトリのnow.jsonに追加

ルートディレクトリにnow.jsonを作成し、先ほど now secret add で追加した環境変数を記述しましょう。

以下は一例です。

{
    "env": {
      "FIREBASE_API_KEY": "@firebase_api_key",
      "FIREBASE_AUTH_DOMAIN": "@firebase_auth_domain",
      "FIREBASE_DATABASE_URL": "@firebase_database_url",
      "FIREBASE_PROJECT_ID": "@firebase_project_id",
      "FIREBASE_STORAGE_BUCKET": "@firebase_storage_bucket",
      "FIREBASE_MESSAGING_SENDER_ID": "@firebase_messaging_sender_id",
      "FIREBASE_APP_ID": "@firebase_app_id",
      "stripeKey": "@stripekey"
    },
    "build": {
        "env": {
            "FIREBASE_API_KEY": "@firebase_api_key",
            "FIREBASE_AUTH_DOMAIN": "@firebase_auth_domain",
            "FIREBASE_DATABASE_URL": "@firebase_database_url",
            "FIREBASE_PROJECT_ID": "@firebase_project_id",
            "FIREBASE_STORAGE_BUCKET": "@firebase_storage_bucket",
            "FIREBASE_MESSAGING_SENDER_ID": "@firebase_messaging_sender_id",
            "FIREBASE_APP_ID": "@firebase_app_id",
            "stripeKey": "@stripekey"
        }
    }
  }

少し、変数を記述する際に癖があり、以下のように追加した場合には、

$ now secret add FIREBASE_API_KEY xxxxxxxxxxxx
> Success! Secret firebase_api_key added

以下のように「@」から始めなければならないようです。

"FIREBASE_API_KEY": "@firebase_api_key",

デプロイ

Next.jsでは以下のコマンドでデプロイできます。

$ now

もし、Firebase Authorizationなどを使用している場合には、

Firebase Authorization > ログイン方法 > 承認済みドメイン　へ、nowでデプロイした際に発行されたドメインを追加しておきましょう。

参考

zeit.co