使用 craco 的 React App 不会在 docker-compose 中启动

Question

我得到了一个需要用 Docker Compose 容器化的 React 项目。我有一个 Dockerfile:

FROM node:latest

# Create app directory
WORKDIR /usr/src/app

ENV PATH /app/node_modules/.bin:$PATH

COPY package.json ./

ADD . /usr/src/app

RUN npm install

EXPOSE 3000
CMD [ "npm", "start" ]

和 docker-compose.yml:

version: "3"

services:
  front:
    container_name: dev_front
    environment:
      - PATH= /app/node_modules/.bin:${PATH}
    build:
      context: .
    ports:
      - 3000:3000
    restart: always

我看到了与我的问题相关的问题：
Create React App fails to build inside docker

我尝试像答案中那样添加 PATH 环境，但我仍然得到：

dev_front | craco: *** Cannot find ESLint loader (eslint-loader). ***
dev_front | The following changes are being made to your tsconfig.json file:
dev_front | - compilerOptions.paths must not be set (aliased imports are not supported)
dev_front | dev_front | ℹ ｢wds｣: Project is running at http://172.19.0.2/
dev_front | ℹ ｢wds｣: webpack output is served from
dev_front | ℹ ｢wds｣: Content not from webpack is served from /usr/src/app/public
dev_front | ℹ ｢wds｣: 404s will fallback to /

然后我发现了这个问题：
How do I run a webpack build from a docker container?
答案告诉我们，docker 和 webpack 与内部容器地址冲突。我像答案中那样更改了 config.js 文件。

craco.config.js:

const CracoAlias = require("craco-alias");

module.exports = {
    webpack: {
        alias: {
            'vscode': require.resolve('@codingame/monaco-languageclient/lib/vscode-compatibility')
        },
        devServer: {
            host: '0.0.0.0',
            port: 3000
        }
    },
    plugins: [{
        plugin: CracoAlias,
        options: {
            source: "tsconfig",
            baseUrl: "./src",
            tsConfigPath: "./tsconfig.extend.json"
        }
    }]
};

还是不行。

Answer 1

必须与 webpack 版本有关

解决方案是在 Dockerfile 中添加以下行：

ENV NODE_OPTIONS --openssl-legacy-provider

更多信息：

使用 craco 的 React App 不会在 docker-compose 中启动

React App with craco doesn't start in docker-compose

node.js

docker

reactjs

webpack

docker-compose