無法使用 webpack DefinePlugin 在 React 應用程序中從 dockerfile 訪問環境變量

Question

我不確定我做錯了什么。 console.log 打印undefined 。 Makefile 、 config.env 、 webpack.config.js和package.json項目的根目錄都是 7.7

Makefile：

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

配置.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)
        })
    ]

應用程序.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"
    },

Answer 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 and production at compile time 。

構建后在服務器上設置任何環境變量對編譯文件沒有影響。

並且由於在編譯代碼中直接注入環境變量，您不應該使用它來存儲機密信息（秘密/私人令牌、密碼、內部服務器的 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 存儲庫。

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