Nuxt.jsアプリケーションをHerokuにデプロイする

公開日時2020-03-30 12:00

更新日時2020-03-31 10:58

Nuxt.jsアプリケーションの確認環境が欲しかったのでHerokuにデプロイすることにした。

公式ドキュメントに沿って以下の環境変数を設定。

heroku config:set NPM_CONFIG_PRODUCTION=false
heroku config:set HOST=0.0.0.0
heroku config:set NODE_ENV=production

typescriptプロジェクトだったのでProcfileには以下を記述。

web: yarn run start

1点、vueコード内で[[process.env.SAMPLE_ENV]]と書いていた部分がNODE_ENV=productionの場合だとundefinedになってしまいハマった。

クライアントサイドで使用する環境変数は[[nuxt.config.js]]のenvに追加しておく必要があった。

const config: Configuration = {
  env: {
    SAMPLE_ENV: process.env.SAMPLE_ENV
  }
}

これでHerokuで確認できるようになった。

参考