RailsのJSで.envファイルに書いた環境変数を呼び出す方法

手順

① gem 'dotenv'をDL(dotenv-railsでも可。どっちか)
② `config/webpack/environments.jsにdotenv呼び出すロジックを追記
③ .envファイルに呼び出したい環境変数を設置
④ JSで環境変数を呼び出す

大前提

・Railsに限らず、.envファイルで設定した環境変数をJSで呼び出すには、webpackとの連携が必要になるみたいです。
Vue.jsでも、なんでも。

・API連携などで、連携の為に発行されるIDなどを、.envファイルに記述し、dotenvで管理する、という手法もRailsに限らずの話です。
わからない方は調べてみてください。

やり方

STEP1 Gemfileにgem 'dotenv'を追記

STEP2 config/webpack/environments.jsを以下のように編集

config/webpack/environments.js

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
const dotenv = require('dotenv')

const dotenvFiles = [
  '.env'
]
dotenvFiles.forEach((dotenvFile) => {
  dotenv.config({ path: dotenvFile, silent: true })
})

environment.plugins.prepend('Environment',
  new webpack.EnvironmentPlugin(
    JSON.parse(JSON.stringify(process.env))
  )
)

module.exports = environment

STEP3 .envに環境変数を設定

.env.

NANTKA_ID = xxxxxxxx

STEP4

example.js

process.env.NANTKA_ID