【Rails on Rails】.envの環境変数をjsファイル内で利用する方法

3516 ワード
Rails JavaScript 環境変数 Gem Ruby Ruby テキストリンク

はじめに

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ファイル内で環境変数を利用することが出来ます。

参考リンク