Rails 5.1 - webpackからフロントエンドに環境変数を渡す方法

Question

api呼び出しを行うフロントエンドで、私のapiのドメインを変更したいと思います。開発時には、localhost：xxxxドメインと、ステージングとプロダクションのための別のドメインが必要です。現在、デフォルトのRails webpack dev serverは、キーをprocessオブジェクトに公開しています。

私はこのように、両方の手でbin/webpack-dev-serverにこの設定を渡して試してみた：

Dir.chdir(APP_PATH) do 
    exec "NODE_PATH=#{NODE_MODULES_PATH} #{WEBPACK_BIN} --progress --color " \ 
    "--config #{DEV_SERVER_CONFIG} NODE_ENV=development #{ARGV.join(" ")}" 
end 

私も、このように直接config/shared.jsに.envオブジェクトへ追加しようとしました：

new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(Object.assign(env, { 'NODE_ENV': process.ev)))), 

それらのアプローチのどちらも.envオブジェクトを変更しません。

アイデア？環境変数を渡す方法としてのWebPACKを使用して

ソリューション

ディッチ。良い古いRails環境を使用して、windowオブジェクトに環境変数を割り当てます。

Answer 1

私はwebpack environment pluginを使用してこの作業を取得することができました：あなたのアプリで

// config/webpack/development.js 

const webpack = require('webpack') 
const environment = require('./environment') 
const config = environment.toWebpackConfig() 

config.plugins = (config.plugins || []).concat([ 
    new webpack.EnvironmentPlugin([ 'SECRET_KEY' ]) 
]) 

module.exports = config 

を、あなたはprocess.env内SECRET_KEYにアクセスできるようにする必要があります

console.log(process.env.SECRET_KEY) 

希望に役立ちます！