WebpackとReact.jsとdotenvで.envの環境変数をbuildされるコード上でprocess.envとして使いたい
はじめに
react dotenvで検索すると「前提、create-react-appを使う」と指定されていて
「うわぁあああ」となったので書いてみた。
※本記事はReact.jsである必要はありません。react-create-app系記事へのプロパガンダです。
もっといい方法があれば教えて下さい。
結論
const webpack = require('webpack');
const dotenv = require('dotenv');
module.exports = () => {
const env = dotenv.config().parsed;
return {
// ---------- 全て省略 ----------
plugins: [
new webpack.DefinePlugin({
'process.env': JSON.stringify(env)
})
],
};
};
前提
- create-react-appを使わずに構築
- webpackを使っている
プラグインのインストール
今回はdotenvを採用
https://github.com/motdotla/dotenv
yarn add -D dotenv
dotenvやdotenv-webpackと選択肢がある
下記の様に選択肢があり、dotenvはサーバー上でしか動かない、つまりビルドする時に.envファイルから取得してwebpackを介して環境変数を渡して上げなければならないので、dotenv-webpackなどを使う方法もありだと思います。
.env作成
package.jsonなどと同じ階層に.envファイルを作ってください。
rootに無いとdotenvでpathを指定しないといけなくなります。(逆に言えばpathさえ指定できればどこでもいい)
SERVICE_URL="https://hogehoge.com"
API_URL="https://hoge-api.com"
NODE_ENV="development"
webpack.config.jsの編集
-
dotenv
で.env
ファイルを読み込む -
dotenv.config().parsed
で設定値を取得 -
webpack.DefinePlugin
を使って注入する -
JSON.stringify()
で変換して上げないと正しく値を渡せないので変換
DefinePluginは、webpack.config.js内からモジュールに対し、設定値等の値を注入できるプラグインです。
const webpack = require('webpack');
const dotenv = require('dotenv');
module.exports = () => {
const env = dotenv.config().parsed;
return {
// ---------- 全て省略 ----------
plugins: [
new webpack.DefinePlugin({
'process.env': JSON.stringify(env)
})
],
};
};
process.envの取得方法
import React from 'react';
const Home = (): JSX.Element => {
console.log(process.env.NODE_ENV); // -> development
return (
<div>
<p>this is Home</p>
</div>
);
};
export default Home;
参考
Environment Variables : Webpack config using DefinePlugin
Using environment variables in React
Webpackを使ってJSでも.envしたい
Author And Source
この問題について(WebpackとReact.jsとdotenvで.envの環境変数をbuildされるコード上でprocess.envとして使いたい), 我々は、より多くの情報をここで見つけました https://qiita.com/HorikawaTokiya/items/c1a476ceeab0bf644311著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .