はじめに
Rails内で環境変数を.envファイル内に書いておくと、ENV["環境変数名"]で利用することが出来ます。
しかし、erbファイル内では利用することが出来ますが、jsファイルで利用することが出来ません。
そこで、jsファイル内で環境変数を利用する方法を解説します。
gemのインストール
以下の２つのgemをインストールします。
Gemfileに以下の２つのgemを記入し、
Gemfile
gem 'gon'
gem 'dotenv-rails'
bundle installします。
bundle install
.envファイルの作成作成
jsファイル内で利用したい、環境変数を.envファイルに記入します。
.env
KEY = "xxx"
.gitignoreファイルを編集
念の為、GithubなどにAPI KEYなどの環境変数が公開されていように設定します。
.envに以下の１行を追加します。
.gitignore
/.env
application.html.erbの編集
application.html.erbのhead内に以下の１行を追加します。
application.html.erb
<%= include_gon %>
【注意】javascriptより上に書くこと
コントローラーの編集
環境変数を利用したいコントローラーのメソッドに追記。
xxx_controller.erb
def xxx
gon.xxx_key = ENV['KEY']
end
KEYは.envに記述したもの
jsファイルの編集
xxx.js
const KEY = gon.xxx_key;// 環境変数
これでjsファイル内で環境変数を利用することが出来ます。