環境変数を設定する

関連

@now/nextではbuild.env、それ以外ではenvでマシンの環境変数を渡すことができます。

{
  "env": {
    "FOO": "BAR"
  },
  "build": {
    "env": {
      "FOO": "BAR"
    }
  }
}

隠したい値にはシークレット変数を設定する

「何とかkey」や「何とかtoken」のようにあまり見られたくない値があると思います。その場合はまずシークレット変数として、 now に登録してそれを使うようにします。これの登録にはnow secretコマンドを使います。

以下はtokenにxxxxxxという値を登録する例です。

now secret add token xxxxxx

登録が終わったら先程のenv設定で頭に@を付けて指定してあげるだけです。

{
  "env": {
    "TOKEN": "@token"
  },
  "build": {
    "env": {
      "TOKEN": "@token"
    }
  }
}

環境変数が登録されたか確認する方法

そういうログを吐いて、それをnow logsコマンドから見てチェックします。now logs <url> -n 500（500行）とすれば確実に見れると思います。

@now/node

これは中でconsole.log(process.env)とすればログを吐いてくれるので、適当にアクセスしたあとにnow logsでその部分をチェックします。

@now/next

@now/nextを使ったデプロイでは、デプロイフローの中でyarn now-buildが呼ばれています。なので、これにフックする形で吐かせるといいと思います。（頭にpreを付ける）

printenvはマシンに設定されている環境変数をすべて表示するコマンドです。

{
  "scripts": {
    "prenow-build": "printenv"
  }
}

NextJS の中で環境変数が見れるようにする

まだマシンに環境変数を設定しただけで NextJS の中では見ることができません。これにはnext.config.jsの Webpack の設定でwebpack.EnvironmentPluginなどを使って定義します。

先に Webpack をインストールだけしておきます。

yarn add -D webpack

そして、こんな感じでnext.config.jsの Webpack 設定に手を入れます。

module.exports = {
  webpack: config => {
    /* ...色々 */
    
    const webpack = require('webpack');
    config.plugins.push(
      new webpack.EnvironmentPlugin({
        TOKEN: 'default value'
      })
    );
  }
}

これでコードの中のprocess.env.TOKENで値が取得できるようになるはずです。