direnvの導入(mac環境)

Vue.js

direnv(https://github.com/direnv/direnv)は、git管理したくないパスワードや認証トークン、環境変数などをプロジェクト単位で管理できるものです。

Nuxt.jsのプロジェクトに導入したので、導入方法を記録しておきます。

インストール

$ brew install direnv

direnv導入


$ mkdir ~/my-project
$ cd ~/my-project
$ export BASE_URL=http://backend.test:8000/api > .envrc
$ direnv allow .
$ echo $BASE_URL
http://backend.test:8000/api

Nuxt.js導入例

nuxt.config.jsで環境変数を利用する場合は`process.env.定数名`です。

axios moduleのbaseURLに設定してみました。

*/
modules: [
  "@nuxtjs/axios",
  "@nuxtjs/auth"
],
axios: {
    baseURL: process.env.BASE_URL
},

さいごに

.zprofileにシェル起動時の設定を登録しておく。

eval "$(direnv hook zsh)"