NuxtjSをSPAモードで実装し、buildしてDistをS3へデプロイするのはよくあるケースだが、
その際に環境変数がうまく適用されない時がしばしばある。

そんな時はdotenvを使用して対応する。

パッケージのインストール

yarn add @nuxtjs/dotenv -D
yarn add dotenv -D

環境変数を取得し適用させる

.envの作成

プロジェクトのルートディレクトリへ.envを作成します。

ENV=dev
EXAMPLE=exampleValue

nuxt.config.jsの修正

nuxt.config.jsを開いて下記のように修正してください。

require("dotenv").config()
const {ENV, EXAMPLE} = process.env
export default {
    env: {
      dev: ENV !== 'production',
      EXAMPLE,
    } 
}

ビルド

設定はこれで済んだので、あとはビルドするだけ。
ビルド後にnuxt start し、console.logなどで値を確認するとちゃんと入っているはずです。

nuxt build
nuxt start
console.log(process.env.dev) // true
console.log(process.env.EXAMPLE) // exampleValue

TIPS

CIなどで自動的に.envを作成する場合は下記のようにします。

// package.json
{
  "scripts"  : {
    "build:dev": "npm run env:dev && nuxt build",
    "build:prd": "npm run env:prd && nuxt build",
    "env:dev": "cp env/dev .env",
    "env:prd": "cp env/prd .env"
  } 
}

// env/prd
ENV=production

// env/dev
ENV=dev

ビルド後はdistディレクトリ以下を、s3 syncでデプロイします。

 s3 sync ./dist s3://{bucket_name}