无法使用 webpack DefinePlugin 从 React 应用程序中的 dockerfile 访问环境变量答案

【问题标题】：Unable to access env variables from dockerfile in React app using webpack DefinePlugin无法使用 webpack DefinePlugin 从 React 应用程序中的 dockerfile 访问环境变量
【发布时间】：2020-02-17 10:38:59
【问题描述】：

我不确定我做错了什么。 console.log 打印 undefined。 Makefile、config.env、webpack.config.js 和 package.json 都在项目的根目录下。

生成文件：

docker-run: docker
    docker run -it --env-file config.env -p "80:80" app

config.env

API_KEY=https://test.com

webpack.config.js

plugins: [
        new webpack.DefinePlugin({
            BASE_URL: JSON.stringify('https://myapp.firebaseio.com'),
            'process.env.API_KEY': JSON.stringify(process.env.API_KEY)
        })
    ]

App.js

const App = () => {
    useEffect(() => {
        console.log(process.env.API_KEY);//undefined
        console.log(process.env.BASE_URL);//undefined
        console.log(BASE_URL);//undefined
    }, []);
    return (
        <></>
    );
};

Package.json(npm run docker)

"scripts": {
        "start": "rm -rf dist && webpack-dev-server --mode development --open --hot --port 8090",
        "docker": "rm -rf dist && webpack --mode production && make docker-run"
    },

【问题讨论】：

exec进入容器和printenv，输出是什么？

标签： javascript reactjs docker npm webpack

【解决方案1】：

我在这里看到的一个错误是，您在 docker 之外构建项目并将工件（在构建之后）推送到 docker 以服务于 webapp。

根据DefinePlugin 的文档 https://webpack.js.org/plugins/define-plugin/

DefinePlugin 允许您创建全局常量编译时配置

也就是说，如果你有一个像下面这样的App.js 组件

import React from 'react';

function App() {
  return (
    <div>
        <p>[process.env.test] = {process.env.test}</p>
        <p>[process.env.NODE_ENV] = {process.env.NODE_ENV}</p>

    </div>
  );
}

export default App;

和 webpack 配置

new webpack.DefinePlugin({"process.env.test": JSON.stringify(process.env.test)})

在运行 NODE_ENV=production test="A test variable" npm run build 之后（如果使用 create-react-app 引导，则在内部运行 webpack --mode production）

组件被编译为（仅粘贴 webpack 编译代码的相关部分）。

 var i = function() {
        return a.a.createElement(
          "div",
          null,
          a.a.createElement(
            "p",
            null,
            "[process.env.test] = ",
            "A test variable"
          ),
          a.a.createElement(
            "p",
            null,
            "[process.env.NODE_ENV] = ",
            "production"
          )
        );
      }

这里将{process.env.test} 和{process.env.NODE_ENV} 替换为A test variable 和production在编译时。

构建后在服务器上设置任何环境变量对编译后的文件没有影响。

由于在编译代码中直接注入了环境变量，您不应该使用它来存储机密信息（秘密/私人令牌、密码、内部服务器的 IP 地址等）。

因此，您最初的问题的解决方案可能是在 docker 容器内构建工件。下面是一个示例 Docker 文件。

FROM node:10 as react-app
# Create app directory
WORKDIR /usr/src/app
# Set a temporary variable
ENV test="Hello Docker"
COPY . .
RUN npm install
RUN npm run build

FROM nginx:1.12-alpine
COPY --from=react-app /usr/src/app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

如果您需要参考，请提供示例 git repo。

https://github.com/nithinthampi/test-defineplugin.

【讨论】：