React - 无法访问服务器端的环境变量

Question

我在客户端使用 Create-React-App 创建了一个应用程序，在服务器端使用express 创建了一个应用程序。我为环境变量创建了一个

.env

文件，其中将存储

DB_USER

和

DB_PASSWORD

。

在服务器端，我想使用猫鼬连接，

.env

变量将是连接到mongodb服务器时的凭据。

当我执行

process.env.DB_USER

操作时，我在终端控制台中收到未定义的变量。相反，我获取了操作系统环境变量和 NodeJS 变量。但是，当我在 Chrome 控制台/客户端执行

console.log(process.env.DB_USER)

时，我确实看到了变量。

我尝试安装

dotenv

、

dotenv-webpack

并配置我的

webpack.config

，但似乎没有任何效果。我还添加了

REACT_APP_*

作为变量的前缀，但仍然是未定义的值。

此外，当我使用

dotenv

并在我的

require('dotenv').config()

文件中设置此

index.js

时，它会抱怨

fs

依赖性？？

我只是无法在服务器文件夹中读取环境变量，理想情况下，在客户端和服务器文件夹中读取这些变量会很好。以前有人遇到过这个问题吗？我正在学习如何使用

Create-React-App

和

webpack

。我们将不胜感激您的帮助！！！

服务器.js

//server.js
const express = require('express');
const path = require('path');
const router = require('./routes/routes.js')
const app = express();
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const user = process.env.REACT_APP_DBUSER;
const password = process.env.REACT_APP_DBPASSWORD;

//tells express frontend will reside in client folder
app.use(express.static(path.join(__dirname, '../build')));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

console.log('node', process.env);
console.log(user);//this is undefined

//connect to mongoDB
mongoose.connect(`mongodb://${user}:${password}@ds141812.mlab.com:41812/note_app_db`, { useNewUrlParser: true });

let conn = mongoose.connection;
conn.on('error', console.error.bind(console, 'connection:'));
conn.once('open', () => {
    console.log('connected to database');
});

//pass in routes from router const
app.use('/',router)

module.exports=app;

webpack.config

const webpack = require('webpack');
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const Dotenv = require('dotenv-webpack');

const config = {
    entry: __dirname + '/client/js/index.jsx',
    output: {
        path: __dirname + '/build',
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx', '.css']
    },
    module: {
        rules: [
        {
            test: /\.jsx?/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['@babel/preset-env', '@babel/react']
            }
        },
        {
            test: /\.(png|jpg|svg|gif|mp4|mov)$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: '/assets/[name]-[hash:8].[ext]'
                }
            }]
        },
        {
            test: /\.scss$/,
            loader: 'style-loader!css-loader!sass-loader'
        }
        ]
    },
    devServer: {
        publicPath: '/',
        contentBase: __dirname + '/build',
        port: 5000,
        historyApiFallback: {
            index: 'index.html'
        }
    },
    plugins: [
        new CopyWebpackPlugin([
            { from: './client/index.html', to: './index.html' }
        ]),
        new Dotenv({
            path: './.env',
        }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify("development"),
                REACT_APP_DBUSER: JSON.stringify(process.env.REACT_APP_DBUSER),
                REACT_APP_DBPASSWORD: JSON.stringify(process.env.REACT_APP_DBPASSWORD)
            }
        })
    ]
}


module.exports = config

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
require('dotenv').config({path: '../../.env'});//is this how it supposed to look like???

ReactDOM.render(<App />, document.getElementById('root'));

package.json

{
  "name": "note_app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/core": "^7.1.5",
    "@babel/preset-env": "^7.1.5",
    "@babel/preset-react": "^7.0.0",
    "axios": "^0.18.0",
    "babel-loader": "^8.0.4",
    "body-parser": "^1.18.3",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^1.0.1",
    "dotenv": "^6.1.0",
    "dotenv-webpack": "^1.5.7",
    "env-cmd": "^8.0.2",
    "express": "^4.16.4",
    "file-loader": "^2.0.0",
    "mongoose": "^5.3.11",
    "node-sass": "^4.10.0",
    "nodemon": "^1.18.6",
    "react": "^16.6.1",
    "react-dom": "^16.6.1",
    "react-modal": "^3.6.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack-cli": "^3.1.2"
  },
  "scripts": {
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "webpack": "webpack --mode development",
    "dev": "npm run webpack && nodemon bin/www"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

.env 文件

REACT_APP_DBUSER="username"
REACT_APP_DBPASSWORD="password"

文件结构

Answer 1

找到了解决方案，所以

dotenv

很好，我已经卸载了

dotenv-webpack

。为了让

server.js

文件读取环境变量，我只需要在这个文件中添加

require('dotenv').config();

即可。应该可以去吧！

Answer 2

替换我旧的错误答案。

您可以使用这个包，而不是使用 dotenv-webpack 包吗：

https://www.npmjs.com/package/dotenv

理论上，你可以从插件中删除

new DotEnv

，然后当你调用

require('dotenv').config()

时，你的 webpack.config.js 应该可以访问这些环境变量，然后你的 webpack 定义插件将拾取它们并将它们注入到你的代码

Answer 3

您不需要安装任何软件包，只需在令牌前写入

REACT_APP

即可 process.env.REACT_APP_TOKEN_NAME

.env 文件看起来像这样

REACT_APP_TOKEN_NAME = fhsahffdsaf-sdfsf-fds